jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery dom操作中会经常用到attr(),attr()有4个表达式。
1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )
2. attr(属性名, 属性值) //设置属性的值 (为所有匹配的元素设置一个属性值。)
3. attr(属性名,函数值) //设置属性的函数值 (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)
4.attr(properties) //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)
attr定义:
attr: function( name, value=undefined ) {
return jQuery.access( this, jQuery.attr, name, value=undefined, arguments.length > 1 );
}
access调用简化:
var access = function( this, jQuery.attr, name, value=undefined, chainable=false, emptyGet=undefined, raw=undefined ) {
var i = 0,
length = this.length, //jQuery对象的length属性(jQuery对象总是有length属性,它是类数组对象)
bulk = false;
return jQuery.attr( this[0], name );
};
同样,我们找到jQuery.attr()静态方法的源代码定义,用同样的简化方法分析,得到:
attr: function( elem, name, value=undefined ) { // elem:DOM对象 name:属性名/键名 value:属性值
var ret, hooks,
nType = 1;
ret = jQuery.find.attr( elem, name );
return ret;
}
其中,唯一不确定的是jQuery.find.attr,然而我们继续找下去则是有关Sizzle选择器引擎的问题,这对于我们初学者来说过于复杂.因此,我们再简化一下,带入实际情景,检测这一函数的输出:
var $p = $('#jQueryTest')[0];
console.log(jQuery.find.attr($p,'id')); //jQueryTest
因此,大概知道该函数该种传参情况下的作用是返回指定DOM元素的指定属性的值.
由jQuery.access简化代码中的return jQuery.attr( this[0], name );可知,只传入一个name参数的情况下,确实只会返回jQuery对象中的索引为'0'的DOM对象的指定属性的属性值.
attr定义:
attr: function( name, value) { //此时的this是一个类数组
return jQuery.access( this, fn=jQuery.attr, name, value, chainable=true);
}
access调用简化:
var access = function( this, jQuery.attr, name, value, chainable=true, emptyGet=undefined, raw=undefined ) {
var i = 0,
length = this.length, //jQuery对象的length属性,表示找到的匹配的DOM元素的个数
bulk = false;
chainable = true;
if ( !jQuery.isFunction( value ) ) { //当value值不为函数时,设置raw为true,这是为了下一步if(jQuery.attr)中的raw判断做铺垫
raw = true;
}
if ( jQuery.attr ) { //jQuery.attr,为true
for ( ; i < length; i++ ) { //用for循环是因为此时的this是一个包含多个DOM元素的jQuery对象
jQuery.attr(
this[ i ],
name,
raw ? value : value.call( elems[ i ], i, jQuery.attr( this[ i ], name ) )
);//raw为true,也就是value不为函数时,用value作第三参数
}
}
}
return this; //返回jQuery对象本身
};
而,我们用简化的方法分析此种情况下的jQuery.attr(this,name,value):
attr: function( this[i], name, value ) {
var ret, hooks,
nType = this[i].nodeType;
if ( value !== undefined ) { //判断为true,进入if语句
if ( value === null ) {
jQuery.removeAttr( this[i], name );//如果value为null,删除该jQuery对象的所有匹配元素的指定属性
return;
}
this[i].setAttribute( name, value + "" );//设置当前DOM元素的指定属性的属性值
return value;
}
ret = jQuery.find.attr( this[i], name ); //删除了属性,返回null;否则,返回指定属性的属性值
return ret == null ? undefined : ret; //如果删除了指定属性,返回undefined;如果修改了属性,返回指定属性值
}
attr定义:
attr: function( name=attrObject ) {
return jQuery.access( this, jQuery.attr, name=attrObject, value=undefined, false);
}
access调用简化:
var access = function( this, fn, name, value=undefined, chainable=false, emptyGet=undefined, raw=undefined ) {
var i = 0,
length = this.length, //元素的length属性
bulk = false;
// 设置多个value值
if ( jQuery.type( name ) === "object" ) { //如果传入的name形参为对象类型
chainable = true;
for ( i in name ) { //对每一个对象中的属性名及属性值再次调用本身(递归)
access( this, fn, i, name[ i ], true, emptyGet, raw );
}
}
return elems; //返回jQuery对象本身
};
可见,对于一个由"属性-属性值"键值对构成的对象,会对其中的每一个属性都调用access设置一次.由于代码中使用的for-in循环,所以enumerable为false的键值对是无效的.
attr定义:
attr: function( name, value=attrFn ) {
return jQuery.access( this, jQuery.attr, name, value=attrFn, chainable=true );
}
access调用简化:
var access = function( this, jQuery.attr, name, value=attrFn, chainable=true, emptyGet=undefined, raw=undefined ) {
var i = 0,
length = this.length, //jQuery对象的length属性
bulk = false;
chainable = true;
if ( jQuery.attr ) { //true,进入if语句
for ( ; i < length; i++ ) {
jQuery.attr(
this[ i ],
name,
attrFn.call( this[ i ], i, jQuery.attr( this[ i ], name ) ) // 调用attrFn,其返回值作为第三个参数
);
}
}
return elems; // 返回jQuery对象本身
};
由attrFn.call( this[ i ], i, jQuery.attr( this[ i ], name ) )可知,attrFn的参数限制就是源自这一行代码:(this[i]是调用attrFn的元素,后面两个是参数,一个是jQuery对象中的索引值,一个是当前元素的指定属性name的值的查询返回)
[特别注意:attrFn的两个参数虽然有规定,但是不需要我们真的传参,而是函数体内部使用索引值或者当前属性值的一个接口]
在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。
15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...
jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend(),$.fn,$.widget()
在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。
在使用jquery.pagination.js插件的时候,会出现pagination is not a function的错误,这是什么原因导致的呢?这里为大家整理一下,请对比自己的代码参考!
整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...
jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画
在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!