attr()和prop()：jQuery里的神奇函数大揭秘

$(document).ready(function(){
	$("button").click(function(){
		var $x = $("div");
		$x.prop("color","FF0000");
		$x.append("color 属性值为: " + $x.prop("color"));
		$x.removeProp("color");
		$x.append("
现在 color 属性值为: " + $x.prop("color"));
	});
});



添加和删除属性

哈喽有点空就唠叨几句 jQuery 的attr()和prop()函数。是不是感觉有点相似？其实这两个家伙可是大不同！尽管它们都差不多能使用同样参数做相同的事儿，但最终达成都不太一样别着急，我来细细给你说说怎么回事儿！

// 这里的name、age是Person的property
var Person = { name: "小明", age: 18};

咱们来聊聊那个神奇的prop()函数！它可以让我们轻松搞定网页中DOM元素的属性设定和获取~那个DOM元素，其实就是JavaScript里面那个Element类型咯。学会了使用这个函数，我们就能在JavaScript的世界里游刃有余地操作对象属性！

哈喽，接下来我们来说说attr()这个神奇的函数。它可以帮你设定或查看某一个DOM元素的属性。记住咯！attr()只处理文档节点的属性所以当你看到的属性时，其实它们都是字符串滴。那如果碰到一些其他类型怎么办？别急，咱们有办法把它们转变成字符串就能轻松搞定了，直接上toString()。

在jQuery 1.6之前，咱们也就是attr()这哥们儿用得飞起。这个attr()可厉害了，功能多着，除了设置和获取属性外，还可以搞点DOM元素的property啥的。比如怎么可能搞不定那些tagName、className、nodeName、nodeType这些东西？别怕，有attr()在，一切都变得简单起来！

其实，从 jQuery 1.6那儿开始，我们多了个新的小伙伴——prop()函数。这个神奇的家伙就是专门处理属性设定和获取的事儿的。也就是说，从那时起，attr()函数就只负责属性那边的事儿~

老铁们注意！用jQuery 1.6之前的版本，去读表单元素的这些属性（比如选中，勾选，启用啦）时，attr()函数会给你一个布尔值。设置成功就变成true，反之则是false。

自从1.6版本开始，用attr()方法找属性的话，就不会再找到真正的数值，反而得到的都是“checked”、“selected”或“disabled”这种字符串！只有在元素上确实存在对应属性的情况下，你才能看到正确的结果哟；不然它只会告诉你一个让人摸不着头脑的”undfined”！

按钮
  
  
  
    // $('button').on('click',function(){
    // });
    // var r = $('input');
    $('button').on('click',function(){
      console.log(11)
      if ($('input').prop('checked')) {
        $('input').prop('checked',false);
      }else{
        $('input').prop('checked',true);
      }
    })
  

伙计们，听说过 prop() 这个东西吗？想问如何使用的话，看过来！从jQuery 1.6版本开始，设置或查看”被选上”、”被点击”、”被禁止”这类属性可全都得依靠它了。这主要因为jQuery觉得，”被选上”、”被点击”、”被禁止”这样的属性值仅仅代表初始情况，真实状态还是要看清checked、selected、disabled这些property才行。好了，咱也不多说了。希望你看完这篇后对Prop()函数有更深的了解。遇到困惑或是有灵感都可以给我们留言，记得别忘了点赞！

$(document).ready(function(){
	$("button").click(function(){
		$("#p1").html("attr('checked'): " + $("input").attr('checked')
					 + "
prop('checked'): " + $("input").prop('checked'));
	});
});



注意:确认或取消选中该复选框,然后单击按钮刷新内容。
查看attr() 和 prop() 的值




Check me