Jquery操作Dom节点属性和单选框多选框表单元素
attr()和removeAttr()方法用于操作DOM节点的属性：
// <div id=\"test-div\" name=\"Test\" start=\"1\">...</div>
var div = $(\'#test-div\');
div.attr(\'data\'); // undefined, 属性不存在
div.attr(\'name\'); // \'Test\'
div.attr(\'name\', \'Hello\'); // div的name属性变为\'Hello\'
div.removeAttr(\'name\'); // 删除name属性
div.attr(\'name\'); // undefined
prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种，例如：
<input id=\"test-radio\" type=\"radio\" name=\"test\" checked value=\"1\">
等价于：
<input id=\"test-radio\" type=\"radio\" name=\"test\" checked=\"checked\" value=\"1\">
attr()和prop()对于属性checked处理有所不同：
var radio = $(\'#test-radio\');
radio.attr(\'checked\'); // \'checked\'
radio.prop(\'checked\'); // true
prop()返回值更合理一些。不过，用is()方法判断更好：
var radio = $(\'#test-radio\');
radio.is(\':checked\'); // true
类似的属性还有selected，处理时最好用is(‘:selected’)。
操作表单
对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性：
<body>
<!-- html -->
<input id=\"test-input\" name=\"email\" value=\"test\">
<select id=\"test-select\" name=\"city\">
<option value=\"BJ\" selected>Beijing</option>
<option value=\"SH\">Shanghai</option>
<option value=\"SZ\">Shenzhen</option>
</select>
<textarea id=\"test-textarea\">Hello</textarea>
<div>
<label> r1 <input type=\"radio\" name=\"r1\" value=\"r1\" class=\"ra\"></label>
<label> r2 <input type=\"radio\" name=\"r1\" value=\"r2\" class=\"ra\"></label>
</div>
<div>
<button id=\"btn\">修改radio选中状态</button>
</div>
<script>
var
input = $(\'#test-input\'),
select = $(\'#test-select\'),
textarea = $(\'#test-textarea\');
radio = $(\"input[name=r1]\")
console.log(input.val()); // \'test\'
input.val(\'abc@example.com\'); // 文本框的内容已变为abc@example.com
console.log(select.val()); // \'BJ\'
select.val(\'SH\'); // 选择框已变为Shanghai
console.log(textarea.val()); // \'Hello\'
textarea.val(\'Hi\'); // 文本区域已更新为\'Hi\'
//注意jq对象与dom对象的转换
console.log(radio) //jq对象
console.log(radio[1]) //dom对象
console.log(radio.get(0)==radio[0]) //true
//初始状态：让第一个radio选中
radio.each((index,item)=>{
console.log(item) //dom对象
if($(item).val()==\"r1\"){ //使用val(),需要先转换为jq对象
$(item).prop(\"checked\",true)
}
})
//点击btn修改radio选中状态
$(\"#btn\").click(function(){
// radioChecked = radio.find(\":checked\")//空，find是查找子元素
radioChecked = radio.filter(\":checked\")//获得选中的radio,filter是过滤当前的元素
radioUnChecked = radio.filter(\":not(:checked)\") //选择未选中的radio,:not为反向选择器
// console.log(radioUnchecked)
if(radioChecked){
// radioChecked.prop(\"checked\",false)
radioUnChecked.prop(\"checked\",true)
}
})
</script>
</body>
可见，一个val()就统一了各种输入框的取值和赋值的问题。但是radio有所不同，需要单独使用prop()单独设置。当然也可以使用attr()方法，使用prop()更好一些。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/18028.html
