前面總結完了jQuery的選擇器和過濾,在jQuery中比較重要是還是操控Dom屬性。
目錄
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>