跳转至

Jquery 过滤

write by 2019/6/15 13:34

1. 过滤

  过滤就是有效范围内，进一步缩减范围。Jquery三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。 其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

2. 方法

  • first() 方法返回被选元素的首个元素。
  • last() 方法返回被选元素的最后一个元素。
  • eq() 方法返回被选元素中带有指定索引号的元素。
  • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
  • not() 方法返回不匹配标准的所有元素。

2.1 first

  first() 方法返回被选元素的首个元素。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#div1 p').first().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
first

2.2 last

  last() 方法返回被选元素的最后一个元素。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#div1 p').last().css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
last

2.3 eq

  eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#div1 p').eq(2).css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
eq

2.3 filter

  filter() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao" class="children">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke" class="children">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo" class="children">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
    </div>

</body>
<script>
    $(function () {
        $('#div1 p').filter('.children').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>
filter

2.3 not

 &emsp:not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        #div1 ,#div1 * {
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="div1"> 我是爸爸
        <p id="maomao" class="children">我是毛毛</p>
        <h3>人生充满着期待，梦想连接着未来。</h3>
        <p id="keke" class="children">我是可可</p>
        <h4>这么努力就是想让曾经看不起我的人闭嘴。</h4>
        <p id="duoduo" class="children">我是多多</p>
        <h3>如果你的面前有阴影，那是因为你的背后有阳光。</h3>
        <h4>山顶对我们半山腰的人来说并不遥远。</h4>
        <p>not1</p>
        <p>not2</p>
        <p>not3</p>
    </div>

</body>
<script>
    $(function () {
        $('#div1 p').not('.children').css({"color":"red","border":"2px solid red"});
    })
</script>
</html>

not