Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name)

1.1 .attr(name) 参数name为属性名称

<a id="my_href" href="#">连接</a>
<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>$("#my_href").attr("href");  -->#
$("#My_Cbox").attr("checked");  //返回checked  (或undefined)

1.2 .attr(pro) 参数pro为作为属性的“名/值对”对象

<img id="my_img"/>$("#my_img").attr({ src: "test.jpg", alt: "图片" }); --><img id="my_img" src="test.jpg" alt="图片"/>

1.3 .attr(key,value) 参数key value为属性跟其值

$("#my_img").attr("src","test.jpg");

1.4 .attr(key,fn) 参数key fn为属性跟回调函数

$("#my_img").attr("title", function() { return this.src });

1.5 .removeAttr(name) 参数name要删除的属性名

<img id="my_img" src="test.jpg"/>$("#my_img").removeAttr("src");  --> <img />

*1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);1.7版本在IE6下已支持删除disabled。

2:属性.prop(name|pro|key,val|key,fn)与.removeProp(name)

2.1 .prop(name) 参数name为属性名称

<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>$("#My_Cbox").prop("checked");   //返回true  (或false)
alert($("#My_Cbox").prop("disabled"));   //返回false  (或true)

2.2 .prop(pro) 参数pro作为属性的“名/值对”对象

$("#My_Cbox").prop({ disabled: true });
$("#My_Cbox").prop({ checked: true });

2.3 .prop(key,val) 参数属性名称，属性值

$("#My_Cbox").prop("disabled", false);
$("#My_Cbox").prop("checked", true);

2.4 .prop(key,fn) 参数key fn(index,attr)属性名称,返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值

$("#My_Cbox").prop("checked", function( i, val ) {return !val;
});

2.5 .removeProp(name) 参数要删除的属性名

<input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>$("#My_Cbox").removeProp("checked");  --><input id="My_Cbox" type="checkbox" value="check1"/>

3: .attr()与.prop()的区别

jquer .y 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"。所以，从1.6开 始，jq提供新的方法“prop”来获取这些属性。

以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么，什么时候使用attr，什么时候使用prop？？
1.添加属性名称该属性就会生效应该使用prop.2.是有true,false两个属性使用prop.3.其他则使用attr

    <div><input id="My_Cbox" type="checkbox" value="check1" checked="checked"/>check1</div><script type="text/javascript">$(function () {alert($("#My_Cbox").attr("checked"));  //返回checked  (或undefined)alert($("#My_Cbox").prop("checked"));   //返回true  (或false)
})</script>

下面这张图很好记录什么时候运用它们：

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；

Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]相关推荐

jquery 学习之二属性---文本值
text() 取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. Get the text contents of all matche ...
jQuery再学习之二、jQuery选择器
前言 jQuery选择器非常非常强大而且灵活,要完全掌握它是需要狠下一番功夫的.当然,掌握了主要的部分后,其它的了解就好,因为一些比较偏的毕竟用得少,而且可以有其它方法来实现. 选择器 1 ...
jQuery中的attr()与prop()设置属性、获取属性的区别
举例,比如我们要获取checkbox的属性或者设置checkbox选中或不选中. $("#editForm").find("input[type='checkbox']& ...
jquery中attr和prop以及removeAttr和removeProp的区别
结论:attr和prop都可以获取自定义对象的属性值,区别是attr能获取标签元素自定义属性,prop无法获取,返回undefined,它只能获取标签自带属性. removeAttr标签上的属性都可以 ...
总结jQuery中的DOM节点属性
DOM节点属性 attr removeAttr addClass removeClass html text attr attr(name|properties|key,value|key,fn):设 ...
html——attr与val、attr与prop、attr与css区别
一.attr与val val只能获取到元素的value值,如: alert($(this).val()+"unselected"); this是checkbox: attr不仅可以 ...
JS中attr和prop区别
一.attr和prop区别 attr 是从页面搜索获得元素值,所以页面必须明确定义元素才能获取值,相对来说较慢. prop是从属性对象中取值,属性对象中有多少属性,就能获取多少值,不需要在页面中显示定 ...
jQuery attr removeAttr 属性操作
jQuery attr removeAttr 属性操作 <%@ page language="java" import="java.util.*" pag ...
【jQuery】attr || removeAttr 对属性节点操作
jQuery - attr || removeAttr方法 1.attr()方法 * 作用:对DOM元素上的属性节点进行获取或者赋值 >>> 当只传一个参数就是获取 || 传两个参数 ...

Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]相关推荐

最新文章

热门文章