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