jQuery中的DOM操作

　　创建元素节点

　　创建元素节点可以使用jQuery的工厂函数$()来完成。格式:$(html)。

　　$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

　　例：创建一个<li>元素，并插入文档。

var $li = $("<li title='香蕉'>香蕉</li>");
$("ul").append($li);

　　插入节点

　　动态创建完HTML元素还需要将新创建的元素插入文档中才有用。将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。上面用了append()，它会在元素内部追加新创建的内容。将新创建的节点插入某个文档的方法并非只有一种，在jQuery中还提供了几种方法。

　　♣ append

　　描述：向每个匹配的元素内部追加内容。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("p").append("<b>你好</b>");
结果：
<p>我想说:<b>你好</b></p>

　　♣ appendTo

　　描述：将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("<b>你好</b>").appendTo("p");
结果：
<p>我想说:<b>你好</b></p>

　　♣ prepend

　　描述：向每个匹配的元素内部前置内容。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("p").prepend("<b>你好</b>");
结果：
<p><b>你好</b>我想说:</p>

　　♣ prependTo

　　描述：将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("<b>你好</b>").prependTo("p");
结果：
<p><b>你好</b>我想说:</p>

　　♣ after

　　描述：在每个匹配的元素之后插入内容。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("p").after("<b>你好</b>");
结果：
<p>我想说:</p><b>你好</b>

　　♣ insertAfter

　　描述：将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("<b>你好</b>").insertAfter("p");
结果：
<p>我想说:</p><b>你好</b>

　　♣ before

　　描述：在每个匹配的元素之前插入内容。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("p").before("<b>你好</b>");
结果：
<b>你好</b><p>我想说:</p>

　　♣ insertBefore

　　描述：将所有匹配的元素插入到指定元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面。

HTML代码：
<p>我想说:</p>
jQuery代码：
$("<b>你好</b>").insertBefore("p");
结果：
<b>你好</b><p>我想说:</p>

　　删除节点

　　如果文档中某一个元素多余，那么应将其删除。jQuery提供了三种删除节点的方法：remove(),detach()和empty()。

　　1.remove()

　　作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

　　例：删除<ul>节点中的第2个<li>元素节点。

$("ul li:eq(1)").remove();

　　当某个节点用remove()方法删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以以后再使用这些元素。如：

var $li = $("ul li:eq(1)").remove();
$li.appendTo("ul");

　　另外remove()方法也可以通过传递参数来选择性地删除元素。

$("ul li").remove("li[title!=香蕉]")；//将<li>元素中属性title不等于“香蕉”的<li>元素删除。

　　2.detach()

　　detach()和remove()一样，也是从DOM中去掉所有匹配的元素。这个方法也不会将匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$("ul li").click(function(){
    alert($(this).html());
})
var $li = $("ul li:eq(1)").detach();  //删除元素
$li.appendTo("ul");  //重新追加元素，发现它之前绑定的事件还在，如果使用remove()方法删除元素的话，那么之前绑定的事件将失效。

　　3.empty()

　　严格来说，empty()方法不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

$("ul li:eq(1)").empty(); //获取第2个<li>节点后，清空此元素里的内容，注意是元素里。

　　当运行代码后，第2个<li>元素的内容被清空了，只剩下<li>的默认的符号“·”。如：<li title="香蕉">香蕉</li>    执行结果：<li title="香蕉"></li>

　　复制节点

　　复制节点也是常用的DOM操作之一，如单击<li>元素后需要再复制一个<li>元素，可以使用clone()方法来完成。

$("ul li").click(function(){
    $(this).clone().appendTo("ul");
})

　　复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也需要复制功能，可以给clone()方法传递一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。

$("ul li").click(function(){
    $(this).clone(true).appendTo("ul");
})

　　

　　替换节点

　　jQuery提供了相应的方法进行节点的替换，即replaceWith()和replaceAll()。

　　replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素。例如将网页中的“<p>我喜欢吃香蕉</p>”替换成“<h1>我更喜欢吃苹果</h1>”。

$("p:contains(我喜欢吃香蕉)").replaceWith("<h1>我更喜欢吃苹果</h1>");

　　也可以使用replaceAll来实现，该方法和replaceWith()相同，只是颠倒了replaceWith()的操作。

$("<h1>我更喜欢吃苹果</h1>").replaceAll("p:contains(我喜欢吃香蕉)");

　　如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定。

　　包裹节点

　　如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。

$("p:contains(我喜欢吃香蕉)").wrap("<b></b>");

　　得到的结果：

<b><p>我喜欢吃香蕉</p></b>

　　包裹节点操作还有其他两个方法：wrapAll()和wrapInner()。

　　1.wrapAll()

　　该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()，wrap()方法是将所有的元素进行单独的包裹。

　　如：

<p>我喜欢吃香蕉</p>
<p>我喜欢吃香蕉</p>

$("p").wrap("<b></b>")的结果是
<b><p>我喜欢吃香蕉</p></b>
<b><p>我喜欢吃香蕉</p></b>

$("p").wrapAll("<b></b>")的结果是
<b>
<p>我喜欢吃香蕉</p>
<p>我喜欢吃香蕉</p>
</b>

