jQuery读书笔记（三）——jQuery中的DOM操作

最新推荐文章于 2023-06-30 17:27:04 发布

Sophie____

最新推荐文章于 2023-06-30 17:27:04 发布

阅读量79

点赞数

分类专栏： web前端 jQuery 文章标签： web前端 jQuery DOM js

web前端 jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM是Document Object Model的缩写，意思是文档对象模型。是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。

1. DOM操作的分类

DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

1.1 DOM Core

使用DOM Core来获取表单对象的方法

Document.getElementsByTagName(“form”);

使用DOM Core来获取某元素的src属性的方法：

Element.getAttribute(“src”);

1.2 HTML-DOM

在使用JS和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。

使用HTML-DOM来获取表单对象的方法

Document.forms;

使用HTML-DOM来获取某元素的src属性的方法：

element.src;

1.3 CSS-DOM

在JS中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。

element..style.color = “red”;

2. jQuery中的DOM操作

2.1 查找节点

2.1.1查找元素节点

获取元素节点并打印出它的文本内容。

var $li = $(“ul li:eq(1)”);

var li_txt = $li.text();

alert(li_txt);

2.1.2查找属性节点

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。

var $para = $(“p”);

var p_txt = $para.attr(“title”);

alert(p_txt);

2.2 创建节点

2.2.1 创建元素节点

var $li_1 = $(“<li></li>”);

var $li_2 = $(“<li></li>”);

$(“ul”).append($li_1);

$(“ul”).append($li_2);

2.2.2 创建文本节点

var $li_1 = $(“<li>香蕉</li>”);

var $li_2 = $(“<li>雪梨</li>”);

$(“ul”).append($li_1);

$(“ul”).append($li_2);

2.2.3 创建属性节点

var $li_1 = $(“<li title=’香蕉’>香蕉</li>”);

var $li_2 = $(“<li title=’雪梨’>雪梨</li>”);

$(“ul”).append($li_1);

$(“ul”).append($li_2);

2.3插入节点

（1）append() 向每个匹配的元素内部追加内容

Html代码：

我想说：

jQuery：

$(“p”).append(“你好”);

结果：

我想说：你好

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

Html代码：

我想说：

jQuery：

$(“你好”).appendTo(“p”);

结果：

我想说：你好

（3）prepend() 向每个匹配的元素内部前置内容

Html代码：

我想说：

jQuery：

$(“p”).prepend(“你好”);

结果：

你好我想说：

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

Html代码：

我想说：

jQuery：

$(“你好”).prependTo(“p”);

结果：

你好我想说：

（5）after() 在每个匹配的元素之后插入内容

Html代码：

我想说：

jQuery：

$(“p”).after(“你好”);

结果：

我想说：你好

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

Html代码：

我想说：

jQuery：

$(“你好”).insertAfter(“p”);

结果：

我想说：你好

（7）before() 在每个匹配的元素之前插入内容

Html代码：

我想说：

jQuery：

$(“p”).before(“你好”);

结果：

你好我想说：

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

Html代码：

我想说：

jQuery：

$(“你好”).insertBefore(“p”);

结果：

你好我想说：

2.4 删除节点

（1）remove()方法

$(“ul li:eq(1)”).remove();

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

（2）empty()方法

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

$(“ul li:eq(1)”).empty();

2.5 复制节点

单击<li>元素后需要再复制一个<li>元素

$(“ul li”).click(function(){

$(this).clone().appendTo(“ul”);

})

复制节点后，被复制的新元素并不具有任何行为。如果需要新元素也具有复制功能，可以使用如下代码：

$(this).clone(true).appendTo(“body”);

在clone()方法中传递了一个参数true，它的含义是复制元素同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。

2.6 替换节点

ReplaceWith()和replaceAll()

$(“p”).replaceWith(“你好”);

$(“你好”).replaceAll(“p”);

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

2.7 包裹节点

（1） wrap()

$(“strong”).wrap(“”);

结果：

