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>aaatd><td>bbbtd><td>ccctd>tr>
   <tr><td>aaatd><td>bbbtd><td>ccctd>tr>
   <tr><td>aaatd><td>bbbtd><td>ccctd>tr>
table>

标签选择器
//标签选择器

class="a">类选择器
//类选择器

"h1_id">ID选择器
//ID选择器

$("table,tr,th,.a,#h1_id").css("background","orange");//并集选择器

$("h1#h1_id").css("background","orange");//交集选择器

$("*").css("background","red");//全局选择器

---

---

2）层次选择器

<span>后代选择器1span>
      <h1>属于h1的<span>后代选择器2span>h1>
      <span>后代选择器4span>
      <span>后代选择器4span>
      <h1>属于h1的<span>后代选择器3span><a>后代选择器2aaa>h1>
<span>后代选择器5span>

$("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="#">百度2a>
<a href="www.baidu.com">百度3a>
<a href="baidu.com">百度4a>
<a href="www.baidu.com">百度5a>
<a href="bilibili.com">哔哩哔哩a>
<a href="bilibili">哔哩哔哩2a><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);
.....