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

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/268560.html