你好

（2） wrapAll()方法

该方法会将所有匹配的元素用一个元素包裹起来。与wrap()的区别是，wrap()是将所有元素进行单独的包裹。

$(“strong”).wrapAll(“”);

结果：

你好

（3） wraplnner()方法

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

$(“strong”).wraplnner(“”);

结果：

你好

2.8 属性操作

2.8.1获取属性和设置属性

var $para = $(“p”);

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

$(“p”).attr(“title”,”your title”); //设置单个的属性值

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

2.8.2 删除属性

$(“p”).removeAttr(“title”);

2.9 样式操作

2.9.1获取样式和设置样式

$(“p”).attr(“class”,”high”); //设置元素的class为“high”

2.9.2 追加样式

$(“p”).addClass(“another”); //给元素追加“another”类

2.9.3 移除样式

Html代码：

test

Jquery代码：

$(“p”).removeClass(“high”); //移除元素中值为“high”的class

$(“p”).removeClass(“high”).removeClass(“another”); //移除元素中的两个class

$(“p”).removeClass(“high another”); //移除元素中的两个class

$(“p”).removeClass(); //移除元素的所有class

2.9.4切换样式

toggleClass（）方法控制样式上的重复切换。

$(“p”).toggleClass(“another”); //重复切换类名“another”

2.9.5 判断是否含有某个样式

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

$(“p”).hasClass(“another”);

此方法等价于$(“p”).is(“another”); //is(“.”+class);

2.10 设置和获取HTML，文本和值

（1） html()方法

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

var p_html = $(“p”).html(); //获取元素的HTML代码

$(“p”).html(“你好”); //设置元素的HTML代码

注：html()方法可以用于XHTML文档，但不能用于XML文档。

（2） text()方法

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

var p_text = $(“p”).text(); //获取元素的文本内容

$(“p”).text(“你好”); //设置元素的文本内容

注：JS中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有浏览器。text()方法对于HTML文档和XML文档都有效。

（3） val()方法

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

$(“:checkbox”).var([“check2”,”check3”]);

$(“:radio”).val([“radio2”]);

2.11 遍历节点

（1） children()方法

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

var $body = $(“body”).children();

注：children()方法只考虑子元素而不考虑任何后代元素。

（2） next()方法

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

var $p1 = $(“p”).next(); //取得紧邻元素后的同辈元素

（3） prev()方法

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

var $ul = $(“ul”).prev(); //取得紧邻<ul>元素前的同辈元素

（4） siblings()方法

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

var $p2 = $(“p”).siblings(); //取得紧邻元素的同辈元素

（5） closest()方法

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

2.12 CSS-DOM操作

$(“p”).css(“color”); //获取元素的样式颜色

$(“p”).css(“color”,”red”); //设置元素的样式颜色为红色

$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#888888”}) //同时设置多个样式属性

$(“p”).css(“opacity”,”0.5”); //设置透明度

$(“p”).css(“height”); //设置高度方法1

$(“p”). height(); //设置高度方法2

在CSS-DOM中，还有以下几个常用方法

（1） offset()方法

作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。

var offset = $(“p”).offset(); //获取元素的offset()

var left = offset.left; //获取左偏移

var top = offset.top; //获取右偏移

（2） position()方法

作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，以offset()一样，它返回的对象包含两个属性，即top和left。

var position = $(“p”). position (); //获取元素的position()

var left = position.left; //获取左偏移

var top = position.top; //获取右偏移

（3） scrollTop()方法和scrollLeft()方法

这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

var $p = $(“p”); //获取元素的offset()

var scrollTop = $p.scrollTop(); //获取元素的滚动条距顶端的距离

var scrollLeft = $p.scrollLeft(); //获取元素的滚动条距左侧的距离

$(“textarea”).scrollTop(300); //元素的垂直滚动条滚动到指定的位置

$(“textarea”).scrollLeft(300); //元素的横向滚动条滚动到指定的位置

Sophie____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录