jQuery中的常用选择器(上)

1.基础选择器

<div id='app'>
	<p class='p1'>类选择器<p>
	<h3>标签选择器</h3>
	<ul>
		<li class="item1">列表1</li>
		<li class="item2">列表2</li>
		<li class="item3">列表3</li>
	</ul>
<div>

//1.id选择器
console.log($('#app')) //jQuery.fn.init [div#app]
//2.class选择器
console.log($('.p1')) //jQuery.fn.init [p.p1, prevObject: jQuery.fn.init(1)]
//3.标签选择器(元素选择器)
console.log($('h3')) //jQuery.fn.init [h3, prevObject: jQuery.fn.init(1)]
//4.*表示选中所有的元素
console.log($('*')) //jQuery.fn.init(17) [html, head, meta, meta, title, body, div#app, p.p1, p, h3, ul, li.item1, li.item2, li.item3, div, script, script, prevObject: jQuery.fn.init(1)]
//5.组合选择器
console.log($('h3,ul,li')) //jQuery.fn.init(5) [h3, ul, li.item1, li.item2, li.item3, prevObject: jQuery.fn.init(1)]

2.层次选择器

//1.选取某元素下的后代元素
console.log($('#app ul li')) //jQuery.fn.init(3) [li.item1, li.item2, li.item3, prevObject: jQuery.fn.init(1)]
//2.选取子元素 `>`
console.log($('ul>.item1')) //jQuery.fn.init [li.item1, prevObject: jQuery.fn.init(1)]
//3.选取紧接在 prev 元素后⾯的next 元素 `prev + next`
console.log($('.item1 + .item2')) //jQuery.fn.init [li.item2, prevObject: jQuery.fn.init(1)]
//4.选取 prev 元素之后的所有siblings 元素 `prev~siblings`
console.log($('.item1~li')) //jQuery.fn.init(2) [li.item2, li.item3, prevObject: jQuery.fn.init(1)]

3.过滤选择器

//1.选择第一个:first
console.log($('ul>li:first')) //jQuery.fn.init [li.item1, prevObject: jQuery.fn.init(1)]
//2.选择最后一个:last
console.log($('ul>li:last')) //jQuery.fn.init [li.item3, prevObject: jQuery.fn.init(1)]
//3.去掉选中的元素:not(selector)
console.log($('ul li:not(.item2)')) //jQuery.fn.init(2) [li.item1, li.item3, prevObject: jQuery.fn.init(1)]
//4.选中为偶数的元素
console.log($('ul li:even')) //jQuery.fn.init(2) [li.item1, li.item3, prevObject: jQuery.fn.init(1)]
//5.选中为奇数的元素
console.log($('ul li:odd')) //jQuery.fn.init [li.item2, prevObject: jQuery.fn.init(1)]
//6.选中索引的元素
console.log($('ul li:eq(2)')) //jQuery.fn.init [li.item3, prevObject: jQuery.fn.init(1)]
//7.选中索引大于的元素
console.log($('ul li:gt(2)')) //jQuery.fn.init [prevObject: jQuery.fn.init(1)]
//8.选中索引小于的元素
console.log($('ul li:lt(2)')) //jQuery.fn.init(2) [li.item1, li.item2, prevObject: jQuery.fn.init(1)]