jQuery选择器

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);
.....