oliverhuang
oliverhuang

jquery笔记之选择器

一、jq与dom互转

1.jq->dom

提供了两种方法，[index]或get(index)

  1. var $cr = $("#cr"); //jq obj ,jq对象前面是加上$的
    var cr = $cr[0]; // dom obj
    alert(cr.checked);
  2. var $cr = $("#cr");
    var cr = cr.get(0);
    alert(cr.checked);

2.dom->jq

var cr = document.getElementById("cr");
var $cr = $(cr); //直接加上$()就转换成了jq obj了

.css() 修改元素css样式
.val() 修改元素value
.length 元素个数
.text()得到元素的内容

二、jquery选择器

jq选择器优势：
1.比默认javascript代码的简洁
2.支持css1到css3
3.完善的处理机制，即使元素不存在也不会报错

ps： 因为jq获取的是jq对象，而没法直接判断元素是否存在，要通过这个jq对象的长度或者转换成dom对象来判断元素是否存在，如：if($("#tt").length > 0)或者if($('#tt')[0])

元素是包含了#id .class 和元素的名

1.基本选择器（和css的选择器类似）

选择器 描述 返回
#id 匹配一个id 单个元素
.class 匹配一个类 集合元素
element 匹配元素名的元素 集合元素
* 匹配所有的元素 集合元素
selector1,selector2...selectorN 一次匹配多个元素 集合元素

2.层次选择器

选择器 描述 返回
$("ancestor descendant") 选取父代元素下的所有后代元素 集合元素
$("parent > child") 选取父代元素下的子代元素 集合元素
$("prev + next") prev后面的一个同辈的next元素 等价于next() 集合元素
$("prev ~ sblings") prev后面所有的同辈元素 等价于nextAll() 集合元素

后代元素和子代元素的区别：后代包括子代或者孙子代等元素，而子代元素只是指父代元素下的一层元素

siblings()方法和nextAll()方法的区别：前面一个是匹配所有的同辈元素，而后面的是匹配在这个元素之后的所有同辈元素

3.过滤选择器

1)基本过滤选择器

选择器 描述 返回
:first 选取第一个元素 单个元素
:last 选取最后一个元素 单个元素
:not(selector) 选取所有与给定选择器的不同的元素 集合元素
:even 选取索引为偶数的所有元素，从0开始 集合元素
:odd 选取索引为奇数的所有元素，从0开始 集合元素
:eq(index) 选取索引为index的元素，从0开始 单个元素
:gt(index) 选取索引大于index的元素，从0开始 集合元素
:lt(index) 选取索引小于index的元素，从0开始 集合元素
:header 选取所有标题元素 集合元素
:animated 选取所有执行动画的元素 集合元素
:focus 选取当前获得焦点的元素 集合元素

2)内容过滤选择器

选择器 描述 返回
:contains(text) 选取内容文本为text的元素 集合元素
:empty 选取不包含子元素或者文本为空的元素 集合元素
:has(selector) 选取含有selector元素的元素 集合元素
:parent 选取包含子元素或者文本的元素 集合元素

3)可见性过滤选择器

选择器 描述 返回
:hidden 选取所有不可见元素 集合元素
:visible 选取所有可见元素 集合元素

ps：:hidden是包含了css样式display为none的元素也包含了文本域 type 为hidden和visibility:hidden的元素

4)属性过滤选择器

选择器 描述 返回
[attribute] 选取拥有此属性的元素 集合元素
[attribute=value] 选取属性值为value的元素 集合元素
[attribute!=value] 选取属性值不为value的元素 集合元素
[attribute^=value] 选取属性值以value开始的元素 集合元素
[attribute$=value] 选取属性值以value结束的元素 集合元素
[attribute*=value] 选取属性值中含有value的元素 集合元素
[attribute =value] 选取属性值等于给定字符串或者以给定字符串为前缀 集合元素
[attribute~=value] 选取属性用空格的分隔值中包含给定value的元素 集合元素
[attribute1][attribute2][attributeN] 选取都拥有给定所有属性的元素 集合元素

5)子元素过滤选择器

选择器 描述 返回
:ntg-child(index/even/odd/equation) 选取每个父元素下第index或者奇偶的元素 集合元素
:first—child 选取每个父元素下面的第一个子元素 集合元素
:last-child 选取每个父元素下面的最后一个元素 集合元素
:only-child 选取元素下面唯一的一种元素 集合元素

ps: :nth-child(3n+1) n从1开始

6)表单对象属性过滤选择器

选择器 描述 返回
:enabled 选取所有可用的元素 集合元素
:disabled 选取所有不可用的元素 集合元素
:checked 选取所有被选中的元素（checked） 集合元素
:selected 选取所有被选中的元素 （selected） 集合元素

4.表单选择器

选择器 描述 返回
:input 选取所有,