JQuery的属性与样式

最新推荐文章于 2024-07-30 20:19:19 发布

Ruan丶权酒歌

最新推荐文章于 2024-07-30 20:19:19 发布

阅读量136

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44560824/article/details/90636960

本文围绕JQuery的属性与样式展开，介绍了.attr()与.removeAttr()方法用于获取、设置和删除元素属性，还讲解了.html()与.text()方法来读取和修改元素的HTML结构或文本内容，同时说明了各方法的用法、优点、注意事项及兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery的属性与样式

开发工具与关键技术：MVC
作者：胡名权
撰写时间：2019年5月26日

JQuery的属性与样式之.attr()与.removeAttr()
（一）每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。
Js操作特性的DOM方法主要有3个：
（1） getAttribute方法
（2） setAttribute方法
（3） removeAttribute方法
（二）在JWuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题JQuery中用attr()方法来获取和设置元素属性。
attr是attribute（属性）的缩写，在JQuery DOM操作中会经常用到attr（）。
attr()有4个表达式
1、 attr（传入属性名）：获取属性的值：getgetAttribute方法
2、 attr（属性名，属性值）：设置属性的值：setsetAttribute方法
3、 attr（属性名，函数值）：设置属性的函数值：set
4、 attr（attributes）：给指定元素设置多个属性值，即：（属性名一：“属性值一”，…….）
removeAttr()删除方法
.removeAttr（attrbitueName）：为匹配的元素集合中的每个元素中移除一个属性（attribute）
优点：
Attr、removeAttr都是JQuery为了属性操作封装的，直接在一个JQuery对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题
注意的问题：
（1） dom中有个概念的区分：Attribute和Property 翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是DOM节点自带的属性
例如：html中常用的id、class、title、align等：
（2）而Property是这个DOM元素作为对象，其附加的内容，
例如：tagName，nodeName，nodeType，defaultChecked，和defalutSelected
使用.prop()方法进行取值或赋值等
获取Attribute就需要用attr，获取Propertu就需要用peop
attr(传入属性名)：获取属性的值:get
var divName = $("#sdemo").attr(“name”);//获取name属性的值

    $("#demo").attr("class", "div-style");//设置class属性，值div-style
    $("#demo").removeAttr("name");//移除name属性

JQuery的属性与样式之html（）及.txet()
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作。JQuery针对这样的处理提供了2个便捷的方法.html()与.text()
（1）.html()方法
获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法：
1、.html()不传入值，就是获取get集合中第一个匹配元素的HTML内容
2、.html（htmlString）设置set每一个匹配元素的html内容
3、html（function（index，oldhtml））用来返回设置在HTML内容的一个函数
注意事项：
.html（）方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
（2）.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。具体用法：
.text（）得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text（textString）用于设置匹配元素内容的文本
.text（function（index，text））用来返回设置文本内容的一个函数
注意事项：
.text（）结果返回一个字符串，包含所有匹配元素的合并文本
（3）.text与.text的异同：
.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是在HTML文档中，.text在XML和HTML文档中多能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
火狐不支持innerText属性，用了类似的textConntent属性。.text（）方法综合了2个属性的支持，所以可以兼容所有浏览器
在这里插入图片描述

<script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
        $('p:first').html($(".first-div").html());
        console.log($(".first-div").html());
//显示出text方法获取到的内容
        //.text()是文本内容的合集
        $('p:last').text($(".first-div").text());
        console.log($(".first-div").text());
</script>