jq筛选方法

Posted 2021-02-07 1234wu

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>