jquery选择器:
1.基本选择器
- 标签选择器
- 类选择器
- ID选择器
- 并集选择器
- 交集选择器
- 全局选择器
2.层次选择器
- 后代选择器
- 子选择器
- 相邻选择器
- 同辈选择器
3.属性选择器
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [selector][selector2][selectorN]
1)基本选择器
<h1>标签选择器</h1>
<h1 class="a">类选择器</h1>
<h1 id="h1_id">ID选择器</h1>
<table>
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
</table>
<h1>标签选择器</h1>//标签选择器
<h1 class="a">类选择器</h1>//类选择器
<h1 id="h1_id">ID选择器</h1>//ID选择器
$("table,tr,th,.a,#h1_id").css("background","orange");//并集选择器
$("h1#h1_id").css("background","orange");//交集选择器
$("*").css("background","red");//全局选择器
2)层次选择器
<span>后代选择器1</span>
<h1>属于h1的<span>后代选择器2</span></h1>
<span>后代选择器4</span>
<span>后代选择器4</span>
<h1>属于h1的<span>后代选择器3</span><a>后代选择器2aa</a></h1>
<span>后代选择器5</span>
$("h1 span").css("background","green");//后代选择器
$("h1>span").css("background","green");//子代选择器
$("h1+span").css("background","green");//相邻元素选择器
$("h1~span").css("background","green");//同辈元素选择器
3)属性选择器
<a>百度</a> <a href="#">百度2</a>
<a href="www.baidu.com">百度3</a>
<a href="baidu.com">百度4</a>
<a href="www.baidu.com">百度5</a>
<a href="bilibili.com">哔哩哔哩</a>
<a href="bilibili">哔哩哔哩2</a><br>
$("a[href]").css("background","green");
$("a[href=#]").css("background","green");
$("a[href!=#]").css("background","green");
$("a[href^=w]").css("background","green");
$("a[href$=m]").css("background","green");
$("a[href*='baidu']").css("background","green");
$("a[href*='baidu'][href^='w']").css("background","green");
4)基本过滤选择器
<ol>
<li class="h">金钱</li>
<li>权利</li>
<li>美女</li>
<li>啤酒</li>
<li>炸鸡</li>
</ol>
$("li:first").css("background","green");//选取第一个元素
$("li:last").css("background","red");//选取最后一个元素
$("li:even").css("background","green");//选取偶数行,从0行开始
$("li:odd").css("background","red");//选取奇数行
$("li:eq(1)").css("background","red");//选取索引为1的,索引从0开始
$("li:gt(2)").css("background","red");//选取索引大于2的(不包含2)
$("li:lt(2)").css("background","red");//选取索引小于2的(不包含2)
$("li:not(.h)").css("background","red");//选取class不是h的
$(":header").css("background","red");//选取所有h标签
$("input").focus(function() {
$(this).css("background","orange");
})//获取焦点
$("input").blur(function(){
$(this).css("background","black");
})//失去焦点
5)可见性过滤选择器
<span>
<div style="display: none">隐藏</div>
<div style="display: block">显示</div>
</span>
<button>变</button>
$("span>:visible").css("background","red");//选取可见元素
$("span>:hidden").css("background","red");//选取不可见元素
$("span>:hidden").show("slow");//不可见元素,慢慢显示
$("span>:hidden").show(3000);//不可见元素,3000ms完全显示
$("span>:visible").hide("slow");//可见元素,慢慢隐藏
$("span>:visible").hide(3000);//可见元素,3000ms完全隐藏
注:$(“button”).click(function(){
})为鼠标点击按钮事件
6)表单选择器
$(":password").css("background","green");//选择type为passw的
$(":text").css("background","green");
$(":checkbox").attr("checked",true);
.....