锋利的jQuery学习笔记（4）-DOM操作
1. DOM操作的分类：
DOM Core:JavaScript中的getElementByID，getElementByTagName，getAttribute，setAttribute等方法都是其的组成部分。
HTML_DOM：如document.forms //HTML-DOM提供了一个forms对象；element.src //获取某元素的属性。
CSS_DOM:获取和设置style对象的各种属性，如element.style.color="red"。
2. jQuery中的DOM操作：
1.查找节点：
var $li=$('ul li:eq(1)'); //获取<ul>中第二个<li>节点
var li_txt=$li.text();
alert(li_txt);
2.创建节点属性：
var $para=$('p');
var p_txt=$para.attr("title");
alert(p_txt);
3. 创建节点：
3.1 创建元素节点：
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);
3.2 创建文本节点：
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>雪梨</li>");
$('ul').append($li_1);
$('ul').append($li_2);//链式操作：$('ul').append($li_1).append($li_2)
3.3 创建节点属性：
4. 插入节点
append():向每个匹配的元素内部追加内容；
appendTo():将匹配的元素追加到指定的元素中例如：$('a').appendto('b')是将a追加到b中
prepend():向每个匹配的元素内部前置内容；
prependTo():将所有匹配的元素前置到指定的元素中。
after():在每个匹配的元素之后插入内容。
insertAfter():将所有匹配的元素插入到指定的元素后面。
before():在每个匹配的元素之前插入内容
insertBefore():将所有匹配的元素插入到指定的元素的前面。
5. 删除节点
5.1 remove()方法
$('ul li:eq(2)').remove(); //获取元素<ul>中第二个<li>后，从网页中将其删除
$('ul li:eq(2)').remove("li[title!=菠萝]"); //支持通过传递参数选择性地删除某些元素。
5.2 empty()方法：清空节点内容，不是删除。
6. 复制节点
$('ul li').click(function(){
$(this).clone().appendTo("ul"); //复制当前节点，并追加到<ul>中
})
clone(true):表示复制元素的同时复制改元素所绑定的事件。
7. 替换节点
7.1 replaceWith()方法
将所有匹配的元素都替换成HTML或者DOM元素
$('p').replaceWith("<strong>你最不喜欢的水果</strong>");
7.2 replaceAll()方法
改方法颠倒了replaceWith的操作
$("<strong>你最不喜欢的水果</strong>").replaceAll("p");
8. 包裹节点
wrap()方法：将所有的元素用其他标记单独包裹起来。
$("<strong>").wrap("<b></b>"); //用b标签将strong标签包裹起来。
warpAll()方法：将所有的元素用其他标记全部包裹起来。
warpInner()方法：将每一个匹配元素的子内容用其他标记包裹起来。
9. 属性操作
9.1 获取属性和设置属性：
var $para=$('p');
var p_txt=$para.attr("title");//获取<p>元素的title属性
$('p').attr("title","your title"); //设置单个属性；
$('p').attr({"title":"your title","name":"your name"}); //将一个”名/值”形式的对象设置为匹配元素的属性
9.2 删除属性：removeAttr()方法
$('p').removeAttr("title"); //删除<p>元素的属性title;
10 样式操作
10.1 获取样式和设置样式：
var $p_class=$('p').attr("class"); //获取<p>元素的Class;
$("p").attr("class","high"); //设置<p>元素的样式为"high"，即替换已有的样式。
10.2 追加样式
$("p").addClass("high"); //给<p>元素追加样式"high”；
10.3 移除样式
$("p").removeClass("high"); //移除<p>元素的样式"high";
10.4 切换样式，交替执行代码
$("toggleBtn").toggle(function(){
//code 显示元素
},fucntion(){
//code 隐藏元素
})
10.5 判断是否含有样式
$("p").hasClass("high"); //判断<p>元素是否含有样式"high";
这个方式是为了增强代码可读性而产生的，在jquery内部实际上是调用了is()方法来完成这个功能的。改方法等价于如下代码：
$("p").is(".high"); //is(.+class)
11 设置和获取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属性，用于获取或设置某个元素的值。
<input type="text" id="address" value="请输入邮箱地址">/
$("#address").val(); //获取id=address文本框的值。
12. 遍历节点：
1. children()方法：该方法用于取得匹配元素的子元素集合，只考虑子元素，不考虑其他任何后代元素。
2. next()方法：用于取得匹配元素后面紧邻的同辈元素。
3. prev()方法：用于取得匹配元素前面紧邻的同辈元素。
4. siblings()方法：用于取得匹配元素前后的同辈元素。
5. closet()方法：用于取得最近的匹配元素
13. CSS-DOM操作
1. css()方法。
$("p").css({"color":"red","width":"12px"}); //设置多个样式。
$("p").css("color":"red"); //设置单个样式。
2. offset()方法：获取当前元素在当前视窗的相对偏移，其中返回的对象包括两个属性，即top和left，它只对可见元素有效。
var offset=$("p").offset();
var left=offset.left;
var top=offset.top;
3. position()方法：获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移量，也返回top和left属性。
4. scrollTop()方法和scrollLeft()方法:这两个方法分别是获取元素的滚动条距顶端的距离和距左侧的距离