　　如果被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后。

　　2.wrapInner()

　　该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。如：

<p>我喜欢吃香蕉</p>

$("p").wrapInner("<b></b>")的结果是
<p><b>我喜欢吃香蕉</b></p>

　　

　　属性操作

　　在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

　　获取属性和设置属性

　　如果要获取<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。

var $para = $("p");
var p_txt = $para.attr("title");

　　如果要设置<p>元素的属性title的值，也可以使用同一个方法，需要传递两个参数即属性名称和对应的值。

$("p").attr("title","我要吃苹果！");

　　如果需要一次性为同一个元素设置多个属性。

$("p").attr({"title":"我要吃苹果！","name":"hobby"});

　　jQuery中的很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。

　　删除属性

　　在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

　　如果需要删除<p>元素的title属性。

$("p").removeAttr("title");

　　jQuery1.6中新增了prop()和removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。

　　样式操作

　　追加样式

　　jQuery提供了专门的addClass()方法来追加样式。

$("p").addClass("another");

　　如果p元素原来拥有一个class，此时就拥有了两个class值，形式为<p class="class1 another"></p>，它将同时拥有class1和another的样式，如果有不同的class设定了同一样式的属性，则后者覆盖前者。

　　移除样式

　　如果用户单击某个按钮时，要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，作用是从匹配的元素中删除全部或者指定的class。

$("p").removeClass("another");

　　如果要把两个属性都删除，可以使用两次removeClass()方法

$("p").removeClass("another").removeClass("class1");

　　jQuery提供了更简单的方法。可以用空格的方式删除多个class名。

$("p").removeClass("class1 another")

　　当removeClass()方法不带参数时，就会将class的值全部删除。

　　切换样式

　　jQuery提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。

<p class="class1"></P>

$("p").toggleClass("another");
执行一次结果
<p class="class1 another"></P>
执行第二次
<p class="class1"></P>

　　不断执行，<p>元素的class的值就会在“class1”和"class1 another"之间重复切换。

　　判断是否含有某个样式

　　hasClass()可以用来判断元素中是否含有某个class，如果有则返回true，否则返回false。

　　判断<p>元素是否包含"another"的class：

$("p").hasClass("another");

　　设置和获取HTML、文本和值

　　1.html()

　　此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

　　读取：

<p title="最喜欢的水果是？"><strong>水蜜桃</strong></p>
var p_html = $("p").html();
alert(p_html);   //<strong>水蜜桃</strong>

　　设置：

$("p").html("<strong>哈密瓜</strong>")

　　2.text()

　　此方法类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

　　读取：

<p title="最喜欢的水果是？"><strong>水蜜桃</strong></p>
var p_html = $("p").text();
alert(p_html);   //水蜜桃

　　设置：

$("p").html("哈密瓜");

　　3.val()

　　此方法类似于JavaScript中的value属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

　　读取：

<input type="text" value="我爱吃西瓜"/>
var input_value = $("input").val();
alert(input_value);//我爱吃西瓜

　　设置：

$("input").val("我爱吃芒果")

　　遍历节点

　　1.children()

　　该方法用于取得匹配元素的子元素集合。

<html>
  <body>
    <p>我爱吃香蕉</p>
    <ul>
      <li>苹果</li>
      <li>橘子</li>
      <li>菠萝</li>
    </ul>
  </body>
</html>

var $p = $("p").children();
var $ul = $("ul").children();
alert($p.length); //0
alert($ul.length); //3

　　children()方法只考虑子元素而不考虑其他后代元素。

　　2.next()

　　该方法用于取得匹配元素后面紧邻的同辈元素。

var $p1 = $("p").next();

　　得到的结果是:

<ul>
  <li>苹果</li>
  <li>橘子</li>
  <li>菠萝</li>
</ul>

　　3.prev()

　　该方法用于取得匹配元素前面紧邻的同辈元素。

var $u1 = $("ul").prev();

　　得到的结果是:

<p>我爱吃香蕉</p>

　　4.siblings()

　　该方法用于取得匹配元素前后所有的同辈元素。

var $l1 = $("ul li:eq(1)");

　　得到的结果是:

<li>苹果</li>
<li>菠萝</li>

　　5.closest()

　　该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

　　比如，给点击的目标元素的最近的li元素添加颜色。

$(document).bind("click",function(e){
    $(e.target).closest("li").css("color","red");
})

　　6.parent(),parents()与closest()的区别

　　parent()：从父节点开始查找，获取集合中每个匹配元素的父级元素，parent()返回一个元素节点。

　　parents()：从父节点开始查找，获取集合中每个匹配元素的祖先元素，parents()返回多个父节点。

　　closest()：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

　　

　　CSS-DOM操作

　　CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

　　获取：

$("p").css("color");

　　设置：

$("p").css("color","red");

　　同时设置多个样式属性：

$("p").css("color"："red"，"backgroundColor","#888888");

　　♦ 如果值是数字，将会被自动转化为像素值。

　　♦ 在css()方法中，如果属性中带有"-"，如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法。

$("p").css({fontSize:"30px",backgroundColor:"#888888"})

　　如果加上了引号，既可以写"font-size",也可以写"fontSize".