基本选择器

• id $("#test")选取id为test的元素

• .class $(".test")选取所有class为test的元素
• element $("p")选取所有的<p>元素

• •        $("*")选取所有的元素
    

• selector1,selector2,...,selectorN $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一级组元素

层次选择器

• $("ancestor desendant") 选取ancestor元素里的所有descendant(后代)元素

    示例：$("div span")选取<div>里的所有<span>元素
  

• $("parent>child) 选取parent元素下的子元素

    示例：$("div>span")选取<div>元素下元素名是<span>的子元素
  

• $("prev+next") 选取进阶在prev元素后的next元素

    示例：$(".one+div")选取class为one的下一个<div>同辈元素
  

• $("prev~siblings") 选取prev元素之后的所有siblings元素

    示例：$("#two~div")选取id为two的元素后面的所有<div>同辈元素
  

基本过滤选择器

• :first 选取第一个元素

    示例：$("div:first")选取所有<div>元素中第1个<div>元素
  

• :last 选取最后一个元素

    示例:$("div:last")选取所有<div>元素中最后一个<div>元素
  

• :not(selector) 取出所有与给定选择器匹配的元素

    示例:$("input:not(.myClass)")选取class不是myClass的<input>元素
  

• :even 选取索引是偶数的所有元素，索引从0开始

    示例:$("input:even")选取索引是偶数的<input>元素
  

• :odd 选取索引是奇数的所有元素，索引从0开始

    示例:$("input:odd")选取索引是奇数的<input>元素
  

• :eq(index) 选取索引等于index的元素(index从0开始)

    示例:$("input:eq(1)")选取索引等于1的<input>元素
  

• :gt(index) 选取索引大于index的元素(index从0开始)

    示例:$("input:not(.myClass)")选取class不是myClass的<input>元素
  

• :lt(index) 选取索引小于index的元素(index从0开始)

    示例:$("input:even")选取索引是偶数的<input>元素
  

内容过滤选择器

• :contains(text) 选取含有文本内容为"text"的元素

    示例:$(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素
  

• :empty 选取不包含子元素或者文本的空元素

    示例：$(‘div:empty’)选取不包含子元素和文本的<div>空元素
  

• has(selector) 选取含有选择器所匹配的元素的元素

    示例：$(‘div:has(p)’)选取含有<p>元素的<div>元素
  

• parent 选取含有子元素或者文本的元素

    示例：$(“div:parent”)选取拥有子元素或文本元素的<div>元素
  

属性过滤选择器

• [attr] 选取拥有此属性的元素

    示例：$(“div[id]”)选取拥有属性id的元素
  

• [attr=value] 选取属性的职位value的元素

    示例：$(“div[title=test]”)选取属性title为”test”的<div>元素
  

• [attr!=value] 选取属性的值不等于value的元素

• [attr^=value] 选取属性的值以value开始的元素

    示例：$(“div[title^=test]”)选取属性title以”test”开始的<div>元素
  

• [attr$value] 选取属性的值以value结束的元素

    示例：$(“div[title$=test]”)选取属性title以”test”结束的<div>元素
  

• [attr*=value] 选取属性的值含有value的元素

    示例：$(“div[title*=test]”)选取属性title含有”test”的<div>元素
  

• [attr1][attr2][attrN] 选择满足所有属性选择器的元素

    示例：$(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素
  

子元素过滤选择器

• :nth-child 选取每个父元素下的第index个或者奇偶元素。index从1开始

    示例:$(‘div:nth-child(1)’) 选取所有div中的，是其父标签的第一个子标签的div；$(‘div:eq(0)’);选取第一个div；
  

• :first-child 选取每个父元素的第一个元素

    示例：$(“ul li: first-child”)选取每个<ul>中第一个<li>元素$(‘div:first’)选择所有div标签中的第一个。
  

• :last-child 选取每个父元素的最后一个子元素

• :only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。

    示例：$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素
  

表单属性选择器

• :enabled 选取所有可用元素

    示例：$(‘input:enabled’)选取所有可用的input元素
  

• :disabled 选取所有不可用元素

    示例：$(‘input:disabled’);选取所有不可用的input元素
  

• :checked 选中所有被选中的元素(单选框、多选框)

    示例：$(‘input:checked’);选取所有被选中的input元素
  

• :selected 选中所有被选中的元素(下拉列表)

    示例：$(‘select option:selected’);选取所有被选中的option元素
  

JQuery常用方法

• click 当点击$()选中的所有标签时，执行click中的函数

    $("#test").click(function(){
        alert("hello world");
    });
  

• hover 当鼠标滑入$()选中的所有标签时，执行hover中的第一个函数，当鼠标滑出时，执行第二个函数。

    $("#test").hover(function(){
        alert("鼠标进入");
    },function(){
        alert("鼠标离开");
    });
  

• jQuery链式操作

  传统写法
  var div = document.getElementById("test");
  div.style.color = "red";
  div.style.width = "20px";

  JQ链式写法
  $("test").css("color","red").css("width","20px");