jQuery原生框架-----------------属性操作
// 添加一个处理兼容获取样式的静态方法
jQuery.getStyle = function( dom, styleName ) {
// dom不是dom,styleName不是字符串,直接打走
if( !jQuery.isDOM( dom ) || !jQuery.isString( styleName ) ) {
return false;
}
// 兼容获取指定的样式
if( window.getComputedStyle ) {
return window.getComputedStyle( dom )[ styleName ];
}else {
return dom.currentStyle[ styleName ];
}
};
// 添加属性和样式操作的方法
jQuery.fn.extend({
// 设置或者获取元素的属性节点
attr: function( attr, val ) {
/*
* 实现思路:
* 1、如果参数的个数为1
* 1.1、这个参数为字符串,那么获取第一个元素指定的属性节点值(getAttribute())并返回。
* 1.2、这个参数为对象,遍历所有的元素,然后再遍历这个对象,
* 把对象中所有的属性值按照属性节点的方式添加给所有元素。
* 2、如果参数的个数为2,遍历所有的元素,
* 以attr为属性节点名,val为属性节点值添加给这些元素。
* 3、链式编程返回this。
* */
var arg = arguments, argLen = arg.length;
// 参数为1
if( argLen === 1 ) {
// 类型为字符串,返回第一个元素指定的属性节点值
if( jQuery.isString( attr ) ) {
return this.get(0).getAttribute( attr );
}
// 类型为对象,遍历所有的元素,然后再遍历这个对象,依次添加遍历到的所有属性节点值
else if( jQuery.isObject( attr ) ) {
/*// 遍历所有元素
for( var i = 0, len = this.length; i < len; i++ ) {
// 遍历传入进来的对象
for( var key in attr ) {
// 给每一个元素设置遍历到的属性节点
this[ i ].setAttribute( key, attr[ key ] );
}
}*/
// 遍历所有元素
this.each( function() {
// 这里的this指向遍历到的每一个元素
var self = this;
// 遍历传入进来的对象
jQuery.each( attr, function( key, val ) {
// 给每一个元素设置遍历到的属性节点
self.setAttribute( key, val );
});
});
}
}
// 参数为2
else if( argLen === 2 ) {
// 两个参数都是字符串,那么给所有元素设置指定的属性节点
if( jQuery.isString( attr ) && jQuery.isString( val ) ) {
this.each( function() {
// 这里的this指向遍历到的每一个元素
this.setAttribute( attr, val );
});
}
}
// 链式编程
return this;
},
// 设置或者获取元素的属性
prop: function( prop, val ) {
/*
* 实现思路:
* 1、如果参数的个数为1
* 1.1、这个参数为字符串,那么获取第一个元素指定的属性并返回。
* 1.2、这个参数为对象,遍历所有的元素,然后再遍历这个对象,
* 把对象中所有的属性值添加给所有元素。
* 2、如果参数的个数为2,遍历所有的元素,
* 以attr为属性名,val为属性值添加给这些元素。
* 3、链式编程返回this。
* */
var argLen = arguments.length;
// 参数为1
if( argLen === 1 ) {
// 类型为字符串,返回第一个元素指定的属性值
if( jQuery.isString( prop ) ) {
return this.get(0)[ prop ];
}
// 类型为对象,遍历所有的元素,然后再遍历这个对象,依次添加遍历到的所有属性值
else if( jQuery.isObject( prop ) ) {
// 遍历所有元素
this.each( function() {
// 这里的this指向遍历到的每一个元素
var self = this;
// 遍历得到所有的属性
jQuery.each( prop, function( key, val ) {
// 给每一个元素分别设置遍历到的属性
self[ key ] = val;
});
});
}
}
// 参数为2
else if( argLen === 2 ) {
// 两个参数都是字符串,那么给所有元素设置指定的属性
if( jQuery.isString( prop ) && jQuery.isString( val ) ) {
this.each( function() {
this[ prop ] = val;
});
}
}
// 链式编程
return this;
},
// 设置或者获取元素的value属性
val: function( val ) {
// 不传参,返回第一个元素的value属性值
if( arguments.length === 0 ) {
return this.get(0).value;
}
// 传参,给所有元素分别设置对应的value属性值
else {
this.each( function() {
this.value = val;
});
}
// 链式编程
return this;
},
// 升级版,复用prop方法实现value属性的获取和设置
_val: function() {
return this.prop.apply( this, [].concat.apply( ['value'], arguments ) );
},
css: function( styleName, val ) {
/*
* 实现思路:
* 1、如果参数的个数为1
* 1.1、这个参数为字符串,那么获取第一个元素指定的样式并返回。
* 1.2、这个参数为对象,遍历所有的元素,然后再遍历这个对象,
* 把对象中所有的样式添加给所有元素。
* 2、如果参数的个数为2,遍历所有的元素,
* 以styleName为样式名,val为样式值添加给这些元素。
* 3、链式编程返回this。
* */
var argLen = arguments.length;
// 参数为1
if( argLen === 1 ) {
// 如果为字符串,那么返回第一个元素指定的样式
if( jQuery.isString( styleName ) ) {
return jQuery.getStyle( this.get(0), styleName );
}
// 如果为对象,遍历所有元素,遍历所有样式,依次给每一个元素设置
else if( jQuery.isObject( styleName ) ) {
this.each( function() {
var self = this;
jQuery.each( styleName, function( key, val ) {
self.style[ key ] = val;
});
});
}
}
// 参数为2
else if( argLen === 2 ) {
// 给所有元素分别设置对应的样式
this.each( function() {
this.style[ styleName ] = val;
});
}
// 链式编程
return this;
},
hasClass: function( className ) {
/*
* 实现思路:
* 1、遍历所有元素
* 2、依次得到每一个元素的className,并加空格处理
* 3、然后用处理过的className判断是否存在某class(也要加空格处理)
* 4、只要有一个存在,就返回true,否则返回false。
* */
for( var i = 0, len = this.length; i < len; i++ ) {
if( (' ' + this[ i ].className + ' ')
.indexOf(' ' + className + ' ' ) > -1 ) {
return true;
}
}
return false;
},
// 判断是否存某class
_hasClass: function( className ) {
var has = false;
this.each( function() {
if( (' ' + this.className + ' ').indexOf(' ' + className + ' ' ) > -1 ) {
has = true;
return false;
}
});
return has;
},
// 批量添加class
addClass: function( classNames ) {
/*
* 实现思路:
* 1、把classNames字符串转换为存储不同class的数组
* 2、遍历所有元素,遍历所有class
* 3、依次判断元素有没有遍历到的class,没有则累加。
* 4、链式编程返回this
* */
classNames = classNames.split(' ');
this.each( function() {
var self = this;
jQuery.each( classNames, function() {
if( !jQuery( self ).hasClass( this + '' ) ) {
self.className += ' ' + this;
}
});
});
return this;
},
// 批量删除class
removeClass: function( classNames ) {
/*
* 实现思路:
* 1、如果没传参
* 1.1. 遍历所有元素,清除每一个元素的class
* 2、如果传参了
* 2.1、把classNames字符串转换为存储不同class的数组
* 2.2、遍历所有元素,遍历所有class
* 2.3、直接替换掉遍历到的class,然后把替换后的class字符串赋给元素
* 3、链式编程返回this
* */
// 不传参,清除全部class
if( arguments.length === 0 ) {
this.each( function() {
this.className = '';
});
}
// 传参,批量删除指定class
else {
classNames = classNames.split(' ');
this.each( function() {
var self = this;
jQuery.each( classNames, function( i, val ){
self.className = self.className.replace( new RegExp( '\\b' + val + '\\b' , 'g' ), '' );
});
});
}
// 链式编程
return this;
},
// 有则删,没则加
toggleClass: function( classNames ) {
/*
* 实现思路:
* 1、把classNames字符串转换为存储不同class的数组
* 2、遍历所有元素,遍历所有class
* 3、有则删除,没则加
* 4、链式编程返回this
* */
classNames = classNames.split(' ');
this.each( function() {
var $self = jQuery(this);
jQuery.each( classNames, function( i, val ) {
if( $self.hasClass( val ) ) {
$self.removeClass( val );
}else {
$self.addClass( val );
}
});
});
}
});
jQuery原生框架-----------------属性操作的更多相关文章
- jQuery原生框架-----------------dom操作
// 扩展DOM操作方法jQuery.fn.extend({ // 设置或者获取元素的内容 html: function( html ) { /* * 实现思路: * 1.不传参,返回第一个元素的内容 ...
- jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
- jquery 学习(二) - 属性操作
html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...
- jQuery对象的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- jquery对标签属性操作
jquery中添加属性和删除属性: $("#2args").attr("disabled",'disabled'); $("#2args") ...
- jQuery原生框架-----------------核心框架
// 1.自调防止全局变量污染(function( window ) { var version = '1.0.0'; var document = window.document; var arr ...
- jQuery基本的属性操作
attr和prop,prop常用来操作标签的固有属性,比方说checkbox的checked属性.select的selected属性,而attr常用来操作我们自己给标签添加的属性. $('div'). ...
- jQuery原生框架-----------------事件
jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if( ...
随机推荐
- ADO.NET 使用通用数据库操作类Database (SQL Server)
一.Web.config配置 <connectionStrings> <add name="constr_name" connectionString=" ...
- css新增样式
一. box-shadow(阴影效果)使用:box-shadow: 20px 10px 0 #000;-moz-box-shadow: 20px 10px 0 #000;-webkit-box-sha ...
- [iOS]浅谈NSRunloop工作原理和相关应用
一. 认识NSRunloop 1.1 NSRunloop与程序运行 那么具体什么是NSRunLoop呢?其实NSRunLoop的本质是一个消息机制的处理模式.让我们首先来看一下程序的入口——main ...
- XUtils3 的 环境搭建
XUtils3 的 环境搭建 环境搭建三部曲 ----------------------- 说明 : author 修雨轩陈 使用andorid Studio 已经创建了一个项目 并且自己需要使用 ...
- Yii读取TXT文件数据插入到数据库
个人平时会用到的方法,记录一下并分享给需要的朋友,Yii批量添加还需要clone一下model才可以,不然只会插入一条数据. 也可以把文件通过参数的方式调入到方法中. // 读取CVS文件 funct ...
- iPhone5停留在语音的界面,提示按三次home键,无法继续下去
不知道之前用户是怎么操作的,可能是刷机或恢复出厂设置.穷人,没用玩过iPhone. 根据提示关键词,网上搜索,发现只需要按三次home,三次锁屏,三次锁屏,最后再三次home就可以了. 试了两次,还真 ...
- Windows下配置nginx+php(wnmp)
第一部分:准备工作.(系统:Windows 8.1) 1.首先是下载软件. NGINX-1.3.8官网下载:http://nginx.org/en/download.html PHP5.4.8版本 ...
- Python基础笔记
输入输出 输入input(),输入的字符以str作为结果,若要得到整数结果,需要进行数据类型转换,如a=int(input()). 输出print,格式化输出%s表示字符串替换,%d表示整数替换,%f ...
- 关于RSA加密算法的长度限制问题
RSA是常用的非对称加密算法.近来有学生在项目中使用System.Security类库中的RSA加密算法时,出现了“不正确的长度”,这实际上是因为待加密的数据超长所致..net Framework中提 ...
- Redis学习笔记~实现消息队列比MSMQ更方便
什么是队列:简单的说就是数据存储到一个空间里(可以是内存,也可以是物理文件),先存储的数据对象,先被取出来,这与堆栈正好相反,消息队列也是这样,将可能出现高并发的数据进行队列存储,并按着入队的顺序依次 ...