jQuery(内容选择器,子元素选择器)，过滤操作

jQuery选择器

内容选择器

:contains(text)

概述

匹配包含给定文本的元素

参数

示例

描述：查找所有包含 “John” 的 div 元素

HTML代码

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

jQuery 代码:

$(document).ready(function(){//设置jQuery出口代码
	//选到包含指定文本内容的元素
	console.log($('div:contains("John")'));//查找div中文本包含John的元素
})

:empty

概述

匹配所有不包含子元素或者文本的空元素

示例

描述：查找所有不包含子元素或者文本的空元素

HTML 代码:

<table>
  <tr><td>Value 1</td><td> </td></tr><!--中间有空格这叫空格文本不是空元素-->
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery代码

$(document).ready(function(){//jQuery出口代码
	//选到没有任何内容的元素
	console.log($('td:empty()'))//查找文本内容是空的td标签
})

:parent

概述

匹配含有子元素或者文本的元素

示例

描述：查找所有含有子元素或者文本的 td 元素

HTML代码

<table>
  <tr><td>Value 1</td> <td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery代码

 $(document).ready(function(){//设置jQuery出口代码
	// 选到有文本内容的元素
	console.log($('td:parent()'))//选择到有文本的td标签 
	//中间有空格的表示空格文本是有文本的
 })

:has(selector)

概述

匹配含有选择器所匹配的元素的元素

参数

示例

描述：查找li有item1类名的子级元素

HTML 代码:

<ul>
    <li>
         <div class="item1"></div>
    </li>
    <li class="item2"></li>
    <li>4</li>
    <li>
         <div class="item1"></div>
    </li>
</ul>

jQuery代码

 $(document).ready(function(){//设置jQuery出口代码
	//选择到含有指定选择器
	console.log($('li:has(.item1)'));//查找li子级类名为item1的元素
 })

可见性选择器

:hidden

概述

匹配所有不可见元素，或者type为hidden的元素

示例

描述：查找隐藏的 tr

HTML 代码:

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码

 $(document).ready(function(){//设置jQuery入口代码
	//选到 页面中不可见到的元素
	console.log($('tr:hidden'))//选到tr中有隐藏元素的标签
})

描述：匹配type为hidden的元素

HTML 代码:

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jQuery代码

$(document).ready(function(){//设置jQuery入口代码
  //选到 页面中不可见到的元素
  console.log($('input:hidden'))//查找input中有隐藏元素的type类型
})

:visible

概述

匹配所有的可见元素

示例

描述：查找所有可见的 tr 元素

HTML 代码:

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery代码

 $(document).ready(function(){//设置jQuery入口代码
	//选到 页面中可以见到的元素
	console.log($('tr:visible'))//查找tr的显示元素
 })

子元素选择器

:first-child

概述

匹配所给选择器( :之前的选择器)的第一个子元素
类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

示例

描述：在每个 ul 中查找第一个 li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码

$(document).ready(function(){//设置jQuery入口代码
	console.log($('ul li:first-child'))//选择到两个Ul的第一个li
})

:first-of-type

概述

结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。

描述:

查找作为父元素的span类型子元素中的"长子"的span标签

HTML 代码:

<div id="n1">
    <div id="n2" class="abc">
        <label id="n3">label1</label>
        <span id="n4">span1</span>
        <span id="n5" class="abc">span2</span>
        <span id="n6">span3</span>
    </div>
    <div id="n7">
        <span id="n8" class="abc">span1</span>
        <span id="n9">span2</span>
    </div>
</div>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//选到同样标签类型的第一个
	console.log($('span:first-of-type'))//选择到两个div中的第一个同等的span标签(类型)
	//n4虽然不是n2的第一个子元素，但它是n2所有span类型子元素中的第一个，因此可以匹配
})

:last-child

概述

匹配最后一个子元素
:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

示例

描述：在每个 ul 中查找最后一个 li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	// 匹配最后一个子元素
	console.log($('li:last-child'))//匹配ul标签的最后一个li标签
})

:last-of-type

概述

结构化伪类，匹配E的父元素的最后一个E类型的孩子 大体的意思跟
:first-of-type差不多，只是一个是第一个元素，一个是最后一个元素

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery代码

$(document).ready(function(){//设置jQuery入口
	//选到同样标签类型的最后一个
	console.log($('li:last-of-type'))//选择到同等类型最后一个li标签
})

:nth-child

概述

匹配其父元素下的第N个子或奇偶元素
:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。
:nth-child从1开始的，而:eq()是从0算起的！

参数

示例

描述：在每个 ul 查找第 2 个li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

$(document).ready(function(){//设置jQuery入口代码
	//选到到第n个子元素(按1开始排)
	console.log($('ul :nth-child(2)'))//查找ul后代的第2个li
	//ul :nth-child(2) (ul后面的空格标签后代,下一级)
})

过滤操作

first()

概述

获取第一个元素

示例

描述：获取匹配的第一个元素

HTML 代码:

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

jQuery代码

$(document).ready(function(){//设置jQuery入口代码
	console.log($('li:first'))//筛选选择器(字符串里面自带选择器)
	console.log($('li').first());//获取li的jQuery集合在调用first方法获取到第一个li
	//返回结果是一个jQuerydom集合是存放使用li的,然后在选择到集合中的li的第一个
	// 上面和下面的操作是完全一致的 都是基于选择到的元素进行过滤
})

eq(index|-index)

概述

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。
类似的有get(index),不过get(index)返回的是DOM对象。

参数

示例

参数index描述：获取匹配的第二个元素

HTML 代码:

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

jQuery代码

$(document).ready(function(){//设置jQuery入口代码
	 console.log($('p').eq(1));//eq里面填的是索引位置,当前表示查找索引位置是1的p
})

参数-index描述：获取匹配的倒数第二个元素

HTML 代码:

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

jQuery代码

$(document).ready(function(){//设置jQuery入口代码
	console.log($('p').eq(-2));
	//eq里面填的是索引位置是负数表示从当前jQuery集合中最后一个(-1)开始计数
})

last()

概述

获取最后个元素

示例

描述：获取匹配的最后个元素

HTML代码

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

jQuery代码

$(document).ready(function(){//数组jQuery入口代码
	console.log($('li').last());//表示查询li元素的最后一个字元素
})

has(expr|ele)

概述

保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

参数

示例

描述：查找li子级是ul的元素

HTML 代码:

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

jQuery代码

$(document).ready(function(){//数组jQuery入口代码
	console.log($('li').has('ul'));//表示查询li元素内部有子级的ul
})

not(expr|ele|fn)

概述

从匹配元素的集合中删除与指定表达式匹配的元素

参数

示例

描述：从p元素中删除带有 select 的ID的元素

HTML 代码:

<p>Hello</p><p id="selected">Hello Again</p>

jQuery代码

$(document).ready(function(){//数组jQuery入口代码
	console.log($("p").not( "#selected") );//表示删除id名是selected的元素
})

slice(start, [end])

概述

选取一个匹配的子集
与原来的slice方法类似

参数

HTML代码

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

jQuery代码

$(document).ready(function(){//数组jQuery入口代码
	 //截取指定返回的li元素
    console.log($("ul li").slice(1,3) );//表示删除索引1到索引2的li，不会到索引3的li(到1不到3)
})