在學(xué)習(xí)jQuery之處，我們首先要掌握的知識點(diǎn)就是jQuery屬性的使用方法，本文整理了一些jQuery常用的屬性及其相關(guān)使用，一起來看看吧。

 

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

①獲取屬性

<img src="" alt="jQuery" /><script type="text/javascript">

    $(function(){

        console.log($("img").attr("alt"));

    });</script>

結(jié)果：

②設(shè)置單個屬性

<img src="" alt="Demo" /><img src="" alt="jQuery" /><script type="text/javascript">

    $(function(){

        $("img").attr("alt","jQueryDemo");

    });</script>

結(jié)果：

③設(shè)置多個屬性

<img src="" alt="Demo" /><img src="" alt="jQuery" /><script type="text/javascript">

    $(function(){

        $("img").attr({alt:"jQueryDemo",title:"強(qiáng)大的jQuery"});

    });</script>

結(jié)果：

④利用回調(diào)函數(shù)，設(shè)置多個對象的屬性

注意：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>

結(jié)果：

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

<img src="img1.png" alt="Demo" /><img src="img2.png" alt="jQuery" /><script type="text/javascript">

    $(function(){

        $("img").removeAttr("alt");

    });</script>

結(jié)果 ：

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

<!--禁用和選中所有頁面上的復(fù)選框--><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>

結(jié)果：

 basketball  football

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

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

對于這個知識點(diǎn)，我還沒弄明白，先暫時用著網(wǎng)上的一個例子

<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>

結(jié)果：

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>

結(jié)果：

②利用回調(diào)函數(shù)，添加類名

注意：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>

結(jié)果：

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

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

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

<p class="demo1 demo2 demo3"></p><script type="text/javascript">

    $(function(){

        $("p").removeClass("demo1");

    });</script>

結(jié)果：

②刪除匹配元素的所有類

<p class="demo1 demo2 demo3"></p><script type="text/javascript">

    $(function(){

        $("p").removeClass();

    });</script>

結(jié)果：

③用回調(diào)函數(shù)刪除類

<p></p><script type="text/javascript">

    $(function(){

        $("p").removeClass(function(){

            return $(this).attr("class");

        });

    });</script>

結(jié)果：

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

<p>這里原本沒有.demo2</p><p class="demo1 demo2">這里原本就有.demo2</p><script type="text/javascript">

    $(function(){

        $("p").toggleClass("demo2");

    });</script>

結(jié)果：

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

①獲取元素的內(nèi)容

<p>Hello world!</p><script type="text/javascript">

    $(function(){

        console.log($("p").html());

    });</script>

結(jié)果：

②設(shè)置元素的內(nèi)容

<p></p><p></p><script type="text/javascript">

    $(function(){

        $("p").html("Hello world!");

    });</script>

結(jié)果：

③利用回調(diào)函數(shù)設(shè)置元素內(nèi)容

<p></p><p></p><p></p><script type="text/javascript">

    $(function(){

        $("p").html(function(index){

            return "這是第"+(index+1)+"個p標(biāo)簽";

        });

    });</script>

結(jié)果：

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

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

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

①獲取元素的值

<input type="text" value="write less,do more!"/><script type="text/javascript">

    $(function(){

        console.log($("input").val());

    });</script>

結(jié)果：

②設(shè)置元素的值

<input type="text"/><script type="text/javascript">

    $(function(){

        $("input").val("write less,do more!");

    });</script>

結(jié)果：

③利用回調(diào)函數(shù)設(shè)置元素值

<input type="radio"/><input type="radio"/><input type="radio"/><script type="text/javascript">

    $(function(){

        $("input").val(function(index){

            return "radio"+(index+1);

        });

    });</script>

結(jié)果：

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

 

 

文章來源：博客園