addclass() removeClass() hasClass() toggleClass() html()、text() 与 val()

最新推荐文章于 2023-07-23 08:00:30 发布

遇事不决选C

最新推荐文章于 2023-07-23 08:00:30 发布

阅读量208

点赞数

文章标签： html javascript 前端 jquery

本文链接：https://blog.csdn.net/m0_74022688/article/details/128825041

版权

jQuery 操作 CSS

jQuery 中的 css() 方法

css()方法设置或返回被选元素的一个或多个样式属性

返回 CSS 属性

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p style="clear: both;"></p>
    <button id="btn">返回第一个div元素的 background-color</button>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    $(function(){
        $("#btn").click(function(){
            alert("背景颜色是:"+$("div").css("background-color"));
        });
    });
     
  
</script>

设置 CSS 属性

如需设置指定的 CSS属性，可以添加第二个参数，请使用如下语法

$(selector).css("propertyname"，"value");

下面的例子将为所有匹配元素设置 background-color 值:

$("div").css("background-color"，"#001871")

设置多个 CSS 属性

$(selector).css({"propertyname": "value","propertyname": "value",...});

下面的例子将为所有匹配元素设置 background-color和color :

$("div").css({"background-color":"#001871"，"color":"#fff"});

如需设置多个CSS 属性，第二种方式就是 css0的连写，代码如下:

$("div").css("background-color"，"#001871").css("color"，"#fff");

jQuery 操作 class

除了通过设置 css()方法，也可以修改 class 名来修改样式效果。

`addclass()`

addclass()方法向被选元素添加一个或多个类名
该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 lass 属性

提示:如需添加多个类，请使用空格分隔类名。

$(selector).addCass(classname);

下面的例子将为所有匹配元素添加一个类

$("Ti') .addclass ("bigger") ;

removeClass()

removeclass()方法向被选元素移除一个类名。

$("1i") ,removeClass("bigger") ;

hasClass()

hasclass()方法判断被选元素是否包含这个类名。

alert($("li").hasClass("bigger"));

toggleClass()

toggleclass()方法判断被选元素是否有该类名，如果有就移除它，如果没有就添加它

$("1i") .toggleclass("basic");

html()、text() 与 val()

html()

html()可以对HTML代码进行操作，类似于js中的innerHTML。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。

提示:如只需设置或返回被选元素的文本内容，请使用text()方法

返回内容:

$(selector).htm1();

设置内容，会自动解析 html 标签:

$(selector).html(content);

使用函数设置内容:

$(selector).html(function(index, currentcontent));

text()

text()可以获取或设置元素的文本内容
当该方法用于返回内容时，则返所有匹配元素的文本内容(会删除 HTML标记)
当该方法用于设置内容时，则重写所有匹配元素的内容。

提示:如需设置或返回被选元素的 innerHTML (文本+HTML标记)，请使用html()方法

返回内容:

$(selector).text();

设置内容，不会自动解析 html 标签，而是直接显示出来:

$(selector).text(content);

使用函数设置文本内容:

$(selector).text(function(index,currentcontent));

html()和 text()的区别

语法	参数	功能
html()	无参数	用于获取第一个匹配元素的 HTML 内容或文本内容
html(content)	content 参数为元素的 HTML 内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容。
text (content)	content 参数为元素的文本内容	用于设置所有匹配元素的文本内容。

val()

val()可以获取或设置元素的 value 属性值
当用于返回值时:该方法返回第一个匹配元素的 value 属性的值
当用于设置值时:该方法设置所有匹配元素的 value 属性的值

遇事不决选C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
addclass() removeClass() hasClass() toggleClass() html()、text() 与 val()

提示:如需设置或返回被选元素的 innerHTML (文本+HTML标记)，请使用html()方法。当该方法用于返回内容时，则返所有匹配元素的文本内容(会删除 HTML标记)提示:如只需设置或返回被选元素的文本内容，请使用text()方法。当用于设置值时:该方法设置所有匹配元素的 value 属性的值。css()方法设置或返回被选元素的一个或多个样式属性。当该方法用于返回内容时，则返回第一个匹配元素的内容。当该方法用于设置内容时，则重写所有匹配元素的内容。当该方法用于设置内容时，则重写所有匹配元素的内容。
复制链接

扫一扫