jquery设置属性attr

时间: 2018-11-28阅读: 1620标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

jQuery如何为指定标签添加和删除一个样式

在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。

jquery 中的dom操作

jquery DOM 分为元素操作、属性操作、样式操作。本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习.

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

Jquery插件开发的方法总汇

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend(),$.fn,$.widget()

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

jquery自定义组件开发

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

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

jQuery数据缓存$.data 的使用以及源码解析

对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中

jQuery常用知识总结

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

点击更多...

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