jQuery has（），not（）和filter（）函数示例

最新推荐文章于 2024-07-31 10:50:24 发布

cunchi4221

最新推荐文章于 2024-07-31 10:50:24 发布

阅读量480

点赞数

文章标签：字符串 css js javascript jquery ViewUI

原文链接：https://www.journaldev.com/5385/jquery-has-not-filter-functions-example

版权

jQuery API provides traversing methods to filter out the matched elements. We will discuss some filtering methods in this post, jQuery has(), not() and filter().

jQuery API提供了遍历方法来过滤出匹配的元素。我们将在本文中讨论jQuery has() ， not()和filter()一些过滤方法。

jQuery has（） (jQuery has())

The has() method returns all the elements which matches at least one of the elements passed to this method. The has() method accepts a mandatory parameter which reduces the matched set of elements..

has()方法返回与传递给此方法的至少一个元素匹配的所有元素。 has（）方法接受一个强制性参数，该参数会减少匹配的元素集。

Here is the general syntax for using has():

这是使用has（）的一般语法：

selector.has(element)
selector.has（ element ）

element could be any selector expression to match against or any DOM element. You can pass multiple comma separated elements this methods like $(“div”).has(“p,span”). Here has() method return all the div elements which contains any of the elements, that is p or span element.

元素可以是与之匹配的任何选择器表达式，也可以是任何DOM元素。您可以使用$（“ div”）。has（“ p，span”）这样的方法传递多个逗号分隔的元素。 has（）方法将返回所有包含任何元素的div元素，即p或span元素。

jQuery has（）示例 (jQuery has() example)

Following example demonstrates the jQuery has() usage.

以下示例演示了jQuery has（）的用法。

<!doctype html>
<html>
<head>
<title>jQuery Traversing has</title>
<style>
  div{
      display: block;
      border: 3px solid grey;
      color: black;
      padding: 5px;
      margin: 25px;
      width:250px;
      text-align:center;
      color:red;
  }
  p{
   color: green;
   text-align:center;
  }
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>

<h2>jQuery has() Demo</h2>
<div><b>This div has a p element</b>
<p><b>p - I am inside div</b></p>
</div>
<div><b>I'm not yellow because I don't have a p element</b></div>

<script>
  $(document).ready(function(){
    $("div").has("p").css("background-color","yellow");
  });
</script>
</body>
</html>

In this example, we have two div elements. We are going to check whether the div elements have a p element using jQuery has().
$("div").has("p") checks whether the div has a p element. The has() method traverses the DOM tree and finds two div elements but only one has the p. Therefore, the div which contains p will be filled with yellow.
In this example you can see that the has() method filters out the div elements using the selector passed to this method, that is a p element. Below is the output produced by above HTML page.

在此示例中，我们有两个div元素。我们将使用jQuery has（）检查div元素是否具有ap元素。
$("div").has("p")检查div是否具有ap元素。 has（）方法遍历DOM树并找到两个div元素，但只有一个具有p。因此，包含p的div将用黄色填充。
在此示例中，您可以看到has（）方法使用传递给此方法的选择器ap元素过滤了div元素。以下是以上HTML页面产生的输出。

Now we can look in to jQuery not(), another useful filtering method .

现在我们可以看看jQuery not（） ，这是另一种有用的过滤方法。

jQuery not（） (jQuery not())

The not() method filters out all the elements which matches the specified selector from the matched set of elements.

not()方法从匹配的元素集中过滤出所有与指定选择器匹配的元素。

Here is the general syntax for using not():

这是使用not（）的一般语法：

selector.not(element)
selector.not（ element ）

element could be a string containing the selector expression, a function, any DOM element or any existing jQuery object.

元素可以是包含选择器表达式，函数，任何DOM元素或任何现有jQuery对象的字符串。

jQuery not（）示例 (jQuery not() example)

Following example demonstrates the jQuery not() usage

以下示例演示了jQuery not（）的用法

<!doctype html>
<html>
<head>
<title>jQuery traversing not</title>
<style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
 .green {
    background: green;
  }
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div></div>
<div class="green"></div>
<div></div>

<script>
  $( "div" ).not( ".green" )
   .css( "border-color", "red" );
</script>

</body>
</html>

In this example, we have three div elements and two of them is defined with CSS style class="green".
$( "div" ).not( ".green" ).css( "border-color", "red" ); This line of code filters out the div elements which does not have class="green" and changes the border color to red.

在此示例中，我们有三个div元素，其中两个是使用CSS样式class="green" 。
$( "div" ).not( ".green" ).css( "border-color", "red" ); 这行代码过滤掉没有class="green"的div元素，并将边框颜色更改为红色。

Now we can look in to jQuery filter(), another useful filtering method .

现在我们可以看一下jQuery filter（），这是另一种有用的过滤方法。

jQuery filter（） (jQuery filter())

The filter() method removes all the elements from the matched set of elements that do not match the specified selectors.

filter()方法从匹配的元素集中删除与指定选择器不匹配的所有元素。

Here is the general syntax for using filter():

这是使用filter（）的一般语法：

selector.filter(element)
选择器。过滤器（元素）

element could be a string containing the selector expression, a function, any DOM element or any existing jQuery object.

元素可以是包含选择器表达式，函数，任何DOM元素或任何现有jQuery对象的字符串。

jQuery filter（）示例 (jQuery filter() example)

Following example demonstrates the jQuery filter() usage

以下示例演示了jQuery filter（）的用法

<!doctype html>
<html>
<head>
<title>jQuery traversing filter</title>
<style>
  div,.newDivClass{
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<div></div>
<div class="newDivClass"></div>
<div></div>

<script>
 $( "div" )
  .css( "background", "yellow" )
  .filter( ".newDivClass" )
  .css( "border-color", "red" );
</script>

</body>
</html>

In this example, we have three div elements and one of them is defined with CSS style class="newDivClass".
First we change the back ground color of all the div elements to yellow and changes the border color of the div element which has clas==”newDivClass” using filter() method.

在此示例中，我们有三个div元素，其中一个元素是使用CSS样式class="newDivClass" 。
首先，我们使用filter（）方法将所有div元素的背景色更改为黄色，并更改具有clas ==“ newDivClass”的div元素的边框颜色。

I hope you have understood the use of these filtering methods in jQuery. We will discuss other methods in the coming posts.

希望您了解jQuery中这些过滤方法的用法。我们将在以后的文章中讨论其他方法。