使用jQuery的一些注意事项总结(持续更新......)

1、重置表单:
JQuery中没有reset方法,所以通过$('#areaForm').reset(); 的方式重置id为areaForm的表单是错误的。
通过$('#areaForm').reset()的方式重置表单,控制台报错信息
解决方案:
a、$('#areaForm')[0].reset();
因为$('#areaForm') 为一个jQuery对象,而jq对象上没有reset方法,所以会报错。$('#areaForm')[0] 为DOM元素,后面调用的是原生JS中的reset方法。
b、同理,可以先用document.getElementById的方法先获取DOM对象,再调用reset方法。

2、获取input的checked属性值
a、首先想到的.attr(‘checked’)方法。
当没有给标签指定checked属性时

<input type="checkbox" value="1"/>选项1
<input type="checkbox" value="2"/>选项2
<input type="checkbox" value="3"/>选项3

使用.attr('checked') 获取选中的checkbox时,3个框都不选
这里写图片描述
选中其中任意一个
这里写图片描述

原因:HTML的属性分为attribute和property。
checked属性即分为attribute->checked,和property->true,false。
对于一个checkbox,若未定义checked=”checked”,alert($.attr(“checked”)) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。
给其中一个input指定checked属性:

<input type="checkbox" value="1" checked/>选项1
<input type="checkbox" value="2"/>选项2
<input type="checkbox" value="3"/>选项3

这里写图片描述

b、使用.prop(‘checked’)
三个input都不指定checked属性,手动勾选后两个checkbox
这里写图片描述

给第一input设置checked属性
这里写图片描述

prop和attr的区别:
1、prop读取属性值:读取已赋值的固有属性会得到属性值,读取未赋值的固有属性会得到属性默认值,读取自定义属性时无论是否赋值均得到undefine。
2、prop设置属性值:prop只能设置固有属性值。
3、attr读取属性值:无论是固有属性还是自定义属性,attr只能读取元素中已有的属性值,读取元素中没有的属性值会返回undefine。
4、attr设置属性值:attr可以对任意属性设置属性值。

property是来自于原型链,所有HTML元素,都是HTMLElemenet的实例,HTMLElement再往上走,就是 Element,再往上走就是Node,每一级原型都有属性。就算你没有在标签内显式定义这些属性,它们都存在。 比如title, id, class, lang, dir等等,你没有定义它们,它们就默认是一个空字符串。不同的标签都有自己独特 的固有属性,比如A标签的href,表单元素的tabindex标签。

attributes是通过setAttribute设置,或者你<div aaa=bbb></div>这样添加的非固有属性外的属性,它们没有显式定义是为undefined, 显式定义了,它的值肯定是一个字符串(固有属性没有这限制,比如tabindex的值为数字,option的selected为布尔, form的elements为一个类数组,五花八门的)

property在标签中是存在映射,比如class,它会转换为className, for转换为forHtml, tab index转换为tabIndex, bgcolor转换bgColor….
而attribute则不存在映射,但只要你定义在的开标签内,它们就会全部小写化, 并将同名的属性进行合并,只留下第一个。

这里写图片描述

c、使用 .is(‘:checked’);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值