首页 » jQuery » jQuery中的DOM操作

jQuery中的DOM操作

原文 http://blog.csdn.net/lollipop94/article/details/76685917

2017-08-04 17:20:05阅读(602)

一、DOM操作的分类 1、DOM Core(核心) 任何一种支持DOM的程序设计语言都可以使用它。 可以用来处理任何一种使用标记语言编写出来的文档。 2、HTML-DOM 比DOM Core的出现早。 提供了一些更简明的记号来描述各种HTML元素的属性。 3、CSS-DOM 针对CSS操作。 获取和设置style对象的各种属性。 二、jQuery中的DOM操作 1、查找节点 查找元素节点 查找属性节点:使用attr()方法来获取属性值。
var $li = $("ul li:eq(1)"); //获取<ul>里的第2个<li>节点
var $p = $("p");
var p_txt = $p.attr("title");   //获取<p>元素节点属性title
2、创建节点 创建元素节点:先使用$(html)方法创建新的元素,再使用append()方法将新元素插入到文档中。 创建文本节点:在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中。 创建属性节点:与创建文本节点类似。
//创建元素节点
var $li_1 = $("<li></li>");
$("ul".append($li_1);   //添加到<ul>节点中
//创建文本节点
var $li_2 = $("<li>足球</li>");
$("ul".append($li_2);
//创建属性节点
var $li_3 = $("<li title='篮球'>篮球</li>");
$("ul".append($li_3);
【使用原生JS方法的创建过程】

创建节点(元素/文本/属性) → 添加节点的一些属性 → 加入到文档中去

该过程涉及的方法:

创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHtML 加入文档:appendChild 3、插入节点 append():向每个匹配的元素内部追加内容。

appendTo():将所有匹配的元素追加到指定的元素。

prepend():向每个匹配的元素内部前置内容。

prependTo():将所有匹配的元素前置到指定的元素中。

after():在每个匹配的元素之后插入内容。

insertAfter():将所有匹配的元素插入到指定元素的后面。

before():在每个匹配的元素之前插入内容。

insertBefore():将所有匹配的元素插入到指定的元素的前面。

【注】上面的方法每两个为一组,其中,$(A).append(B)的操作是将B追加到A中,prepend()、after()、before()与之类似;而appendTo()、prependTo()、insertAfter()、insertBefore()刚好与之相反。

这么来说,当看见上面的方法中带有“To”或“insert”时,可以这么理解,前面的“指向”(或是“插入”)到后面中去,即将方法前的内容添加到方法括号内的内容中去;否则相反。

再举个例子说明:

HTML代码如下:

<p id="p1"> hello </p>
<p id="p2"> hi </p>

jQuery代码如下:

$("#p1").append("<b>world</b>");
$("<b>world</b>").appendTo("#p2");

jQuery中的DOM操作

4、删除节点 remove():从DOM中删除所有匹配元素。
不传参数时,直接删除该节点及其包含的所有后代节点。 传入参数(即一个选择器表达式)时,可以选择性地删除元素。 返回一个指向已被删除的节点的引用。 empty():清空元素中的所有后代节点。 detach():从DOM中去掉所有匹配的元素,但不会把匹配的元素从jQuery对象中删除。(jQuery特有) 【empty()和remove()区别】 empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点;empty不能删除自己本身这个节点。 remove()方法提供传递一个筛选的表达式,删除指定合集中的元素;该节点与该节点所包含的所有后代节点将同时被删除。

举个例子。

HTML代码如下:

<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
    <li title="葡萄">葡萄</li>
</ul>

jQuery中的DOM操作

jQuery代码如下:

$("ul li:eq(1)").empty();  //第二个<li>元素内容被清空,但是默认符号“·”还存在
$("ul li:eq(2)").remove();
$("ul li").remove("li[title=葡萄]");

jQuery中的DOM操作

【detach()和remove()区别】 remove():无参数时,移除自身整个节点以及该节点的内部的所有节点,包括节点上事件与数据;有参数时,移除筛选出的节点以及该节点的内部的所有节点,包括节点上事件与数据。 detach():移除的处理与remove()一致。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

还是用之前的例子来说明,HTML代码不变,jQuery代码如下:

$("ul li").click(function(){
    alert( $(this).html() );
});
var $li1 = $("ul li:eq(1)").detach(); // 删除第二个元素,即“橘子”
$li1.appendTo("ul");//重新添加“橘子”在最后,之前绑定的事件仍然存在
var $li2 = $("ul li:eq(0)").remove(); // 删除第一个元素,即“苹果”
$li2.appendTo("ul");//重新添加“苹果”在最后,之前绑定的事件失效

jQuery中的DOM操作

5、复制节点:clone()方法。 不传参数时,只是复制节点,被复制的新元素不具有任何行为。 传入参数true,会复制元素的同时复制元素中所绑定的事件。

继续用之前的例子。

未传入参数时,如下:

$("ul li").click(function() {
    $(this).clone().appendTo('ul');//复制当前单击的节点,并把它追加到<ul>元素中
    $(this).clone(true).appendTo('body');//传入参数true
});

jQuery中的DOM操作

传入参数时,如下:

$("ul li").click(function() {
    $(this).clone(true).appendTo('body');//传入参数true
});

jQuery中的DOM操作

6、替换节点 replaceWith():将所有匹配的元素都替换成指定的HTML或者DOM元素。 replaceAll():该方法与replaceWith()作用相同,只是颠倒了操作。

$(A).replaceWith(B)的操作是:用B替换A;而replaceAll()方法刚好相反。

我们可以这样理解,“with”理解为“用”的意思,即A是用B来替换;而“replaceAll”可以理解为A替换掉了全部的B。

【注】
replaceWith()与replaceAll()方法会删除与节点相关联的所有数据和事件处理程序。

7、包裹节点 wrap():将所有的元素进行单独的包裹。 wrapAll():将所有匹配的元素用一个元素来包裹。 wrapInner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

给个例子:

<strong>这是一句简单的话。</strong>
<strong>这是一句简单的话。</strong>

使用wrap()方法,代码如下:

$("strong").wrap("<b></b>");    //用<b>标签把<strong>元素包裹起来

会出现如下结果:

<b><strong>这是一句简单的话。</strong></b>
<b><strong>这是一句简单的话。</strong></b>

而使用wrapAll()方法:

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

结果如下:

<b>
    <strong>这是一句简单的话。</strong>
    <strong>这是一句简单的话。</strong>
</b>

使用wrapInner():

$("strong").wrapInner('<b></b>');

结果如下:

<strong><b>这是一句简单的话。</b></strong>
<strong><b>这是一句简单的话。</b></strong>
8、属性操作 attr():获取和设置元素属性。
获取属性时,传递一个参数,即属性名称。 设置属性时,传递两个参数,即属性名称和对应的值。 removeAttr():删除元素属性。
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title");    //获取<p>元素节点属性title
$("p").attr("title", "your title");     //设置单个属性值
$("p").attr({"title": "your title", "name": "test"});   //设置多个属性
$("p").removeAttr("title"); //删除<p>元素的属性title
9、样式操作 attr():获取和设置样式。 addClass():追加样式。 removeClass():移除样式。 toggleClass():切换样式。如果类名存在则删除它,如果类名不存在则添加它。 hasClass():判断元素中是否含有某个class。如果有,返回true,否则返回false。 10、设置和获取HTML、文本和值 html():读取或设置某个元素中的HTML内容。可以用于XHTML文档,但不能用于XML文档。 text():读取或设置某个元素中的文本内容。 val():设置和获取元素的值。 11、遍历节点 children():用于取得匹配元素的子元素集合。 next():用于取得匹配元素后面紧邻的同辈元素。 prev():用于取得匹配元素前面紧邻的同辈元素。 siblings():用于取得匹配元素前后的所有同辈元素。 closest():用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身,否则向上查找父元素,直到找到匹配元素,如果找不到,返回一个空对象。 parent():用于获得集合中每个匹配元素的父级元素。 parents():用于获得集合中每个匹配元素的祖先元素。 12、CSS-DOM操作 css():获取元素的样式属性。 height():获取和设置元素的高度(px)。 width():获取和设置元素的宽度(px)。 元素定位
offset():获取元素在当前视窗的相对偏移。返回的对象包括两个属性,即top和left。 position():获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移。返回的对象包括两个属性,即top和left。 scrollTop()和scrollLeft():获取元素的滚动条距顶端的距离和距左侧的距离。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