jq筛选方法

jq筛选方法(参照手册)

过滤:

  1) eq(index|-index):获取第N个元素

    负值表示从末尾开始匹配

<!-- 获取匹配的第二个元素 -->

<p> This is just a test.</p>
<p> So is this</p>

<script>
$("p").eq(1)
$("p").eq(-2)   // <p> This is just a test.</p> 
</script>

  

  2) first():获取第一个元素

<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>

<script>
    $('li').first()    //<li>list item 1</li>
</script>

  

  3) last():获取最后一个元素

  

  4) hasClass(class):检查当前的元素是否含有某个特定的类,如果有,则返回true。

<div class="protected"></div>
<div></div>
<script> $("div").click(function(){ if ( $(this).hasClass("protected") ) $(this) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: -10 }) .animate({ left: 10 }) .animate({ left: 0 }); });
</script>

  

  5) filter(expr | obj | ele | fn):筛选出与指定表达式匹配的元素集合。

    这个方法用于缩小匹配的范围。用逗号分隔多个表达式,返回匹配到的元素节点

<!-- 保留子元素中不含有ol的元素。 -->
<p>
    <ol>
        <li>Hello</li>
    </ol>
</p>
<p>How are you?</p> 
   
<script>
    $("p").filter(function(index) {
          return $("ol", this).length == 0;      //<p>How are you?</p>
    });    
</script>        

 

  6) is(expr | obj | ele | fn):检测匹配元素集合,有一个元素符合返回true

<!-- 由于input元素的父元素是一个表单元素,所以返回true。-->
<form>
    <input type="checkbox" />
</form>

<script>
$("input[type='checkbox']").parent().is("form")

//true
</script>

 

  7) map(callback):将一组元素转换成其他数组(不论是否是元素数组)

    你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

<!-- 把form中的每个input元素的值建立一个列表。-->


<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>

<script>
    $("p").append( $("input").map(function(){
          return $(this).val();
    }).get().join(", ") );        //<p>John, password, http://ejohn.org/</p> 
</script> 

 

  8) has(expr|ele):保留包含特定后代的元素,去掉那些不含有指定后代的元素

<!-- 给含有ul的li加上背景色 -->

<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>

<script>
    $('li').has('ul').css('background-color', 'red');
</script>            

 

  9 ) not(expr|ele|fn):删除与指定表达式匹配的元素;

<!-- 从p元素中删除带有 select 的ID的元素 -->

<p>Hello</p>
<p id="selected">Hello Again</p> <script> $("p").not( $("#selected")[0] )       //<p>Hello</p> </script>

 

  10) slice(start, [end]):选取一个匹配的子集

<!-- 选择第一个p元素 -->

<p>Hello</p>
<p>cruel</p>
<p>World</p>

<script>
    $("p").slice(0, 1).wrapInner("<b></b>");     //<p><b>Hello</b></p>
</script>

<!-- 选择前两个p元素 -->
<script>
    $("p").slice(0, 2).wrapInner("<b></b>");     // <p><b>Hello</b></p>,<p><b>cruel</b></p>
</script>

 

上一篇:jQuery使用(八):运动方法


下一篇:Jquery动画