Rumah >hujung hadapan web >tutorial js >jQuery.not（selector）的用法详解

jQuery.not（selector）的用法详解

巴扎黑asal: 2017-06-22 17:51:572433semak imbas

.not（selector）返回：jQuery

说明：从匹配元素集中删除元素。

版本增加：1.0.not（选择器）

选择

类型：选择器或元素或数组

包含选择器表达式，DOM元素或与该集合匹配的元素数组的字符串。

版本增加：1.4。（功能）

功能

类型：函数（整数索引，元素元素）=> 布尔值

用作集合中每个元素的测试的函数。它接受两个参数，index它是jQuery集合中元素的索引element，它是DOM元素。在该函数内，this指的是当前的DOM元素。

版本增加：1.4不选（选择）

选择

类型：jQuery

一个现有的jQuery对象，以匹配当前的元素组。

给定一个表示一组DOM元素.not()的jQuery对象，该方法从匹配元素的子集中构造一个新的jQuery对象。所提供的选择器针对每个元素进行测试; 与选择器不匹配的元素将包含在结果中。

考虑一个有简单列表的页面：

五

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以将此方法应用于列表项集：

$( "li" ).not( ":even" ).css( "background-color", "red" );

这个调用的结果是项目2和4的红色背景，因为它们与选择器不匹配（回想一下：偶数：奇数使用0的索引）。

删除特定元素

该.not()方法的第二个版本允许我们从匹配的集合中删除元素，假设我们以前通过其他方法找到了这些元素。例如，假设我们的列表已将id应用于其中一项：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以使用本机JavaScript getElementById()函数获取第三个列表项，然后从jQuery对象中删除它：

$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );

此语句更改了项目1,2,4和5的颜色。我们可以使用更简单的jQuery表达式完成相同的操作，但是，例如，当其他库提供对纯DOM节点的引用时，此技术将非常有用。

从jQuery 1.4开始，该.not()方法可以以相同的方式将函数作为其参数.filter()。功能返回的元素true从过滤的集合中排除; 所有其他元素都包括在内。

注意：当CSS选择器字符串被传递时.not()，文本和注释节点将始终在过滤过程中从生成的jQuery对象中删除。当提供特定节点或节点数组时，如果匹配过滤数组中的一个节点，文本或注释节点将仅从jQuery对象中删除。

例子：

向不是绿色或蓝色的div添加边框。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>

演示：

从所有段落的集合中删除ID为“selected”的元素。

$( "p" ).not( $( "#selected" )[ 0 ] );

从所有段落的集合中删除ID为“selected”的元素。

$( "p" ).not( "#selected" );

从所有段落的总集合中删除与“div p.selected”匹配的所有元素。

$( "p" ).not( $( "div p.selected" ) );

Atas ialah kandungan terperinci jQuery.not（selector）的用法详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：用Jquery+Ajax+xml制作三级联动效果Artikel seterusnya：jQuery:not() 选择器的基础知识介绍

Artikel berkaitan

Lihat lagi