jQ过滤器 css方法 class方法_jquery 过滤包含某个class的元素

作者：小小林熬夜学编程 | 2024-05-15 17:02:56

踩

jquery 过滤包含某个class的元素

在JQuery中可以使用过滤器对选取的数据进行过滤，选择更加明确的元素，JQuery过滤器的通常语法：$("选择器:过滤器")

基本过滤器：

：first(可以找到匹配的第一个元素)


<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
    <table>
        <tr>第一行</tr>
        <tr>第二行</tr>
        <tr>第三行</tr>
    </table>
<script>
    $(document).ready(function(){
            $("tr:first").css("font-style","italic");
        });
</script>
</body>
</html>

:last(可以匹配找到最后一个元素) 例如：$("tr:last");
:not(<选择器>):（可以去除所有与给定的选择器匹配的元素）例如：$("input:not(:checked)");
:even(可以匹配所有索引值为偶数的元素。注意：索引值是从0开始计数的) 例如： $("tr:even")选择表格的奇数行：索引值为偶数；
:odd（可以匹配所有索引值为奇数的元素）；
:eq(index)(可以匹配索引值为index的元素)；
:gt(index)(可以匹配索引值大于index的元素)；
:it(index)(可以匹配索引值小于index的元素)；
:header(可以选择所有H1、H2、H3等一类的header标签)；
:animated(可以匹配所有正在执行动画效果的元素)；

内容过滤器：

：contains()(可以匹配到包含指定文本的元素)；
:empty()(可以匹配不包含子元素或文本为空的元素) 例如：$("td:empty") 可以选择内容为空的表格单元格；
:has()(可以匹配包含指定子元素的元素) 例如： $("div:has(p)")可以选择包含p元素的div元素；
:parent()(可以匹配至少包含一个子元素或文本的元素) 例如： $("div:parent(p)")可以选择包含p元素的div元素；
可见性过滤器：
:hidden(可以匹配到所有不可见元素) 例如：$("input:hidden") 匹配所有不可见的input元素；
:visible(可以匹配所有的可见元素)

属性过滤器：

[属性名]（可以根据元素的属性或属性值对元素进行过滤）
[属性名=值]（匹配属性等于指定值的元素）例如：$("div[id=id1]") 可以匹配所有di=id1的div元素；
[属性名！=值]（匹配属性不等于指定值的元素）；
[属性名^=值]（指定属性值以指定值开始的元素）例如：$("input[name^=news]")可以匹配所有的name属性值以news开始的input元素；
[属性名$=值]（指定属性值以指定值结束的元素）；
[属性名*=值]（指定属性值包含指定值的元素）；

一.css()用法：

　　1.设置css


  // css(name, value)
    // 修改单个样式
    // name:样式名 value:样式值
    $("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");
    //css(obj)
    //修改多个样式
    $("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });

2.获取css样式：


    //获取样式
    //css(name)
    //name:想要获取的样式
    $("li").eq(0).css("fontSize");

二.class()的用法：

　　1.class()设置

addClass()方法向匹配的元素增加指定的类名(一个或多个) 注意:对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性. 实例：$('li').addClass('basic'); //为li元素追加一个basic类

2.删除class

  $('li').removeClass('basic');//移除basic这个类样式 $('li').removeClass();//移除li元素的全部类样式

　　  3.判断class // hasClass()方法是用来检查被选择的元素是否包含指定的class名 //返回一个布尔值true或者false $('li').hasClass("basic");//其中class是必须的值，规定需要在指定元素中查找的类名。 $('li').hasClass("basic className");//判断多个类 //与.is()一样 $('li').is('.basic')//同样检查是否包含指定的class名 注意带上点类名 $('li').is("basic className")//判断多个类

　　4.切换类：

//判断li有没有basic类，如果有，就移除他，如果没有，添加他
        $("li").toggleClass("basic");

        //$(selector).toggleClass(function(index,class),switch)
        //函数定义返回需要添加或删除的一个或多个类名
        //index - 可选，接受选择器的索引位置。
        //class - 可选，接受选择器的当前的类。
        //switch - 可选。布尔值，为true则加上对应的class，否则就删除。
        $('input').click(function () {
           $("li").toggleClass(function () {
                  return "basic";          
        })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/574007

jQ过滤器 css方法 class方法_jquery 过滤包含某个class的元素

基本过滤器：

内容过滤器：

可见性过滤器：

属性过滤器：