jQueryDom屬性

前面總結完了jQuery的選擇器和過濾,在jQuery中比較重要是還是操控Dom屬性。

目錄

addClass(className)

attr(attributeName)

hasClass(className)

html()

prop(propertyName)

removeAttr(attributeName)

removeClass([className])

removeProp(propertyName)

toogleClass(className);

val()


addClass(className)

描述:爲選擇的每一個元素添加指定的樣式類名

例:爲div元素添加box類

<div></div>
<script>
    $(function(){
        $("div").addClass("box")
    })
</script>

attr(attributeName)

描述:獲取或設置匹配元素的第一個元素的屬性的值

注:當參數爲一個得時候表示獲取屬性的值,當參數個數爲2的時候表示設置屬性的值,當設置的屬性爲多個的時候可以採用對象的形式,這個設置是指設置的Dom元素的屬性值,和下面的prop()是不同的。

<input type="text"/>
<script>
    $(function(){
        $("input").attr("type")    //獲取type屬性的值  text
        $("input").attr("type","button")    //設置type屬性的值爲button
        $("input").attr({
            type : "button",
            name : "abc",        //設置多個屬性的值
        })
    })
</script>

hasClass(className)

描述:確定匹配的元素是否有分配給定的樣式類

返回值:true/false

這個方法是檢測Dom元素中有沒有指定的類,有的話返回true,沒有返回false

<div class="box"></div>
<script>
    $(function(){
        $("div").hasClass("box")    //true
    })
</script>

html()

描述:設置或獲取匹配到的元素的HTML內容

當參數沒空的時候表示獲取匹配Dom元素的HTML內容,當不爲空的時候表示設置匹配Dom元素的HTML內容

<div>123</div>
<script>
    $(function(){
        $("div").html();      //獲取HTML內容  123
        $("div").html("456")    //設置HTML內容
    })
</script>

prop(propertyName)

描述:獲取或設置匹配元素的屬性的值,這裏值的是JS對象的屬性的值,注意和上面的attr()區分

當參數爲1個的時候是獲取屬性的值,當參數個數爲2的時候設置屬性的值,當然也可以設置多個屬性的值

<input type="checkbox"/>
<script>
    $(function(){
        $("input").prop("ckecked") //false  沒有選中
        $("input").prop("checked","checked")    設置選中
    })
</script>

removeAttr(attributeName)

描述:爲匹配的集合中的每一個元素移除一個屬性

這個方法和attr()方法相對應,attr()是設置,這個是移除它的設置

<input type="text"/>
<script>
    $(function(){
        $("input").removeAttr("type")
    })
</script>

removeClass([className])

描述:爲匹配的元素集合中的元素移除一個、多個或者全部樣式類

當參數爲空的時候代表是移除全部樣式類,當參數爲1個的時候代表移除指定的樣式類,當需要移除多個的時候,用類中間用空格隔開的形式書寫,移除多個。

<div class="content box"></div>
<script>
    $(function(){
        $("div").removeClass("content")        //移除content類
        $("div").removeClass("content box")    //移除content box類
        $("div").removeClass();                //移除所有的類
    })
</script>

removeProp(propertyName)

描述:爲集合的每一個元素刪除一個屬性(property)

這個是和上面的prop()方法對應的,前者是設置,後者是刪除

<input type="checkbox" />
<script>
    $(function(){
        $("input").prop("checked","checked")
        $("input").removeProp("checked");
    })
</script>

toogleClass(className);

描述:在匹配的元素集合的元素上添加或者刪除一個或多個樣式類

取決於這個樣式類是否存在或值切換屬性。即:如果存在就刪除一個類,如果不存在就添加一個類

<div></div>
<script>
    $(function(){
        $("div").toggleClass("box")    //當div有box類的時候就刪除這個類,沒有的時候就添加上
    })
</script>

val()

描述:獲取或設置匹配集合中的元素的value值

主要適用於表單元素,當沒有參數的時候是獲取,有參數的時候是設置

<input type="text" value="123"/>
<script>
    $(function(){
        $("input").val();    //123
        $("input").val("abc")    //設置input的value爲abc
    })
</script>

主頁傳送門

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章