jQuery之筛选

jQuery

筛选

1)过滤
2)查找
3)串联

eq(index|-index)

获取匹配的第二个元素

HTML 代码:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(1).css("color","red")
结果:
[ <p> So is this</p> ]

first()

获取第一个元素

获取匹配的第一个元素
HTML 代码:
<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>
jQuery 代码:
$('li').first().css("color","red")
结果:
[ <li>list item 1</li> ]

last()

获取最后个元素

获取匹配的最后个元素
HTML 代码:
<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>
jQuery 代码:
$('li').last()
结果:
[ <li>list item 5</li> ]

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。

给包含有某个类的元素进行一个动画。
HTML 代码:
<div class="protected"></div><div></div>
jQuery 代码:
$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

filter(expr|obj|ele|fn)

筛选出与指定表达式匹配的元素集合。

保留子元素中不含有ol的元素。
HTML 代码:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代码:
$("p").filter(function(index) {
  return $("ol", this).length == 0;
});
结果:
[ <p>How are you?</p> ]

is

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

判断点击li标签增加背景色为红色，如果点击的是第2个strong,当前的li增加背景色为绿色，
HTML 代码:
<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
  <li>list item 3</li>
</ul>
jQuery 代码:
$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $('strong', this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

map

将一组元素转换成其他数组（不论是否是元素数组）

把form中的每个input元素的值建立一个列表。
HTML 代码:
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>
jQuery 代码:
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );
结果:
[ <p>John, password, http://ejohn.org/</p> ]

has

保留包含特定后代的元素，去掉那些不含有指定后代的元素。

给含有ul的li加上背景色
HTML 代码:
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>
jQuery 代码:
$('li').has('ul').css('background-color', 'red');

not

删除与指定表达式匹配的元素

从p元素中删除带有 select 的ID的元素
HTML 代码:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery 代码:
$("p").not( $("#selected")[0] )
结果:
[ <p>Hello</p> ]

slice

选取一个匹配的子集

只选取第二个p元素
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").slice(1, 2).wrapInner("<b></b>");
结果:
[ <p><b>cruel</b></p> ]

children

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

在每个div中查找 .selected 的类。
HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
jQuery 代码:
$("div").children(".selected")
结果:
[ <p class="selected">Hello Again</p> ]

find

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]

next

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

找到每个段落的后面紧邻的同辈元素。
HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next()
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

nextAll

查找当前元素之后所有的同辈元素。

给第一个div之后的所有元素加个类
HTML 代码:
<div></div><div></div><div></div><div></div>
jQuery 代码:
$("div:first").nextAll().addClass("after");
结果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

nextUntil

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

给#term-2后面直到dt前的元素加上红色背景
HTML 代码:
<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>jQuery 代码:
$('#term-2').nextUntil('dt').css('background-color', 'red');
      
var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");

andSelf()

加入先前所选的加入当前元素中

选取所有div以及内部的p，并加上border类
HTML 代码:
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
jQuery 代码:
$("div").find("p").andSelf().addClass("border");
结果:
<div class="border">
    <p class="border">First Paragraph</p>
    <p class="border">Second Paragraph</p>
</div>

contents()

查找匹配元素内部所有的子节点（包括文本节点）

查找所有文本节点并加粗
HTML 代码:
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
jQuery 代码:
$("p").contents().not("[nodeType=1]").wrap("<b/>");
结果:
<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>

end()

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素

HTML 代码:
<p><span>Hello</span>,how are you?</p>
jQuery 代码:
$("p").find("span").end()
结果:
[ <p><span>Hello</span> how are you?</p> ]