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>

主页传送门