浅谈jquery中prop()和attr()

我们都知道，一般在jquery中设置属性时要用到attr()方法，现在我们有一个效果，点击按钮切换复选框的选中状态，下面贴出html代码：

 <input type="checkbox" id="check"><label>复选框</label><input type="button" value="切换" id="btn">

js代码：

<script>$(function(){var flag=false;$("#btn").click(function(){if(flag==false){$("#check").attr("checked",true);flag=true;}else{$("#check").removeAttr("checked");flag=false;}});});
</script>

我们发现当点击按钮时，第一次点击时复选框会选中，第二次时点击复选框会取消选中，但以后再点击时复选框将不会有任何效果。更奇怪的是，打开调试工具，点击按钮时html代码中会有相应的checked="checked"代码段，但页面却没效果。

当我们用prop(）方法替换attr(）方法时，一切将变得正常：

　　<script>$(function(){var flag=false;$("#btn").click(function(){if(flag==false){$("#check").prop("checked",true);flag=true;}else{$("#check").removeAttr("checked");flag=false;}})；})；</script>

这是为什么呢，jquery1.6中新加了一个方法prop()，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。

大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();

3.其他则使用attr();

以下是官方建议attr(),prop()的使用：

原文地址：http://www.jb51.net/article/41170.htm

转载于:https://www.cnblogs.com/smartXiang/p/5686800.html

浅谈jquery中prop()和attr()相关推荐

php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别
举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别 demo Dom结构: <di ...
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
java中jquery怎么学,浅谈jQuery中的事件--Java学习网
核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下今晚看书的时候发 ...
jquery中prop()和attr()的使用
jquery1.6+出现的prop()方法. • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. • ...
浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...
jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别.原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大 ...
浅谈jQuery属性获取
浅谈jQuery的属性获取基本标签设置与基本css,附图下所示上述代码如下图: 一.js的一些属性获取 1.var div = document.getElementById("firs ...

浅谈jquery中prop()和attr()

浅谈jquery中prop()和attr()相关推荐

最新文章

热门文章