DOM（文档对象模型），DOM操作分3类： DOM－core（核心） HTML—DOM CSS—DOM
DOM—core ，js中的 ： document.getElementById() document.getElementsByTagName() document.getElementsByName(); getAttribute() setAttribute();
HTML—core：
CSS—core ：获取和设置style对象的各种属性 element.style.color = "red";
1、DOM的加载：
在js中，为了让页面先加载完，(否则 document.getElementById--这些找不到元素)，使用window.onload 事件，但是这个事件有2个问题，1、JS中要等到所有的资源加载完毕（包括外部资源：图片 或者flash资源）才能执行，太耗费时间，2、JS中window.onload会被后面的同名函数覆盖掉，
但是jquery中，用$(document).ready(function(){--}) 简写 $(function(){--}) 解决了这两个问题，jquery中，只需等DOM结构加载完就OK，不用考虑外部资源，后面的 $(function(){--})不会覆盖，只是按照顺序进行执行。
要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别
$('div','li')是$(子，父)，是从父节点里找子，而不是找li外面的div
$('div , li')才是找所有的div和li，之间不存在父子关系
$('div li') 是找div里面所有li，包括子级，孙子级，总之就是div里面所有li，不管有几层关系
1、查找元素节点：
通过的jquery选择器来查找：var l = $("ul li:eq(2)")。text() 获取ul中的第3个li元素里面的文本内容
2．查找属性节点：
jquery选择器查找到元素后，通过attr()来查找它的属性的值。attr()参数可以是一个，也可以是两个。一个表示 是查询，2个表示 是赋值。
//<div id=”myDiv” title=”hello”>123</div> $(“#myDiv”).attr(“title”); //hello
3、创建节点：
（1）创建一个<li>新元素。 var l= $("<li></li>")，将这个新元素插入到文档中： $("ul").append(l);
var $li1 = $(“<span></span>”); //传入元素标记，自动包装并创建第一个li元素对象
var $li2 = $(“<span></span>”); //第二个,创建时需要遵循XHTML规则（闭合、小写）
$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素
$(“#myDiv”).append($li2); //结果：<div id=”myDiv”><span></span><span></span></div>
$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^
注意：（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。
（2）当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个<p>元素，可以用$("<p/>")或者$("<p></p>")，但不要使用$("<p>")或者大写的$("<P/>")。
4、创建文本节点：
时需要为创建的元素节点添加文本内容：
$("<li>香蕉</li>") $("<li>茄子</li>")
var $li1 = $(“<span>first</span>”);
var $li2 = $(“<span>second</span>”);
$(“#myDIv”).append($li1).append($li2);
// 结果：<div id=”myDiv”><span>first</span><span>second</span></div>5、创建属性节点：
var $li1 = $(“<span title=”111″>first</span>”);
var $li2 = $(“<span title=”222″>second</span>”);
$(“#myDIv”).append($li1).append($li2);
// 结果：<div id=”myDiv”><span title=”111″>first</span><span title=”222″>second</span></div>6、插入节点：
append():向每个匹配的元素内部追加内容； <p>你好！</p> $("p").append("<span>好想你</span>"); 结果： <p>你好！<span>好想你</span></p>
appendTo():将匹配的元素追加到指定的元素中例如： $('a').appendto('b')是将a追加到b中 $("<span>好想你</span>").appendTo("p"); 结果： <p>你好！<span>好想你</span></p>
prepend():向每个匹配的元素内部前置内容； <p>你好！</p> $("p").prepend("<span>好想你</span>"); 结果： <p><span>好想你</span>你好！</p>
prependTo():将所有匹配的元素前置到指定的元素中。
after():在每个匹配的元素之后插入内容。 <p>你好！</p> $("p").after("<span>好想你</span>"); 结果： <p>你好！</p><span>好想你</span>
insertAfter():将所有匹配的元素插入到指定的元素后面。 $('a').insertAfter('b') 将a追加到b后面 $("<span>好想你</span>").insertAfter("p"); 结果： <p>你好！</p><span>好想你</span>
before():在每个匹配的元素之前插入内容
insertBefore():将所有匹配的元素插入到指定的元素的前面
$(“#myDiv”).append(“<span></span>”); //往id为myDiv的元素插入span元素
$(“<span></span>”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素$(“#myDiv”).prepend(“<span></span>”); //往id为myDiv的元素内最前面插入span元素
$(“<span></span>”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面$(“#myDiv”).after(“<span></span>”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）
$(“<span></span>”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）$(“#myDiv”).before(“<span></span>”); //往id为myDiv的元素前面插入span元素（同级，不是子元素）
$(“<span></span>”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。
7、删除节点：
jQuery提供了三种删除节点的方法，即remove()，detach()和empty()。
1．remove()方法 从DOM中删除所有匹配的元素，
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。
$('ul li:eq(2)').remove(); //获取元素<ul>中第二个<li>后，从网页中将其删除
var re = $('ul li:eq(2)').remove(); re.appendTo("ul"); 把刚才删除的节点 又添加到ul中，
remove()也可以通过传递参数来选择性地删除元素 $("ul li").remove("li[title=菠萝]"); //删除 ul 中title是菠萝的 li
2、detach()方法，也是从DOM中去掉所有匹配的元素，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
3、empty()方法，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
8、复制节点：
$('ul li').click(function(){
$(this).clone().appendTo("ul"); //复制当前节点，并追加到<ul>中
})
clone(true):表示复制元素的同时复制改元素所绑定的事件。
9、替换节点：
将网页中“<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>”替换成“<strong>你最不喜欢的水果是？</strong>”
replaceWith()方法 将所有匹配的元素都替换成HTML或者DOM元素 $('p').replaceWith("<strong>你最不喜欢的水果</strong>");
replaceAll()方法 改方法颠倒了replaceWith的操作 $("<strong>你最不喜欢的水果</strong>").replaceAll("p");
注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
10、 包裹节点：
将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。$("<strong>").wrap("<b></b>"); //用b标签将strong标签包裹起来。 <strong>你最喜欢的水果。</strong>
结果： <b><strong>你最喜欢的水果。</strong></b>
warpAll()方法：将所有的元素用其他标记全部包裹起来。 $("<strong>").wrapAll("<b></b>"); 将多个strong 元素 放到一个<b></b> 中，
warpInner()方法：将每一个匹配元素的子内容用其他标记包裹起来 $("<strong>").wrapInner("<b></b>"); 结果： <strong><b>你最喜欢的水果。</b></strong>
11、属性操作：
1、获取属性和设置属性：
$('p');.attr("title");//获取<p>元素的title属性 $('p').attr("title","your title"); //设置单个属性; $('p').attr({"title":"your title","name":"your name"}); //将一个”名/值”形式的对象设置为匹配元素的属性
例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法
2、删除属性 removeAttr()方法 $('p').removeAttr("title"); //删除<p>元素的属性title;
12、样式操作：
<p class="test" title="一个标题" >这是一个小测试</P>
12、1 获取样式和设置样式：
$('p').attr("class"); //获取<p>元素的Class ;(获得class的名称)--test
$("p").attr("class","high"); //设置<p>元素的样式为"high"，即替换已有的样式。
12、2 追加样式
$("p").addClass("high"); //给<p>元素追加样式"high”；
12、3 移除样式
$("p").removeClass("high"); //移除<p>元素的样式"high"; removeClass（）当它不带参数时，就会将class的值全部删除，
12、4 切换样式，交替执行代码
toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它；如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。
$("toggleBtn").toggle(function(){ //code 显示元素 },fucntion(){ //code 隐藏元素 })
jQuery还提供了一个toggleClass()方法控制样式上的重复切换。
12、5 判断是否含有样式
$("p").hasClass("high"); //判断<p>元素是否含有样式"high";如果有，则返回true，否则返回false。
这个方法是为了增强代码可读性而产生的。在jQuery内部实际上是调用了is()方法来完成这个功能的。该方法等价于如下代码：$("p").is(".another");
13、设置和获取HTML、文本和值：
1. html()方法：读取或设置某个元素的HTML内容 $("p").html(); //获取<p>元素的html代码 $("p").html("<strong>你最喜欢的水果是？</strong>"); //设置<p>元素的html代码。
2. text()方法：该方法类似与javascript中的innerText属性，用来设置或读取某个元素中的文本内容。
$("p").text(); //获取<p>元素的文本内容； $("p).text("你最喜欢的水果是？"); //设置<p>元素的文本内容为“你最喜欢的水果是？”
3. val()方法：该方法类似与javascript中的value属性，用于获取或设置某个元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。
14、遍历节点：
1. children()方法：该方法用于取得匹配元素的子元素集合，只考虑子元素，不考虑其他任何后代元素。
2. next()方法：用于取得匹配元素后面紧邻的同辈元素。
3. prev()方法：用于取得匹配元素前面紧邻的同辈元素。
4. siblings()方法：用于取得匹配元素前后的同辈元素。
5. closet()方法：用于取得最近的匹配元素
还有很多，在js包装集 中有详细的说明
15、CSS-DOM操作
1. css()方法。
$("p").css("color"); //获取p元素的 color 属性
$("p").css({"color":"red","width":"12px"}); //设置多个样式。
$("p").css("color":"red"); //设置单个样式。
（1）如果值是数字，将会被自动转化为像素值。
（2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：
$("p").css({ fontSize : "30px"，backgroundColor : "#888888" })
如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。
总之建议大家加上引号，养成良好的习惯。
$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）
$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
$(“#myDiv”).height(); //同上（实际高度）$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
$(“#myDiv”).width(); //同上（实际宽度）2. offset()方法：获取当前元素在当前视窗的相对偏移，其中返回的对象包括两个属性，即top和left，它只对可见元素有效。
var offset=$("p").offset(); var left=offset.left; var top=offset.top;
var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量 alert( offset.top + “|” + offset.left );
3. position()方法：获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移量，也返回top和left属性。
var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert( offset.top + “|” + offset.left );4. scrollTop()方法和scrollLeft()方法:这两个方法分别是获取元素的滚动条距顶端的距离和距左侧的距离
$(“#txtArea”).scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离
还有2个 小例子，后面会 添加的
