JQuery基础课程:JQuery中的DOM操作介绍

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月3日22:19:32 评论 7 views 3169字阅读10分33秒

一种与浏览器,平台,语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。

DOM Core:DOM Core 并不专属于 JavaScript,任何一种支持 DOM 的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档,例如:XML。

HTML DOM:使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,有许多专属于HTML-DOM的属性。

CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM 主要用于获取和设置 style 对象的各种属性。

1.查找节点

请见上面的“基本选择器”。

2.创建节点

使用JQuery的工厂函数,创建一个新节点:var $newNode = $(“<p>你好</p>”);,然后将新节点插入到指定元素节点处。

3.插入节点

将新创建的节点,或获取的节点插入指定的位置。

“$node.append($newNode)”,向每个匹配的元素内部的结尾处追加结尾处。如,“$("p").append("<b>Hello</b>");”将"<b>Hello</b>"添加到"p"内部的结尾处。

“$newNode.appendTo($node)”,将新元素追加到每个匹配元素内部的结尾处。

“$node.prepend($newNode)”,向每个匹配的元素内部的结尾处追加开始处。如,“$("p").prepend("<b>Hello</b>");”将"<b>Hello</b>"添加到"p"内部的起始处。

“$newNode.prependTo($node)”, 将新元素追加到每个匹配元素内部的开始处。

“$node.after($newNode)”,向每个匹配的元素的之后插入内容,是并列兄弟。如,“$("p").after("<b>Hello</b>");”将"<b>Hello</b>"插入到"p"的后边。它们是兄弟关系。

“$newNode.insertAfter($node)”,将新元素插入到每个匹配元素之后。

“$newNode.before($node)”,向每个匹配的元素的之前插入内容。如,“$("p").before("<b>Hello</b>");”将"<b>Hello</b>"插入到"p"的前面,它们是兄弟关系。

“$node.insertBefore($newNode)”,将新元素插入到每个匹配元素之前。

注意:如果插入的节点是不是新创建的,插入将变成移动操作。所以,在插入这样的节点之前应该使用clone的节点。

4.删除节点

从DOM中删除所有匹配的元素。如,“$("p").remove(".hello");”删除所为class属性值为hello的p元素,还有它下面的所有元素。

从DOM中清除所有匹配的元素。如,“$("p").empty();”清除所有p元素,还有它下面的所有元素。

5.复制节点

克隆匹配的DOM元素。如,“$("p").clone();”返回克隆后的副本,但不具有任何行为。如果要将DOM的事件一起克隆,应该使用“$("p").clone(true);”。

6.替换节点

将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如,$("p").replaceWith("<b>Paragraph. </b>");,将所有p元素,替换为"<b>Paragraph. </b>"。

与replaceWith相返:$("<b>Paragraph. </b>").replaceAll("p");。

7.包裹节点

wrap():将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义。如,“$("p").wrap("<div class='wrap'></div>");”。每个p元素被包裹到<div>中。

wrapAll():将所有匹配的元素用一个元素来包裹。而wrap()方法是将所有的元素进行单独包裹。如,“$("p").wrapAll("<div></div>");”,将所有p元素包裹到<div>中。

wrapInner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如,“$("p").wrapInner("<b></b>");”, <b>被每一个p元素包裹。

8.属性设置

attr():获取属性和设置属性。

当为该方法传递一个参数时,即为某元素的获取指定属性。如,“$("img").attr("src");”,获取img元素的src属性值。

当为该方法传递两个参数时,即为某元素设置指定属性的值。如,“$("img").attr("src","test.jpg");”,设置img元素的src属性值为test.jsp。

jQuery 中有很多方法都是一个函数实现获取和设置。如:attr(),html(),text(),val(),height(),width(),css()等。

removeAttr():删除指定元素的指定属性。

9.样式操作

可以通过“attr()”设置或获取css样式。

追加样式:addClass() 。如,“$("p").addClass("selected");”,向所有P元素中追加“selected”样式。

移除样式:removeClass() --- 从匹配的元素中删除全部或指定的class。如,“$("p").removeClass("selected");”,删除所有P元素中的“selected”。

切换样式:toggleClass() --- 控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。如,“$("p").toggleClass("selected");”,所有的P元素中,如果存在“selected”样式就删除“selected”样式,否则就添加“selected”样式。

判断是否含有某个样式:hasClass() --- 判断元素中是否含有某个 class,有返回 true; 否则返回 false。如,“$(this).hasClass("protected")”,判断当前节点是否有“protected”样式。

10.设置或获取HTML、文本和值

读取和设置某个元素中的 HTML 内容: html(),该方法可以用于 XHTML,但不能用于 XML 文档。

读取和设置某个元素中的文本内容:text(),该方法既可以用于 XHTML 也可以用于 XML 文档。

读取和设置某个元素中的值:val(),该方法类似 JavaScript 中的 value 属性。对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值)。如果为多选下拉列表框,则返回一个包含所有选择值的数组。

11.常用遍历节点的方法

取得匹配元素的所有子元素组成的集合:children()。该方法只考虑第一层子元素而不考虑任何后代元素。

取得匹配元素后面紧邻的兄弟元素的集合(但集合中只有一个元素):next()。

取得匹配元素前面紧邻的兄弟元素的集合(但集合中只有一个元素):prev()。

取得匹配元素前后所有的兄弟元素: siblings()。

12.CSS-DOM操作

获取和设置元素的样式属性:css()。

获取和设置元素透明度:opacity()属性。

获取和设置元素高度,宽度:height(),width()。在设置值时,若只传递数字,则默认单位是px。如需要使用其他单位则需传递一个字符串,例如 “$(“p:first”).height(“2em”)”;

获取元素在当前视窗中的相对位移:offset()。它返回的对象包含了两个属性:top,left。该方法只对可见元素有效。

以上就是JQuery基础课程:JQuery中的DOM操作介绍的详细内容,更多请关注php教程其它相关文章!

继续阅读
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: