jQuery之屬性

1. 操作任意屬性

attr() 操作非布爾值的

removeAttr()

prop() 操作布爾值的

2. 操作class屬性

addClass() 添加class屬性

removeClass() 移除class屬性

3. 操作HTML代碼/文本/值

html()

val()

<div id="div1" class="box" title="one">class為box的div1</div>
<div id="div2" class="box" title="two">class為box的div2</div>
<div id="div3">div3</div>
<span class="box">class為box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>

<input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>選中</button>
<button>不選中</button>      

需求和實作如下：

1. 讀取第一個div的title屬性

2. 給所有的div設定name屬性(value為atguigu)

3. 移除所有div的title屬性

4. 給所有的div設定class='guiguClass'

5. 給所有的div添加class='abc'

6. 移除所有div的guiguClass的class

7. 得到最後一個li的标簽體文本

8. 設定第一個li的标簽體為"<h1>mmmmmmmmm</h1>"

9. 得到輸入框中的value值

10. 将輸入框的值設定為atguigu

11. 點選'全選'按鈕實作全選

12. 點選'全不選'按鈕實作全不選

//1. 讀取第一個div的title屬性值
    console.log($("div:first").attr("title"))
    
    // 2. 給所有的div設定name屬性(value為atguigu)
    console.log($("div:first").attr("name",'rainbow'))
    
    // 3. 移除所有div的title屬性
    $("div").removeAttr("title")
    // 4. 給所有的div設定class='guiguClass'
    $("div").attr("class","guiguClass");
    // 5. 給所有的div添加class='abc'
    $("div").addClass("abc");
    // 6. 移除所有div的guiguClass的class
    $("div").removeClass("guiguClass")
    
    // 7. 得到最後一個li的标簽體文本
    console.log($("li:last").html())
    // 8. 設定第一個li的标簽體為"<h1>mmmmmmmmm</h1>"
    $("li:first").html("<h1>mmmmmmmmm</h1>")
    console.log($("li:first").html())
    // 9. 得到輸入框中的value值
    console.log($(":text").val())
    // 10. 将輸入框的值設定為atguigu
    $(":text").val("atguigu")
    // 11. 點選'全選'按鈕實作全選
    // attr(): 操作屬性值為非布爾值的屬性
    // prop(): 專門操作屬性值為布爾值的屬性
    var $checkboxs = $(":checkbox");
    $(":button:first").click(function(){
        $checkboxs.prop("checked",true);
    });
    
    // 12. 點選'全不選'按鈕實作全不選
    $(":button:last").click(function(){
        $checkboxs.prop("checked",false);
    })