Jquery中.attr()和.prop()方法

Jquery中使用attr()方法动态设置多选框被选中状态时不生效或需要操作多次方可生效的问题可通过prop()替代完成,当需要设置html原生属性时最好使用prop()方法来进行操作

所属分类 WEB

相关标签 JQuery方法原生

问题说明

在前端界面中涉及到多个勾选框级联的时候,一开始采用Jquery常见的.attr()方法。

实际开发自测过程中发现有时候无法生效,或需要多次触发才会生效。

而在Jquery1.8官方文档中的举同样例子的时候使用的是.prop()方法。

方法介绍

prop()方法:设置或返回被选元素的属性和值。

  • 当该方法用于返回属性值,则返回第一个匹配元素的值
  • 当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对
  • 方法操作radio(checkbox)之类的控件,让其选中的时候,其控件选中的值也会随之改变,即既可以控制其选中,也能控制其取消选中

attr()方法:设置或返回被选元素的属性和值。

  • 当该方法用于返回属性值时,则返回第一个匹配元素的值
  • 当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对
  • 方法操作adio(checkbox)之类的控件,让其选中的时候,其控件选中的值不会随之改变,即只能控制其选中,不能控制其取消选中

从官方文档的描述来看,attr()应当也能够正常触发选择框的选中,实际应用发现有可能无效。

  1. 添加属性名称该属性就会生效应该使用prop()
  2. 特别是true,false两个属性使用prop()(如checked、selected、disabled等)
  3. 其他则使用attr()如自定义的一些属性(如data-val等)

替换案例

//勾选
//旧写法
$("#ID").attr("checked","checked");
//新写法
$("#ID").prop("checked","true");

//去勾选
//旧写法
$("#ID").attr("checked",false);
//新写法
$("#ID").removeAttr("checked");

//获取checkbox的选中状态
//旧写法
//返回结果始终是undefined 
$(".check").attr("checked")
//新写法
//这两个语法的任意一个均获取到是否选中的结果true/false 
$(".check").prop("checked")
$(".check").is(":checked")

米虫

做一个有理想的米虫,伪全栈程序猿,乐观主义者,坚信一切都是最好的安排!

本站由个人原创、收集或整理,如涉及侵权请联系删除

本站内容支持转发,希望贵方携带转载信息和原文链接

本站具有时效性,不提供有效、可用和准确等相关保证

本站不提供免费技术支持,暂不推荐您使用案例商业化

发表观点

提示

昵称

邮箱

QQ

网址

当前还没有观点发布,欢迎您留下足迹!

同类其他

WEB

CSS文字超出隐藏添加省略号及失效处理

在前端页面中文字超出隐藏并添加省略号是比较常见的样式处理,实际CSS样式中单行省略和多行省略的样式有所差异,在某些特殊场景下多行超出的样式会不生效,本文给出相关解决方案

clipboard.js实现一键复制

clipboard.js相比早期基于flash制作的一键复制插件具有更好的兼容性,关键对于手机浏览器支持良好,无需其他依赖,使用简单,并且提供了钩子函数用于自定义的实现

前端JS对字段编码预防XSS攻击

跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码

Vue3中无需引入Vuex的替代方案

Vue3 中所提供组合 API、ref、reactive、provide、inject几大特性,可以支持完成全局状态管理能力,Vuex 是为 Vue 单独提供的状态管理插件,相对比较笨重,如果项目简单可以尝试替代

Jquery+CSS3实现网页入场动画特效

多数网站首页的数据往往是最庞大的,三到五秒打开都算比较优秀,因此设置一个开场(预加载)动画特效能够大幅度提升用户感官体验,这里分享本站使用的加载动画,整体比较简约清新

Jquery1.7+绑定事件on()方法使用案例

Jquery绑定事件后很多中方式bind()、live()、delegate()、on(),实际应用中比较推荐采用on()的方式去处理,具有较高的自定义组合能力,本文对on()详解

选择个人头像

昵称

邮箱

QQ

网址

评论提示

  • 头像:系统为您提供了12个头像自由选择,初次打开随机为你选择一个
  • 邮箱:可选提交邮箱,该信息不会外泄,或将上线管理员回复邮件通知
  • 网址:可选提交网址,评论区该地址将以外链的形式展示在您的昵称上
  • 记忆:浏览器将记忆您已选择或填写过得信息,下次评论无需重复输入
  • 审核:提供一个和谐友善的评论环境,本站所有评论需要经过人工审核