jq中.prop()与attr()的区别

一,定义

prop() 方法设置或返回被选元素的属性和值。prop() 方法应该用于检索属性值

attr()  方法设置或返回被选元素的属性和值。如需检索 HTML 属性,请使用 attr() 方法代替。

固有属性用prop方法;

自定义属性用attr方法。

典型的例子:判断checkbox是否选中

    $(‘#all‘).on(‘click‘,function(){
        if($("#all").is(‘:checked‘)){
            $(".childbox").each(function () {
                $(this).prop({checked:true});
              });
        }else{
            $(".childbox").each(function () {
                   $(this).prop({checked:false});
             });
        }
    })

如果这里用attr的话,就会出错。

因为可能会出现$("xxx").attr("checked") == undefind;

还有典型的例子,可以看这个:

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").html("attr(‘checked‘): " + $("input").attr(‘checked‘)
                      + "<br>prop(‘checked‘): " + $("input").prop(‘checked‘));
    });
});
</script>
</head>
<body>

<p><b>注意:</b>确认或取消选中该复选框,然后单击按钮刷新内容。</p>
<button>查看attr() 和 prop() 的值</button>
<br><br>
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p id="p1"></p>

</body>
</html>

就个人理解来说,attr是获取标签的属性名,而prop可以获取属性状态。

时间: 2024-10-28 13:41:00

jq中.prop()与attr()的区别的相关文章

jQ中prop与attr的区别

1.prop适用于HTML元素本身就带有的固有属性 2.attr适用于HTML元素我们自定义的属性 <input type="checkbox" value="复选框" /> console.log($('[input="checkbox"]').attr("checked")) //undefined console.log($('[input="checkbox"]').prop("

jquery中prop和attr的区别

jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误. jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误 **参数** name String V1.6 属性名称 properties Map V1.6 作为属性的"名/值对"对象 key,v

jQuery中prop() 和 attr()的区别

prop() 和 attr() 可能返回不同的值,先看下面一段代码 <script> $(document).ready(function(){ $("button").click(function(){ $("input").attr('checked') //attr('checked'): checked 或 undefined $("input").prop('checked')); //prop('checked'): tr

jquery中prop()和attr()的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. <a href="http://www.baidu.com" target="_sel

第82天:jQuery中prop()和attr()的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了. <a href="http://www.baidu.com" target="_sel

关于jQuery表单选择中prop和attr的区别。

今天用jQuery学习表单这一章节的内容,再次遇到表单全选时,不能进行第二次全选的情况.反复查看测试仍然找不到是什么原因.后来在网上查到原来是jQuery1.6以后的版本用到的是prop.用attr的话不会多次实现,因为attr不会记录当前checkbox的选中状态. 表单这一章节内容让我感觉到有点吃力,总之好好努力吧! 以下是代码说明: <!DOCTYPE html> <html lang="en"> <head> <meta charset

JQuery中prop和attr的区别,checked添加和删除

一.问题 $("#swIdInForm").removeAttr("checked"); $("#swIdInForm").attr("checked","true"); // 重新增加不起作用 在使用removeAttr()移除了radio的checked属性后,使用attr()重新增加不起作用: 二.解决 $("#swIdInForm").removeAttr("check

jQuery学习之prop和attr的区别

http://blog.sina.com.cn/s/blog_655388ed01017cnc.html .prop() 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是

【Jquery】prop与attr的区别

最近因项目需要用到复选框,其中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked") == true){ $(":input[name='ckb_img']").attr("checked",true); }else{ $(":input[name='ckb_img']").attr("checked&quo