Jquery->DOM
(1).使用[index]方式
var $cr = $('#cr');
var cr = $cr[0];
(2).使用get(index)方法
var $cr = $('#cr');
var cr = $cr.get(0);
DOM->Jquery
(1).使用$(DOM对象)方式，$()相当于Jquery的对象工厂
var cr = document.getElementById('cr');
var $cr = $(cr);
选择器
基本选择器（一般用于快速选择节点）
$('#cr/.cr/div/*/cr, #cr').css('background','#FFAABB');
后代选择器（后代包含子还包含孙子）
$('div span')
子元素选择器（只选中儿子，不选择孙子）
$('body > div')
相邻选择器（选择相邻的所有span元素）
$('div + span')
同辈选择器（选择同辈的所有span元素）
$('div ~ span')
过滤选择器
$('div:first')
$('div:last')
$('div:not(.div1)')
$('div:odd')
$('div:even')
$('div:eq(index)')
$('div:gt(index)')//选取索引大于index的div元素
$('div:lt(index)')//选取索引小于index的div元素
$(':header')//选取所有标题元素
$(':animated')//选取当前正在执行动画的元素
$(':focus')//选取当前获取焦点的元素
$('div:contains(text)')//选取文本含有text的div元素
$('div:empty')//选取不含子元素或者文本元素的空div元素
$('div:has(p)')//选取含有p标签的div元素
$('div:parent')//选取含有子元素或文本的div元素
$(':hidden')//选取文档流中不可见的元素
$('div:visible')//选取所有可见元素
$('div[title]')//选取拥有title属性的div元素
$('div[title=test]')//选取title属性值为test的div元素
$('div[title!=test]')//选取title属性值不等于test的div元素
$('div[title^=te]')//选取title属性值以te开头的div元素
$('div[title$=st]')//选取title属性值以st结尾的div元素
$('div[title*=es]')//选取title属性值含有es的div元素
$('div[title]=en')//选取title属性值是en或者前缀(指en后面有-即-)是en的div元素
$('div[title~=uk]')//选取title属性值中用空格分隔开并含有uk的div元素
$('div[attribute1][attribute1][attribute1]')//选取复合属性满足条件的元素
$('div :nth-child(index)')//选取所有div元素中指定条件index的子元素(index:n/even/odd/3n/3n+1)
$('div :first-child')//选取所有div元素中的第一个子元素
$('div :last-child')//选取所有div元素中的最后一个子元素
$('div :only-child')//选取所有div元素中唯一的子元素
$('input :enabled')//选取所有可用的input元素
$('input :disabled')//选取所有不可用的input元素
$('input :checked')//选取所有被选中的input元素
$('select option:select')//选中所有被选中select中的option元素
$(':input')//选中所有的input/textarea/select/button元素
$(':text')//选中所有的单行文本框
$(':password')//选中所有的密码框
$(':radio')//选中所有的单选框
$(':checkbox')//选中所欲的复选框
var $li_i = $("<li></li>")//创建元素节点
append() prepend()//向每个匹配元素的内部追加后置/前置元素 内部插入节点
appendTo() prependTo()//将所有匹配的元素，追加到指定元素中
after() before()//在匹配的元素之后插入内容
insertAfter() insertBefore()//将所有匹配的元素插入到指定元素后面
remove()//删除节点（包含后代节点），返回引用
detach()//删除节点（效果同上），但不会将匹配的元素从对象中删除，因此之前绑定的时间和附加的数据等都会保留
empty()//不是删除节点，是清空节点，能够清空元素中的所有后代节点，保留原节点
clone()//克隆当前选择器选中的节点，支持连贯操作，如$(this).clone().appendTo('xxx');
replaceWith()//将所匹配的所有节点及其后代节点替换成指定的HTML或DOM元素 先匹配 后替换创造
replaceAll()//将工厂创造的HTML或DOM元素覆盖匹配到的节点及后代元素上 先创造 后匹配替换
$("strong").wrap("<p></p>");//将strong标签使用p标签包裹起来,使用wrap(),如果匹配的到多个元素,将在匹配的每个元素外面单独包裹
$("strong").wrapAll("<p></p>");//将匹配元素作为一个整体，包裹一个创造的p标签，如果包裹的元素之间有其他元素，其他元素会被放到包裹元素之后
$("strong").wrapInner("<p></p>");//包裹匹配元素的子元素(包含文本节点)
$("p").attr("title");//获取属性
$("p").attr("title","标题");//设置属性
$("p").attr("title":"my title","name":"zhao","age":10);//设置多个属性 使用同一个函数实现获取和设置值的函数还有"html()/text()/height()/width()/val()/css()
$("p").removeAttr("title");//移除属性
$("p").attr("class");//获取类
$("p").attr("class","otherClass");//设置类
$("p").addClass("two");//添加类
$("p").removeClass("one");//移除类
$("p").toggleClass("two");//切换类
$("p").hasClass("one");//判断是否含有某个类
html()方法类似于innerHTML;用于读取和设置某个元素中的"HTML内容"(指HTML标签及文本)
$("p").html();
$("p").html("<strong>你最喜欢的水果是?</strong>");
注:可用于XHTML不可用于XML
text()方法类似于innerText;用于读取或者设置某个元素中的文本内容(不包含标签)
$("p").text();
$("p").text("你最喜欢的水果是?");
注:innerText属性并不能Firefox浏览器下运行,而JQuery的text()方法所有浏览器都适用,并且对html和xml都有效
val()方法类似于value属性;用于读取或者设置某个元素的值
$("p").val();
$("p").val("这是P标签");
注:除了用于获取和设置value值,还可以改变选中项.选中多项时候,用,分隔
$("p").val(["check2","check3"]);
1).children()方法用于获取"匹配元素"的"子元素集合"
$("p").children().length;//获取p元素的子元素的个数
注:children()只考虑子元素,不考虑后代元素
2).next()方法用于取得匹配元素后面紧邻的同辈元素
$("p").next();//获取p元素紧邻后面的同辈元素
3).prev()方法刚发用于取得匹配元素前面紧邻的同辈元素
$("p").prev();//取得p元素前面紧邻的同辈元素
4).siblings()方法取得匹配元素前后的所有同辈元素
$("p").siblings();// 取得同辈元素
5).closest()方法用于获取最近的匹配元素
6).parent()
7).parents()
css()方法获取和设置元素的样式属性
$("p").css("color");
$("p").css("color","red");
注:和attr()一样,可以设置多个样式属性 $("p").css({"color":"red","background":"#000"});
透明度可以直接用 $("p").css("opacity");
offset()用于获取元素在当前视窗的相对偏移
var offset = $("p").offset();
var left = offset.left;
var top = offset.top;
position()用于获取相对于最近的一个position样式属性的设置为relative或者absolute
var position = $("p").position();
var left = position.left;
var top = position.top;
scrollTop()方法和scrollLeft()方法用于获取元素的滚动条距顶端的距离和左侧距离
var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
