筛选(查找操作)

查找操作

next([expr])

概述

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

参数

示例

描述：找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>

jQuery代码

 $(document).ready(function(){//设置jQuery入口
	console.log($('p').next());//表示返回前一个p标签后面的所有p标签
 })

描述：找到每个段落的后面紧邻的同辈元素中类名为p的元素。

HTML 代码:

<p>Hello</p>
<p>Hello Again</p>
<div>
    <span>And Again</span>
</div>

jQuery代码

 $(document).ready(function(){//设置jQuery入口
	// 返回指定元素的后面一个元素
	console.log($('.p').next());//表示返回标签名是p后面的一个div元素
 })

nextAll([expr])

概述

查找当前元素之后所有的同辈元素。 可以用表达式过滤

参数

示例

描述：找到类名是div后面的所有元素

HTML 代码:

<div>
   <div class="div">1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
</div>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//返回指定元素的后面所有元素
   console.log($('.div').nextAll())
   //表示找到类名是div后面的所有元素,不包含类名是div的元素
})

nextUntil([exp|ele][,fil])

概述

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

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。

参数

示例

描述：找到类名是div和类名是div2，之间的元素

HTML代码

<div>
   <div class="div">1</div>
   <div class="div1">2</div>
   <div class="div2">3</div>
   <div>4</div>
</div>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//返回后面指定两个指定类型之间的元素
	console.log($('.div').nextUntil('.div2'))//表示找到类名是div的元素和类名是div1的元素,
	//之间的元素是两个类名中间的元素
})

prev([expr])

概述

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

参数

示例

描述：找到每个段落紧邻的前一个同辈元素。

HTML 代码:

<p>Hello</p>
<div>
    <span>Hello Again</span>
</div>
<p class="p">And Again</p>

jQuery代码

$(document).ready(function(){//设置jQuery入口
  //返回指定元素的前面一个元素
  console.log($('.p').prev())//表示返回的是类名是p的前面是p标签的元素
})

描述：找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML代码

<div>
	 <span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>

jQuery代码

 $(document).ready(function(){//设置jQuery入口
 //返回指定元素的前面一个元素
   console.log($('p').prev('.selected'))//表示返回的是前面标签名是p的selected元素
 })

prevAll([expr])

概述

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

可以用表达式过滤。

参数

描述：找到类名是selected的前面所有元素

HTML代码

<p>Hello Again</p>
<p>And Again</p>
<p class="selected">Hello Again</p>
<p>And Again</p>

jQuery代码

$(document).ready(function(){//设置jQuery入口
		//返回指定元素的前面所有元素
    console.log($('.selected').prevAll())//表示返回的是标签名selected前面的所有元素
})

prevUntil([exp|ele][,fil])

概述

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

如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。

参数

示例

描述：找到类名是div和类名是div2，之间的元素

HTML代码

<div>
   <div class="div">1</div>
   <div class="div1">2</div>
   <div class="div2">3</div>
   <div>4</div>
</div>

jQuery代码

 $(document).ready(function(){//设置jQuery入口
	//返回指定两个指定类型之间的元素
	console.log($('.div2').prevUntil('.div'))//表示返回的是前面类名是div和div2中间的元素
 })

siblings([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

参数

示例

描述：找到每个p的所有同辈元素。

HTML 代码:

<div>
	<p>Hello</p>
    <div>
        <span>Hello Again</span>
    </div>
    <p>And Again</p>
</div>

jQuery代码

 $(document).ready(function(){//设置jQuery入口
    //返回结果是当前同级的元素
	console.log($('p').siblings())//表示返回的是当前同级的元素
 })

描述：找到每个div的所有同辈元素中带有类名为selected的元素。

HTML代码

<div>
	<p>Hello</p>
    <div class="selected">
        <span>Hello Again</span>
    </div>
    <p>And Again</p>
</div>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//返回结果是当前同级的元素
	console.log($('p').siblings('.selected'))
	//表示返回的是当前同级的元素并且类型是selected的元素
})

children([expr])

概述

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

参数

示例

描述：查找ul下面中的每个子元素。

HTML代码

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//获取ul的所有子元素
	console.log($('ul').children())//表示返回的是当前ul元素下面的所有字元素
})

描述：在每个li中查找 .selected 的类。

HTML代码

<ul>
	<li>1</li>
	<li>2</li>
	<li class="selected">3</li>
	<li>4</li>
</ul>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//获取ul的所有子元素
	console.log($('ul').children('.selected'))
	//表示返回的是当前ul元素下面的类名是selected的li标签
})

find(expr|obj|ele)

概述

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数

示例

描述：从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:

<p>
	<span>Hello</span>
, how are you?</p>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//获取ul的所有后代元素
	console.log($('p').find('span'))//表示返回的是p标签后代元素span标签
})

获取后代元素&&获取祖先级元素

HTML代码

    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    </ul>
    <ul class="ul">
    	<li>5</li>
    	<li>6</li>
    	<li>7</li>
    	<li>8</li>
    </ul>

parent([expr]) 获取父元素

概述：取得一个包含着所有匹配元素的唯一父元素的元素集合。

jQuery代码

$(document).ready(function(){//设置jQuery入口
		//获取父元素
    console.log($('li').parent())//表示返回的是li标签的父级元素ul

    console.log($('li').parent('.ul'));//表示返回是li标签的父级元素并且类名是ul的元素
})

parents([expr]) 获取祖先元素

概述：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素document）。可以通过一个可选的表达式进行筛选。

jQuery代码

 $(document).ready(function(){//设置jQuery入口
		//获取祖先元素
	console.log($('li').parents())//表示返回的是li标签的祖先级元素
})

parentsUntil

概述

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

如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。

jQuery代码

 $(document).ready(function(){//设置jQuery入口
   //获取直到指定祖先元素的  所有元素
	console.log($('li').parentsUntil('body'))
	//表示返回的是li标签的祖先级元素并且终止到body标签
 })

offsetParent()

概述

返回第一个匹配元素用于定位的父节点。
这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

jQuery代码

 $(document).ready(function(){//设置jQuery入口
	//获取有定位属性的父元素
	console.log($('.ul').offsetParent())//从.ul往上查询有定位元素的标签
 })