一、jq与dom互转
1.jq->dom
提供了两种方法，[index]或get(index)
- var $cr = $("#cr"); //jq obj ,jq对象前面是加上$的
var cr = $cr[0]; // dom obj
alert(cr.checked); - 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 |
选取所有<input>,<textarea>,<select>,<button>元素 |
单个元素 |
:text |
选取所有的单行文本框 | 单个元素 |
:password |
选取所有密码框 | 集合元素 |
:radio |
选取所有单选框 | 集合元素 |
:checkbox |
选取所有多选框 | 集合元素 |
:submit |
选取所有的提交按钮 | 单个元素 |
:image |
选取所有图像按钮 | 集合元素 |
:reset |
选取所有重置按钮 | 集合元素 |
:button |
选取所有按钮 | 集合元素 |
:file |
选取所有上传域 | 集合元素 |
:hidden |
选取所有不可见元素 | 集合元素 |
