jQueryDom属性

最新推荐文章于 2022-08-30 17:59:09 发布

c-Tomorrow

最新推荐文章于 2022-08-30 17:59:09 发布

阅读量367

点赞数

分类专栏： JQuery jQuery学习总结文章标签： jQuery Dom属性

本文链接：https://blog.csdn.net/c__dreamer/article/details/81260152

版权

JQuery 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

jQuery学习总结

16 篇文章 2 订阅

订阅专栏

前面总结完了jQuery的选择器和过滤，在jQuery中比较重要是还是操控Dom属性。

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>

主页传送门