属性操作

7.jq属性操作:
传参是设置 ,不传参是获取
html() 和innerHTML一样 获取起始标签结束标签的内容
text() 和innerText一样 获取起始标签结束标签的文本
val() 设置和获取表单项的value属性值
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
//同时操作不同的的选择框
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);


attr() 设置和获取属性的值 但是:
不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj 目前测试这2个代码能成功显示 在console旁边的elements那里能看到
// $(":checkbox:first").attr("abc","abcValue");
// alert( $(":checkbox:first").attr("abc") );


prop() 设置和获取属性的值 :可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
//测试代码部分
alert($(":checkbox:first").attr("value")); //获取其他的如type name都是可以的
$(":checkbox:first").attr("name","abc") ; // 设置
input 没有 checked="checked" 此时显示出来的是undefined,但是官方认为这个是错误的 所以引入了prop()
此时返回的是false
* alert($(":checkbox").attr("checked"));
* alert($(":checkbox").prop("checked")); alert($(":checkbox").prop("checked",false)); //设置为都不选中
* <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
通过removeAttr(attr)删除属性

与prop一样attr也可以用来获取与设置元素的属性。
区别在于,对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取,prop不能获取
2. 对于选中属性
attr 只能获取初始值, 无论是否变化
prop 能够访问变化后的值,并且以true|false的布尔型返回。
所以在访问表单对象属性的时候,应该采用prop而非attr

posted @ 2020-04-09 14:37  why666  阅读(159)  评论(0)    收藏  举报