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