jQuery选择器

jQuery 简介
jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery 是一个 JavaScript 函数库，jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：
  HTML 元素选取
  HTML 元素操作
  CSS 操作
  HTML 事件函数
  JavaScript 特效和动画
  HTML DOM 遍历和修改
  AJAX
  Utilities
提示： 除此之外，jQuery 还提供了大量的插件。

jQuery 选择器的优点:
简洁的写法
${“#id”}   等价于    document.getElementById("id");
${“tagName”}     等价于   document.getElementsByTagName("tagName");
完善的事件处理机制

jQuery选择器功能强大，种类也很多，分类如下：
  类CSS选择器
  基本选择器
  层次选择器
  属性选择器
过滤选择器：
  基本过滤选择器
  可见性过滤选择器

元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
实例

用户点击按钮后，所有 <p> 元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。

实例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素