100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jquery判断复选框选中状态以及区分attr和prop【jquery】

jquery判断复选框选中状态以及区分attr和prop【jquery】

时间:2023-07-17 19:17:04

相关推荐

jquery判断复选框选中状态以及区分attr和prop【jquery】

web前端|js教程

jquery,复选框,attr,prop

web前端-js教程

最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr获取不到复选框改变后的状态,最后查资料发现jQuery 1.6以后新增加了prop方法,借用官方的一段描述就是:

项目抽签系统源码,ubuntu 控制树莓派,tomcat怎么设置数据源,中药爬虫有哪些,wamp怎么升级php7,seo论坛广告lzw

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

上面翻译过来大概就是:prop处理来自节点对象自带的属性,它包含了很多原生的property;而attr来自对象的attributes,可能是我们在元素节点上添加属性节点才会有的。当然,前面的翻译仅代表本人观点,如有错误,可以提出来~~

易语言外挂作坊源码,ubuntu 自动关闭窗口,tomcat线程达到最大值,采集软件爬虫,php编程自学教程免费交流,seo技术篇lzw

简单的来说就是:

自助发码平台源码,ubuntu终端运行软件,qq音乐爬虫手机,kingshard php,宝安seo策略lzw

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

上面的描述也许有点模糊,引用一些大神的博客内容加上我的测试,举几个例子就知道了。

第一个例子:元素的固有属性以及自定义属性说明

” target=”_self” class=”btn”>百度

这个例子里元素的DOM属性有“href、target和class”,这些属性就是元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

删除

这个例子里元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

第二个例子:prop与attr在表单应用上的区别

先来看一段用attr方法代码:

attr() vs prop()

用attr判断是否选中

我是第一个复选框A

我是第二个复选框B

$(function(){ $("#button01").click(function(){var $state01=$("#input01").attr("checked");alert($state01); }) $("#button02").click(function(){var $state02=$("#input02").attr("checked");alert($state02); }) })

上面这段程序的测试结果是:

从动态图可以看出来,用attr获取不到用户选中的状态,它只返回表单的初始值。

再来看一段用prop方法代码:

attr() vs prop()

用prop判断是否选中

我是第一个复选框A

我是第二个复选框B

$(function(){ $("#button01").click(function(){var $state01=$("#input01").prop("checked");alert($state01); }) $("#button02").click(function(){var $state02=$("#input02").prop("checked");alert($state02); }) })

上面这段程序的测试结果是:

从动态图可以看出来,用prop可以实时获取用户的选中与取消操作状态。

因此我总结的差别就是:property记录的值会按照用户操作实时更新,而attribute记录的都是初始值,仅代表本人观点。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。