jq筛选，查找，串联

最新推荐文章于 2022-04-14 14:34:04 发布

weixin_42575793

最新推荐文章于 2022-04-14 14:34:04 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/weixin_42575793/article/details/104353413

版权

筛选

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>

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>

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

例子与first相反
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>

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>

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>

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

<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>Hello</p>
<p id="selected">Hello Again</p>
<script>
 $("p").not( $("#selected")[0] ) 　　　　　　//<p>Hello</p> </script>

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

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

节点的查找

查找节点 	 
查找儿子元素 	
$('选择器').children(); 	
$('选择器').children('选择器'); //查找儿子元素中的指定元素 
查找后代元素 	
$('选择器').find('选择器') 
查找直接父节点 
	$('选择器').parent()
	查找所有祖先节点，直到html节点为止 
	 	$('选择器').parents() 
	 	查找所有兄弟节点(本身除外) 	
	 	$('选择器').siblings(); 	常见用法，移除兄弟节点样式，进行排他操作 
	 	查找后一个兄弟元素 	
	 	$('选择器').next() 	 
	 	查找前一个兄弟元素 	
	 	$('选择器').prev() 	 
	 	查找后面所有兄弟元素 	
	 	$('选择器').nextAll() 	 
	 	查找前面所有兄弟元素 	
	 	$('选择器').prevAll()

串联

add(e|e|h|o[,c])
// 1.9*连接2个对象集合成一个对象集合(传参选择器，JQ对象，DOM对象，html表达式，)
addBack(elel0)
// 1.9+将先前所选的加入当前元素中
contents()
// 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
end()
// 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
andSelf()
// 1.8-在jQuery1.8和更高版本中应使用.addBack()代替。

<html>

<div>

<p></p>

<p></p>

<div class="a">

<p></p>

<span></span>

</div>

</div>

</html>

<script>

$("span").add("p").length; //返回 4

$("span").add($("p")).length; //返回 4 

$("span").add("p")[3].tagName; //返回 SPAN (按照html代码中顺序)

$("p").add("span")[3].tagName; //返回 SPAN 

$("span").add("<em>123</em>")[1].tagName; //返回 EM 创建一个对象加入 $("span")集合中

$("div").find("span").addBack().length; //返回 3 (1个span再加上2个div)

$("div").find("span").addBack()[2].tagName; //返回 SPAN 

$("div").find("span").addBack(".a").length; //返回 2 (1个span再加上class="a"的1个div)

$(".a").contents().not("p").wrap("<b/>"); //将 .a 子元素中非p元素节点包裹一层 b 标签

$("iframe").contents().find("body").append("123"); //在iframe中插入"aaa"

$("div").find("span").end(); //即回到 $("div")

$("div").length; //返回 2

$("div").find("span").length; //返回 1

$("div").find("span").end().length; //返回 2

</script>