区分DOM对象和jQuery对象：
DOM对象：可以通过getElementsByTagName或者getElementById获得元素节点，这样得到的DOM元素就是DOM对象。可以使用JavaScript方法：
var domObj = document.getElementById("id");//获取DOM对象 var objHTML = domObj.innerHTML;
jQuery对象是通过jQuery包装DOM对象后的对象，这个对象可以调用jQuery的方法。
$("#foo").html();
//等价于
document.getElementById("foo);
$("#foo")与document.getElementById("foo);获得的饿对象并不相同。前者获得的是jQuery对象，后者获得的是DOM对象。
将jQuery对象转换为DOM对象：[index]或get(index)
var $cr = $("#cr");//jQuery对象 var cr = $cr[0];//DOM对象 var crr = $cr.get(0);//DOM对象
将DOM对象转换为jQuery对象：使用$()将DOM对象包起来。
var cr = document.getElementById("cr"); var $cr = $(cr);//将DOM对象转换成jQuery对象
示例：必须选中checkbox才能提交的功能：
DOM判断：cr.checked判断是否被选中
$(function(){ var $cr = $("#cr"); var cr = $cr[0]; $cr.click(function(){ if(cr.checked){ alret("OK!"); } }); });
jQuery判断：is(":checked")
$(function(){ var $cr = $("#cr"); $cr.click(function(){ if($cr.is(":checked"){ alret("OK!"); } }); });
避免命名冲突：
jQuery.noConflict();//交出$控制权 (function($){ $(function(){ $("p").click(funciton(){ //... }); }); })(jQuery); $("pp").style.display = "none";
$();获得的永远是jQuery对象，因此不能如下：
if($("#id"){//这里的条件是个对象，不能判断 //... }
可以如下改动：判断对象的长度，也可以转换成DOM对象来判断
if($("#id").length > 0){//判断对象长度 //... } if($("#id")[0]){//转换成DOM对象 //... }
选择器：
基本选择器：
$("#test")//id选择器
$(".test") //class选择器
$("p")//元素名称选择器
$("*")//选择所有元素
$("div,span,p.myClass")//选取这些元素的集合
层次选择器：通过DOM元素的层次关系获得特定元素，如后代元素、子元素、相邻元素和兄弟元素等。
$("div span")//选取div里的所有<span>元素 中间空格,后代元素
$("div > span")//选取div里的子元素，与后代元素的区别要注意
$(".one + div")//选取class为one的下一个<div>元素 只选取one后面的一个，可以用next()来代替$(".one").next("div");
$("#two~div")//选取id为two的元素后面的所有<div>兄弟元素,可以用nextAll来代替$(".two").nextAll("div");
过滤选择器：
1.基本过滤选择器
| 选择器 | 描述 | 示例 |
| :first | 选取第一个元素 | $("div:first")选取所有<div>元素的第一个<div>元素 |
| :last | 选取最后一个元素 | $("div:last")选取所有<div>元素的最后个<div>元素 |
| :not(selector) | 去除所有与给定浏览器匹配的元素 | $("input:not(.myClass)")选取class不是myClass的<input>元素 |
| :even | 选取是偶数的所有元素，从0开始 | $("input:even") |
| :odd | 选取是奇数的所有元素，从0开始 | $("input:odd") |
| :eq(index) | 选取索引等于index的元素(index从0开始) | |
| :gt(index) | 大于 | |
| :lt(index) | 小于 | |
| :header | 选取所有的标题元素 | |
| :animated | 选取当前正在执行动画的所有元素 |
2.内容过滤选择器:
| :contains(text) | 选取含有文本内容“text”的元素 | $("div:contains("me"))选取含有文本me的<div>元素 |
| :empty | 选取不包含子元素或者文本为空的元素 | |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | $("div:has(p)")选取含<p>元素的<div> |
| :parent | 选取含子元素或者文本的元素 | $("div:parent")选取拥有子元素的<div> |
3.可见性过滤选择器
| :hidden | 选取所有不可见的元素 | 选取不可见元素，包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;"> |
| :visible | 选取所有可见的元素 | $("div:visible")选取所有可见的<div>元素 |
4.属性过滤选择器：通过元素的属性来获取相应的元素
| [attribute] | 选取拥有此属性的元素 | $("div[id]")选取所有拥有id的<div> |
| [attribute=value] | 选取所有属性值为value的元素 | $("div[title=test]")选取所有title为test的<div> |
| [attribute=!value] | 选取所有属性值不等于value的元素 | |
| [attribute=^value] | 以value开始 | |
| [attribute=$value] | 以value结束 | |
| [attribute=*value] | 含有value | |
| [][][] | 合并这些条件 |
5.子元素过滤器：
6.表单对象属性过滤选择器：对表单元素进行过滤
| :enabled | 选取所有可用的元素 | |
| :disabled | 选取所有不可用的元素 | |
| :checked | 选取所有被选中的元素(单选，复选) | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | $("select :selected")选取所有被选中的选项元素 |
7.表单选择器：
| :input | 选取所有<input><textarea><select><button> | |
| :text | 选取所有的单行文本框 | |
| :password | ||
| :radio | ||
| :checkbox | ||
| :submit | ||
| :image | ||
| :reset | ||
| :button | ||
| :file | ||
| :hidden |
选择器中的特殊字符转义：
<div id="id#b">test</div> <div id="id[1]">test</div>
js：
$("$id\\#b");//转义
$("$id\\[1\\]");
空格对选择器的影响：
var $t_a = $(".test :hidden");//class为test的隐藏元素 var $t_a = $(".test:hidden");//隐藏的class为test的元素
DOM分类：
1.DOM Core
getElementById()、getElementByTagName()、getAttribute()、setAttribute()等。
2.HTML-DOM
docuemnt.forms;//froms对象,获取表单对象的方法 element.src; //获取src属性
3.CSS_DOM
element.style.color = "red";
插入节点的方法：
append():向每个匹配元素的内部追加元素，内部
$(A).appendTo(B):将匹配的元素A追加到B，内部
prepend():追加内容在匹配元素的最前面。内部
$(A).prependTo(B):将匹配的元素A追加到B元素中，在B元素的最前面。内部
after():在每个匹配的元素之后插入内容。$(A).after(B),B放入A后面， 外部
$(A).insertAfter(B):将A放入到B的后面，外部
before():插入到指定匹配元素的前面，外部
$(A).insertBefore(B):将A插入到B的前面
删除节点的方法：
remove():删除节点
empty():清空节点
复制元素：clone()
$("ul li").click(function(){
$(this).clone().appendTo("ul");//赋值当前单击的节点追加到ul中
})
深度复制:此时复制的节点也有了被复制元素绑定的事件，同样可以复制了。
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");//赋值当前单击的节点追加到ul中
})
替换节点：replaceWith() replaceAll()方法功能相同，方向颠倒。
$("p").replcaeWith("<strong>free</strong>");用后面的free替换所有p
$("<strong>free</strong>").replcaeWith("<p>");用后面的free替换所有p
包裹节点：wrap() wrapAll() wrapInner()
$(A).wrap(B)：用B分别包裹每一个A元素。
$(A).wrapAll(B)：用一个B包A的全部包裹。
$(A).wrapInner(B)：用B包裹A的子内容。
this.defaultValue:当前文本框的默认值
遍历元素：
children():只找出子元素，而不考虑后辈元素。
next():匹配元素后面紧邻的同辈元素。
prev():匹配元素前面紧邻的同辈元素。
siblings():匹配元素前后所有的同辈元素。