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(){
$("body>*").css("border","1px solid #000")
})
$("button:eq(6)").click(function(){
$("p~div:first").css("color","purple")
})
$("button:last").click(function(){
$("p~div").css("color","green")
})
</script>
筛选选择器
<button>选择第一个li</button>
<button>选择最后一个li</button>
<button>选择所有li排除最后一个</button>
<button>选择所有li排除第二个</button>
<button>选择所有索引值为偶数个li</button>
<button>选择所有索引值为奇数个li</button>
<button>选择大于第5个的li</button>
<button>选择小于第5个的li</button>
<button>选择等于第5个的li</button>
<button>选择所有标题标签</button>
<ul>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
<li>这是一个li</li>
</ul>
<h1>标题1标签</h1>
<h2>标题2标签</h2>
<h3>标题3标签</h3>
<script>
$("button:first").click(function () {
$("li:first").css("color", "red")
})
$("button:eq(1)").click(function () {
$("li:last").css("color", "green")
})
$("button:eq(2)").click(function () {
$("li:not(:last)").css("color", "blue")
})
$("button:eq(3)").click(function () {
$("li:not(:eq(1))").css("color", "yellow")
})
$("button:eq(4)").click(function () {
$("li:even").css("color", "pink")
})
$("button:eq(5)").click(function () {
$("li:odd").css("color", "orange")
})
$("button:eq(6)").click(function () {
$("li:gt(4)").css("background", "blue")
})
$("button:eq(7)").click(function () {
$("li:lt(4)").css("background", "red")
})
$("button:eq(8)").click(function () {
$("li:eq(4)").css("background", "green")
})
$("button:eq(9)").click(function () {
$("*:header").css("background", "skyblue")
})
</script>
标签：JQuery,function,常用,button,li,click,eq,选择器 From： https://www.cnblogs.com/Dollom/p/16776167.html