jQuery原生框架-----------------属性操作

Posted 2020-08-21 鹿晓晓

// 添加一个处理兼容获取样式的静态方法
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 );
}
});
});
}
});