jQuery中的DOM操作学习笔记

首先构建一个网页，因为每张网页都能用DOM表示出来，每一份DOM都可以看作一个DOM树。

//省略其他代码
<p title = "选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
<ul>
//省略其他代码

查找节点

1、查找元素节点

var $li = $("ul li:eq(1)");     // 获取ul里第二个节点
var $li_txt = $li.text();       //获取元素的文本内容

2、查找属性节点

使用attr()获取各种属性的值，参数可以是一个也可以是两个，当一个时，是要查找的属性名字。

var $para = $("p");
var $p_txt = $para.attr("title");    //获取元素节点属性title

创建节点

1、创建元素节点

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

var $li = $("<li></li>");   //创建元素
$("ul").append($li);     //添加到节点中，使之能在网页中显示

2、创建文本节点

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

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法添加到文档中。

3、创建属性节点

创建属性节点与创建文本节点类似，也是直接在创建节点时一起创建。

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

插入节点

append(),向每个匹配的元素内部追加内容，$(“p”).append(“你好“)。
appendTo(),将所有匹配的元素追加到指定元素中，实际上是$(“A”).append(“B”)的颠倒，将A追加到B。 prepend(),向每个匹配的元素内部前置内容。$(“p”).prepend(“你好“)，结果：

你好我想

prependTo(),颠倒prepend()。
after(),在每个匹配的元素之后插入内容。$(“p”).after(“ “),结果：

。
insertAfter(),颠倒after()。
before()，在每个匹配的元素之前插入内容。
insertBefore()，颠倒before()。
这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原来的DOM元素进行移动。

删除节点

remove()，删除所有的匹配元素，该节点的所有后代节点全部被删除，返回值是一个指向已被删除的节点的引用，因此以后可以继续使用。

var $li = $("ul li:eq(1)").remove();   //获取第二个li节点，将他从网页中删除
$li.appendTo("ul");         //把刚才删除的节点又重新添加到ul元素中
$("ul li").remove("li[title!=菠萝]")；    //将title不等于菠萝的li元素删除

detach()，也是从DOM中去掉所有匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。

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

empty()，清空节点，他能清空元素中的所有后代节点，是清空元素里的所有内容。

复制节点

$(ul li).click(function(){
    $(this).clone().append("ul");  //复制当前点击的节点，并将它追加到ul中
})

在clone（）中传入一个参数true，表示复制元素的同时复制元素所绑定的事件。

替换节点

replaceWith(),将所有匹配的元素都替换成指定的HTML或者DOM。
replaceAll()，颠倒的replaceWith()。
注意：如果元素已经绑定了事件，替换之后原先绑定的事件将会消失。

包裹节点

wrap()，将某个节点用其他标记包裹起来。

$("strong").wrap("<b></b>");  //<b><strong></strong></b><br/><b><strong></strong></b>

wrapAll()，将所有匹配的元素用一个元素来包裹，如果被包裹的元素间有其他元素，其他元素会被放到包裹元素之后。wrap()是将所有元素单独包裹。

$("strong").wrapAll("<b></b>");  //<b><strong></strong><br/><strong></strong></b>

wrapInner()，将每一个匹配元素的子元素（包括文本节点）用其他结构化的标记包裹起来。

属性操作

$("p").attr("title","one");   //设置单个的属性值
$("p").attr({"title":"one","name":"two"});    //设置多个属性

removeAttr(),删除属性。

样式操作

$("p").addClass("another");  //给p元素追加“another”类，不会覆盖原来的class属性，变为两个属性值

css有如下两条规则：
（1）、如果给一个元素添加多个class值，那么久相当于合并了他们的样式；
（2）、如果有不同的class设定了同一样式属性，则后者覆盖前者。

$("p").removeClass("high");   //移除p元素中值为high的class
$("p").remove("high another");   //移除多个class名
$("p").remove();   //移除p元素的所有class

$toggleBtn.toggle(function(){     //toggle()，控制行为上的重复切换
    //代码1，显示元素
    }，function(){
        //代码2隐藏元素
})

如果元素原来是显示的，则隐藏他；如果元素原来是隐藏的，则显示他。
hasClass()，判断元素中是否含有某个class，如果有则返回true，否则返回false。

设置和读取HTML、文本和值

1、html()，读取或设置某个元素的html内容，类似于innerHTML属性；
2、text()，读取或设置某个元素中的文本内容，类似于innerText属性；
3、val()，获取和设置元素的值，类似于value属性。

$("#address").focus(function(){
    var txt_value = $(this).val();
    if(txt_value == "请输入邮箱地址"){
            $(this).val("");
     }
});
$("address").blur(function(){
    var txt_value = $(this).val();
    if(txt_value == ""){
        $(this).val("请输入邮箱地址")；
    }
});

val()能使select、checkbox、radio相应的选项被选中。

遍历节点

childern()，获取匹配元素的子元素集合（不考虑其他后代元素）；
next()，获取匹配元素后面紧临的同辈元素；
prev()，获取匹配元素前面紧邻的同辈元素；
siblings()，取得匹配元素前后所有的同辈元素；
closest()，取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没都没找到，返回一个空jQuery对象。