扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
prop()获取匹配的元素的属性值。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、虚拟主机、营销软件、网站建设、蔡甸网站维护、网站推广。
这个方法是jquery1.6以后出来的,用来区别之前的.attr()方法.
区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
prop函数用于设置或返回当前jQuery对象所匹配的元素的属性值
div ccc='aaa'/div
$("div").prop("ccc")//输出aaa
类似attr方法
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
你好!
jquery的prop()函数,跟attr()函数类似,具体用法prop("属性名","属性值")
它们的区别是prop()一般用于元素自带属性,比如checkbox的checked属性
input type="checkbox" id="aa" value="0" /
$("#aa").prop("checked",true) 选中,设置为false则为取消选中
而attr()更多用在自定义属性上面
div id="cc" sourceType="java" /div
$("#cc").attr("sourceType", "javascript");
希望对你有帮助!
两者从中文意思理解,都是获取/设置属性的方法。
attr 方法一般用于操作自定义属性,通过访问、操作 DOM 元素的属性节点来工作,类似 JS 中的 setAttribute("属性","值")和取得属性值getAttribute("属性"),事实上 jQuery 的源码中也是利用这两个原生方法。
那么为什么还要有 prop 方法呢?不是多此一举吗?其实不然,prop 方法是 jQuery v1.6.1 才新出来的,性能要更好一些,解决了 window 或 document 无法使用 attr 方法的问题,同时在获取元素状态时返回布尔值,大大方便了对状态的判断。prop 一般用于操作 HTML 元素固有属性。
举一些例子来辅助说明吧,假设有如下 HTML 元素:
input type="text" id="ipt1" name="demo"
input type="radio" id="radio" disabled
input type="checkbox" id="ckbox" checked
input type="text" id="ipt3"
input type="text" id="ipt4"
span id="span" data-tip="abc"/span
验证结果如下:
console.group('获取固有属性');
console.log($('#ipt1').attr('name')); // 'demo'
console.log($('#ipt1').prop('name')); // 'demo'
console.groupEnd();
console.group('获取固有属性-状态值');
console.log($('#radio').attr('disabled')); // 'disbaled'
console.log($('#radio').prop('disabled')); // true
console.log($('#ckbox').attr('checked')); // 'checked'
console.log($('#ckbox').prop('checked')); // true
console.groupEnd();
$('#ipt3').attr('readonly', true); // 文本框处于只读状态
$('#ipt4').prop('readonly', true); // 同上
console.group('获取自定义属性');
console.log($('#span').attr('data-tip')); // 'abc'
console.log($('#span').prop('data-tip')); // undefined
console.groupEnd();
console.group('获取不存在的自定义属性');
console.log($('#span').attr('data-none')); // undefined
console.log($('#span').prop('data-none')); // undefined
console.groupEnd();
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流