jQuery DOM操作

jQuery中DOM基本操作

jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQuery DOM操作。

【查】查找结点

查找节点非常容易，使用选择器就能轻松完成各种查找工作。

就是利用我们前面学习的选择器来查找节点的。

例：查找元素节点p返回p内的文本内容。
$("p").text();
例：查找元素节点p的属性返回属性名称对应的属性值
$("p").attr("title"); //返回p的属性title的值。
$("p").prop("title");//返回p的属性title的值。
attr与prop区别
attr获取和设置自定义属性。
prop获取和设置w3c定义的属性。

【增】创建节点

html节点一般就包括节点本身，节点的属性、节点内部的文本、节点内部的子节点。

创建元素节点

创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。

先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，

格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。

创建一个元素节点JQuery代码如下：

　$li1=$("<li></li>")

代码返回$li1就是一个由DOM对象包装成的jQuery对象。把新建节点添加到DOM树中JQuery代码如下：

　$("ul").append($li1); 

添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

append()方法是添加DOM节点方法。

创建文本节点

使用JQuery的工厂函数$()同样能够创建文本节点，创建文本节点的JQuery代码如下：

$li2=$("<li>苹果</li>");

代码返回$li2就是一个由DOM对象包装成jQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：

$("ul").append($li2);

添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。

创建属性节点

创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：

$li3=$("<li title='榴莲'>榴莲</li>");　　　

代码返回$li3也是一个由DOM对象包装成jQuery对象，把新建的属性节点添加到DOM树中jQuery代码如下：

$("ul").append($li3);

添加后页面中能看到"·榴莲"，右键查看页面源码发现新加的属性节点有title='榴莲'属性。

无论html结构多么的复杂，都可以通过上面的方法创建出来。

【插】插入节点

动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，如下：

父子前后关系：append()、appendTo()、prepend()、prependTo()

兄弟前后关系：after()、insertAfter()、before()、insertBefore()

append()方法

append()方法向匹配的元素内部追加内容方法如下：

$("target").append(element);


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

该方法查找ul元素，然后向ul中添加新建的li元素。

appendTo()方法

appendTo()方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒[操作主题的颠倒并非操作结果]操作。

$(element).appendTo(target);


$("<li title='荔枝'>荔枝<li>").appendTo("ul");

该方法新建元素li，然后把li添加到查找到的ul元素中。

prepend()方法

prepend()方法将每匹配的元素内部前置要添加的元素，方法如下：

$(target).prepend(element);


$("ul").prepend("<li title='芒果'>芒果</li>")

该方法将查找元素ul然后将新建的li元素作为ul子节点，且作为ul的第一个子节点插入到ul中。

prependTo()方法

prependTo()方法将元素添加到每一个匹配的元素内部前置，方法如下：

$(element).prependTo();


$("<li title='西瓜’>西瓜</li>").prependTo("ul");

该方法将新建的元素li插入到查找到的ul元素中作为ul的第一个子节元素。

after()方法

after()方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。

$(target).after(element);


$("p").after("<span>新加段新加段新加段新加段新加段</span>");

方法将查找节点p，然后把新建的元素添加到span节点后面做为p的兄弟节点。

insertAfter()方法

insertAfter()方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。

$(element).insertAfter(target);


$("<p>insertAfter操作</p>").insertAfter("span");

方法将新建的p元素添加到查找到目标元素span后面，做为目标元素后面的第一个兄弟节点。

before()方法

before()方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。

$(target).before(element);


$("p").before("<span>下面是个段落</span>");

before方法查找每个元素p，将新建的span元素插入到元素p之前做为p的前一个兄弟节点。

insertBefore()方法

insertBefore()方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点

$(element).insertBefore(target);


$("<a href='#'>锚</a>").insertBefore("ul");

insertBefore()新建a元素，将新建的a元素添加到元素ul前，做为ul的前一个兄弟节点。增加元素的方法前四个是添加到元素内部，后四个是添加到元素外部的操作，有这些方法可以完成任何形式的元素添加。

【删】删除节点

如果想要删除文档中的某个元素JQuery提供了两种删除节点的方法：remove()和empty();

remove()方法

remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的所有子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使用这些被删除的元素。

$(element).remove();

$span=$("span").remove();

$span.insertAfter("ul");//移除后，原来绑定的事件就没有了

该示例中先删除所有的span元素，把删除后的元素使用$span接收，把删除后的元素添加到ul后面做为ul的兄弟节点。该操作相当于将所有的span元素以及后代元素移到ul后面。

empty()方法

empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。

$(element).empty();


$("ul li:eq(0)").empty();

该示例使用empty方法清空ul中第一个li的文本值。只能下li标签默认符号“·”。

detach()方法

移除后，如果重新加入到其他地方，那么原来节点上面绑定的事件还在.

点击重新append到ul里面的li，照样能触发点击事件，输出”点击事件”几个字。

修改文档中的元素节点

$(oldelement).replaceWith(newelement);
$(newelement).repalceAll(oldelement);

 可以使用多种方法:复制节点、替换节点、包裹节点。

【复】复制节点

$(element).clone()
复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。
方法如下:$(element).clone(true);
例：
$("ul li:eq(0)").clone(true);

该方法复制ul的第一个li元素，true参数决定复制元素时也复制元素行为，当不复制行为时没有参数。

【替】替换节点

$(element).repalcewith()、$(element).repalceAll()

替换节点方法能够替换某个节点，有两种形式形式实现：

replaceWith()和replaceAll().

使用replaceWith方法使用后面的元素替换前面的元素，

replaceAll方法使用前面的元素替换后面的元素

$(oldelement).replaceWith(newelement);
$(newelement).repalceAll(oldelement);

$("p").replaceWith("<strong>我要留下</strong>");
该方法使用strong元素替换p元素。
$("<h3>替换strong</h3>").repalceAll("strong");
该例使用h3元素替换所有的strong元素。

【包】包裹节点

把所有匹配的元素用其他元素的结构化标记包装起来。

$(element).wrap()//包裹外面的

$(element).wrapAll()//包裹全部

$(element).wrapInner()//包裹里面的

包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等，并且该操作不会破坏原始文档的词义。

包裹节点有三种实现形式：wrap();wrapAll();wrapInner();

 

1)$(“#li_1”)表示被包裹的对象。
2)wrap括号里面的元素表示用什么标签去包裹。
3)选择的对象如果是多个，每个对象都单独用括号里面的标签包裹。

 这里不是单独包裹，是全部拿到一起，用一个标签包裹起来,包裹好后放在第一个匹配的元素的位置。

 Dom元素的其他操作:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作。

【遍】遍历节点

遍历节点操作children()、next()、prev()、siblings()和closest()

children()方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素。
方法如下：$(selector).children();
例：
$("body").children().length;该示例获得body元素的子元素个数；

next()方法用于匹配元素的下一个兄弟节点，方法如下:$(selector).next();
例：
$("p").next().html();该示例获得p元素的下一个兄弟节点的html内容。

prev()方法用于匹配元素的上一个兄弟节点，方法如下：$(selector).prev();
例：
$("ul").prev().text();该示例获得ul元素的上一个兄弟节点的文本内容。

siblings方法()用于匹配目标元素的所有兄弟元素，
方法如下：$(selector).siblings();
例：
$("p").slibings();示例获得p元素的所有兄弟节点元素。

closest()方法用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空jQuery对象。