jquery设置属性attr

时间: 2018-11-28阅读: 2037标签: jquery

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。  

1. attr(属性名      //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

2. attr(属性名, 属性值)   //设置属性的值 (为所有匹配的元素设置一个属性值。)

3. attr(属性名,函数    //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

4.attr(properties)    //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)


调用形式:$("xxx").attr(name)

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对象的指定属性的属性值.


调用形式:$("xxx").attr(name,value);

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;如果修改了属性,返回指定属性值
}


调用形式:$("xxx").attr(attrObject);

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的键值对是无效的.


调用形式:$("xxx").attr(name,attrFn);

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的两个参数虽然有规定,但是不需要我们真的传参,而是函数体内部使用索引值或者当前属性值的一个接口]


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1434

在jQuery中使用自定义属性

在jquery中 自定义属性及值,默认以下都是在class=‘acitve‘对象中 进行自定义属性操作:自定义属性格式:data-xxxx;审查元素是看不到该属性的,只能输出控制台可以看到该值。

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

JQuery 自动触发事件

在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

JQuery的ajax函数执行失败,alert函数弹框一闪而过

原因其实非常简单,把form表单里最后提交按钮的type=submit换为type=button,因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

Eclipse去除jquery引入错误

去除eclipse的JS验证:第二步:右键项目 -> properties -> Builders 去掉JavaScript Validator 前面的勾,第三步:复制该js文件到某个地方,然后从eclipse中直接删除 了报错的js文件,错误消失,再把刚才那个js文件拷进来。

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能,花了大概一天的时间,搞清楚了大概的参数配置,以及遇到的一些问题,总结如下。

jQuery实现全选、全不选以及反选操作

在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一个的状态再点击全选,之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false,操作很方便,很完美没有bug

jQuery 常用小技巧分享

整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...

利用jQuery not()方法选取除某个元素外的所有元素

日常的工作中可能会用到,选取处某个或者某些元素外的所有元素。这时我们可以使用 jQuery 遍历中的 not() 方法来排除某些元素,例如根据元素的 #id ,.class 等排除,代码如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!