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()更好一些。

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

Jquery操作Dom节点属性和单选框多选框表单元素

操作表单

发表回复

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

Jquery操作Dom节点属性和单选框多选框表单元素

操作表单

相关推荐

发表回复