jQuery的过滤器、css()方法、class操作、html() 与 text() 与 val()和操作节点

小媛同学.，

已于 2022-08-13 20:14:47 修改

阅读量370

点赞数

文章标签：前端 jquery javascript

于 2022-08-13 19:10:46 首次发布

本文链接：https://blog.csdn.net/m0_61843988/article/details/126307296

版权

一、可见性过滤器的使用

根据元素是否显示来选择

:hidden：匹配所有的不可见元素
:visible：匹配所有的可见元素

案例效果如下：

<body>
    <div></div>
    <div></div>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <script>
        $(function(){
            $('#btn1').click(function(){
                // $('div:visible')中的visible是用来获取到可见的元素
                $('div:visible').hide(1000)//hide隐藏
            })
            $('#btn2').click(function(){
                // $('div:hidden')中的hidden是用来获取到隐藏的元素
                $('div:hidden').show(1000)//show显示
            })
        })
    </script>
</body>

二、css()方法

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

1、返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

案例：将返回 p 标签的 background-color 值：

$("p").css("background-color");

2、设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

案例：将为所有匹配设置 p 标签的 background-color 值：

3、设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

// 第一种方法
css({"propertyname":"value","propertyname":"value",...});
// 第二种方法：使用链式写法实现
css("propertyname","value").css("propertyname","value");

案例：将为所有 p 标签设置 background-color 和 font-size：

// 第一种方式
$("p").css({"background-color":"yellow","font-size":"20px"});
// 第二种方式：使用链式写法实现
$("p").css("background-color","yellow").css("font-size","20px");

三、class操作

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

1、addClass() 方法

addClass() 方法向被选元素添加一个或多个类名。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性

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

最低0.47元/天解锁文章

小媛同学.，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的过滤器、css()方法、class操作、html() 与 text() 与 val()和操作节点

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。如需在被选元素的开头插入内容，请使用 prepend()css() 方法设置或返回被选元素的一个或多个样式属性。该方法返回第一个匹配元素的 value 属性的值。该方法设置所有匹配元素的 value 属性的值。- 返回被选元素的当前 HTML 内容。内容时，则返回第一个匹配元素的内容。内容时，则重写所有匹配元素的内容。内容时，则重写所有匹配元素的内容。.......
复制链接

扫一扫