jQuery中attr()和prop()方法的介绍

偏执的太偏执、 2022-09-25 05:12 175阅读 0赞

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

attr(属性名)；//获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined）
    attr(属性名, 属性值)；//设置属性的值（为所有匹配的元素设置一个属性值）
    attr(属性名,函数值)；//设置属性的函数值（为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）
    attr(properties)； //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id')

2、jQuery中attr()的使用  
（1）用法一

$(选择器).attr(属性名);//它的作用就是获取指定元素( $(选择器)部分 )的指定属性的值。如:
    
    <img src=“http://t.douban.com/lpic/s3791510.jpg” alt=“变形金刚海报” width=“500″ height=“300″ />
    
    //获取图片的地址
    $(”img”).attr(”src”);
    //获取图片的描述
    $(”img”).attr(”alt”);
    //如果你要获取的属性是不存在的, 那么jquery就会返回一个undefined
    $(”img”).attr(”des”);//返回undefined

（2）用法二

$(选择器).attr(属性名, 属性值);//它的作用是为所有匹配的元素设置一个属性值。假如页面中有一堆这样的html：<img /><img />
    
    //我们写一句这样的jquery代码: $(”img”).attr(”src”,”http://t.douban.com/lpic/s3791510.jpg”);//这样上面一堆无意义的img标签就变成了: 
    <img src=“http://t.douban.com/lpic/s3791510.jpg” /><img src=“http://t.douban.com/lpic/s3791510.jpg” />
    
    //给图片设置高度
    $(”img”).attr(”height”,”300″);
    //给图片设置宽度
    $(”img”).attr(”width”,”500″);

（3）用法三

$(选择器).attr(Map);//给指定元素设置多个属性值
    
    //实现用法二中的例子只要这样写
    $(“img”).attr({src:“http://t.douban.com/lpic/s3791510.jpg” , height: “300″ , width : “500″});

（4）删除属性  
　　jQuery中删除属性的关键词是: removeAttr。注意A是大写的。同样是用法一中的html代码, 我想删掉图片的高度属性, 那么就这样:

$(“img”).removeAttr(“height”);//删除height属性

（5）与attr()相似的属性

//在jquery中，val()与attr()作用类似，如：
    $(this).val();//获取某个元素节点的value值，相当$(this).attr("value");
    
    $(this).val(value);//设置某个元素节点的value值，相当于$(this).attr("value",value);

3、jQuery中attr()和prop()的区别  
　　在高版本的jQuery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。  
（1）区别  
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。  
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

（2）实例解释  
1）prop()

这个例子里`<a>`元素的DOM属性有“href、target和class”，这些属性就是`<a>`元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

2）attr()

这个例子里`<a>`元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，`<a>`元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。  
（3）再举一个例子

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
    <input id="chk1" type="checkbox" />//是否可见
    <input id="chk2" type="checkbox" checked="checked" />//是否可见
    
    //使用prop方法
    $("#chk1").prop("checked") == false
    $("#chk2").prop("checked") == true
    
    //如果上面使用attr方法，则会出现：
    $("#chk1").attr("checked") == undefined
    $("#chk2").attr("checked") == "checked"