The Write Less , Do More !

 jQuery的屬性

1. attr(name|properties|key,value|fn) : 設置或返回被選元素的屬性值

　①獲取屬性

<img src="" alt="jQuery" />
<script type="text/javascript">
    $(function(){
        console.log($("img").attr("alt"));
    });
</script>

　　結果：

　②設置單個屬性

<img src="" alt="Demo" />
<img src="" alt="jQuery" />
<script type="text/javascript">
    $(function(){
        $("img").attr("alt","jQueryDemo");
    });
</script>

　　結果：

　③設置多個屬性

<img src="" alt="Demo" />
<img src="" alt="jQuery" />
<script type="text/javascript">
    $(function(){
        $("img").attr({alt:"jQueryDemo",title:"強大的jQuery"});
    });
</script>

　　結果：

　④利用回調函數，設置多個對象的屬性

　　註意：index的索引從0開始，所以我例子+1了

<ul>
    <li><img src="" alt="jQuery" /></li>
    <li><img src="" alt="jQuery" /></li>
    <li><img src="" alt="jQuery" /></li>
</ul>
<script type="text/javascript">
    $(function(){
        $("img").attr("src",function(index){
            this.src="img"+(index+1)+".png";   //寫法一
            //return "img"+(index+1)+".png";   //寫法二
        });
    });
</script>

　　結果：

2. removeAttr(name) : 從每一個匹配的元素中刪除一個屬性

<img src="img1.png" alt="Demo" />
<img src="img2.png" alt="jQuery" />
<script type="text/javascript">
    $(function(){
        $("img").removeAttr("alt");
    });
</script>

　　結果：

3. prop(name|properties|key,value|fn) : 獲取在匹配的元素集中的第一個元素的屬性值

<!--禁用和選中所有頁面上的覆選框-->
<input type="checkbox" name="jq"/>basketball
<input type="checkbox" name="jq"/>football
<script type="text/javascript">
    $(function(){
        $("input[type='checkbox']").prop("disabled", true);
        $("input[type='checkbox']").prop("checked", true);
    });
</script>

　　結果：

basketball football

4. removeProp(name) : 用來刪除由.prop()方法設置的屬性集

　　註意: 不要使用此方法來刪除原生的屬性，比如checked,disabled,或者selected。這將完全移除該屬性，一旦移除，不能再次被添加到元素上。使用.prop()來設置這些屬性設置為false代替。

　　對於這個知識點，我還沒弄明白，先暫時用著網上的一個例子

<p> </p>
<script type="text/javascript">
    $(function(){
        var $para = $("p");
        $para.prop("luggageCode", 1234);
        $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
        $para.removeProp("luggageCode");
        $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
    });
</script>

 　　結果：

　　The secret luggage code is: 1234. Now the secret luggage code is: undefined.

5. addClass(class|fn) : 為匹配到的元素添加指定的類名

　　註意：若果要添加一個或多個類名，請用空格分開

　　①添加一個或多個類名

<p id="p1"></p>
<p id="p2"></p>
<script type="text/javascript">
    $(function(){
        $("#p1").addClass("demo");
        $("#p2").addClass("demo1 demo2");
    });
</script>

 　　結果：

　　②利用回調函數，添加類名

　　註意：index的索引從0開始，所以我例子+1了

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script type="text/javascript">
    $(function(){
        $("li").addClass(function(index){
            return "list"+(index+1);
        });
    });
</script>

 　　結果：

6. removeClass([class|fn]) : 從匹配到的元素中刪除全部或者指定的類

　　註意：若果要刪除一個或多個類名，請用空格分開

　　①刪除匹配元素的指定的一個類

<p class="demo1 demo2 demo3"></p>
<script type="text/javascript">
    $(function(){
        $("p").removeClass("demo1");
    });
</script>

 　　結果：

　　②刪除匹配元素的所有類

<p class="demo1 demo2 demo3"></p>
<script type="text/javascript">
    $(function(){
        $("p").removeClass();
    });
</script>

 　　結果：

　　③用回調函數刪除類

<p class="demo1"></p>
<script type="text/javascript">
    $(function(){
        $("p").removeClass(function(){
            return $(this).attr("class");
        });
    });
</script>

　　結果：

7. toggleClass(class|fn[,sw]) : 如果存在就刪除一個類，如果不存在就添加一個類

<p class="demo1">這裡原本沒有.demo2</p>
<p class="demo1 demo2">這裡原本就有.demo2</p>
<script type="text/javascript">
    $(function(){
        $("p").toggleClass("demo2");
    });
</script>

　　結果：

8. html([val|fn]) : 取得匹配元素的html內容

　　①獲取元素的內容

<p>Hello world!</p>
<script type="text/javascript">
    $(function(){
        console.log($("p").html());
    });
</script>

　　結果：

　　②設置元素的內容

<p></p>
<p></p>
<script type="text/javascript">
    $(function(){
        $("p").html("Hello world!");
    });
</script>

　　結果：

　　③利用回調函數設置元素內容

<p></p>
<p></p>
<p></p>
<script type="text/javascript">
    $(function(){
        $("p").html(function(index){
            return "這是第"+(index+1)+"個p標簽";
        });
    });
</script>

 　　結果：

9. text([val|fn]) : 取得所有匹配元素的內容

　　text()與html()的用法類似

10. val([val|fn|arr]) : 獲得匹配元素的當前值

　　①獲取元素的值

<input type="text" value="write less,do more!"/>
<script type="text/javascript">
    $(function(){
        console.log($("input").val());
    });
</script>

　　結果：

　　②設置元素的值

<input type="text"/>
<script type="text/javascript">
    $(function(){
        $("input").val("write less,do more!");
    });
</script>

　　結果：

　　③利用回調函數設置元素值

<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<script type="text/javascript">
    $(function(){
        $("input").val(function(index){
            return "radio"+(index+1);
        });
    });
</script>

 　　結果：

　　在jQuery屬性這部分的知識點中，我遇到了不少的困惑，百試不厭，卻百試不靈，比如說removeProp()的用法、html()和text()的區別，如果還看到有其他錯誤的，歡迎各位大神留言指點。

　　最後，全世界晚安！