jQuery常用选择器
基础选择器
基本选择器 | 语法 | 功能 |
ID选择器 |
$('#ID') |
找到匹配指定ID的元素 |
元素(标签)选择器 |
$('element') |
找到指定的元素 |
class选择器 |
$('.class') |
找到匹配指定class的元素 |
通配符选择器 |
$('*') |
匹配所有元素 |
并集(组合)选择器 |
$('sel,sel') |
多个选择器匹配的元素合并 |
层级选择器 | 语法 | 功能 |
后代选择器 |
$('parent child') |
当前元素的所有后代元素 |
直接后代选择器 |
$('parent>child') |
当前元素所有的子元素 |
下一个兄弟 |
$('prev+next') |
当前元素的下一个元素 |
后面所有兄弟 |
$('prev~siblings') |
当前元素后面的所有兄弟元素 |
筛选选择器
基本筛选选择器 | 语法 |
获取第一个元素 |
$('ele:first') |
获取最后一个元素 |
$('ele:last') |
获取指定索引的元素 |
$('ele:eq(index)') 方法eq(index) |
获取所有元素除某个 |
$('ele:not(selector)') |
获取索引为偶数的元素 |
$('ele:even') |
获取索引为奇数的元素 |
$('ele:odd') |
获取大于该索引元素 |
$('ele:gt(index)') |
获取小于于该索引元素 |
$('ele:lt(index)') |
获取所有标题类型元素 |
$('ele:header') |
例题:
基础选择器
<button>选择所有段落标签</button>
<button>选择class为left的标签</button>
<button>选择id为box的标签</button>
<button>选择所有不分类型标签</button>
<button>选择ul里面的li标签</button>
<button>选择body下的第一级所有标签并添加边框</button>
<button>选择p后的一个div</button>
<button>选择p后的所有div</button>
<p>段落标签</p>
<p>段落标签</p>
<p>段落标签</p>
<div class="left">类选择器</div>
<div class="left">类选择器</div>
<div id="box">id选择器</div>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
<script>
$("button:first").click(function(){
$("p").css("color","red")
})
$("button:eq(1)").click(function(){
$(".left").css("color","blue")
})
$("button:eq(2)").click(function(){
$("#box").css("color","yellow")
})
$("button:eq(3)").click(function(){
$("body>:not(.left)").css("color","yellow")
})
$("button:eq(4)").click(function(){
$("ul li").css("color","skyblue")
})
$("button:eq(5)").click(function(){
$(