jQuery.not(selector)的用法详解
说明:从匹配元素集中删除元素。
版本增加: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" ) );
以上就是jQuery.not(selector)的用法详解的详细内容,更多请关注其它相关文章!
上一篇: PHP加密解密字符串汇总_PHP教程
下一篇: js实现获取颜色渐变代码