JQ常用选择器

基本选择器

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