jquery清空下拉框的值 jquery清空div内部的内容设置


jquery清空下拉框的值 jquery清空div内部的内容设置

文章插图
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'); // undefinedprop()方法和attr()类似,但是HTML5规定有一种属性在DOM节点中可以没有值,只有出现与不出现两种,例如:
<input id="test-radio" type="radio" name="test" checked value="https://www.520longzhigu.com/diannao/1">等价于:
<input id="test-radio" type="radio" name="test" checked="checked" value="https://www.520longzhigu.com/diannao/1">attr()和prop()对于属性checked处理有所不同:
var radio = $('#test-radio');radio.attr('checked'); // 'checked'radio.prop('checked'); // trueprop()返回值更合理一些 。不过,用is()方法判断更好:
var radio = $('#test-radio');radio.is(':checked'); // true类似的属性还有selected,处理时最好用is(‘:selected’) 。
操作表单对于表单元素,jQuery对象统一提供val()方法获取和设置对应的value属性:
<body><!-- html --><input id="test-input" name="email" value="https://www.520longzhigu.com/diannao/test"><select id="test-select" name="city"><option value="https://www.520longzhigu.com/diannao/BJ" selected>Beijing</option><option value="https://www.520longzhigu.com/diannao/SH">Shanghai</option><option value="https://www.520longzhigu.com/diannao/SZ">Shenzhen</option></select><textarea id="test-textarea">Hello</textarea><div><label> r1 <input type="radio" name="r1" value="https://www.520longzhigu.com/diannao/r1" class="ra"></label><label> r2 <input type="radio" name="r1" value="https://www.520longzhigu.com/diannao/r2" class="ra"></label></div><div><button id="btn">修改radio选中状态</button></div><script>varinput = $('#test-input'),select = $('#test-select'),textarea = $('#test-textarea');radio = $("input[name=r1]")console.log(input.val()); // 'test'input.val('abc@example.com'); // 文本框的内容已变为abc@example.comconsole.log(select.val()); // 'BJ'select.val('SH'); // 选择框已变为Shanghaiconsole.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()更好一些 。


    以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

    「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: