Jquery基础教程的DOM操作

每个人都知道多姆的全名。DOM是文档对象模型的缩写，意思是文档对象模型。Dom是一个独立于浏览器、平台和语言的接口，使用DOM接口很容易访问页面中的所有标准组件。一般来说，dom操作可以分为三个方面，即DOM核心、HTM-Dom和CSS-DOM。

每个网页都可以用DOM来表示，每个DOM都可以看作是一个DOM树。下面的html页面结构可以构建一个DOM树，代码：

代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' title DOM demo/title/head body p title='选择你最喜欢的水果'你最喜欢什么水果？/pulli title=' apple ' apple/Lili title=' orange ' orange/Lili title='菠萝'菠萝/Li/ul/body/html构建的DOM树如下：

JQuery中的DOM操作主要包括：创建、添加、删除、修改、查询，和数据库操作一样。下面的DOM操作将围绕上面的DOM树学习JQueryDOM操作。

首先，检查-查找DOM节点

查找节点非常容易，使用选择器可以轻松完成各种搜索工作。示例：查找元素节点p返回文本内容$(“p”)。p中的text()；示例：查找元素节点p的属性返回属性值$(“p”)。attr('title ')对应属性名称，并返回p的属性标题的值。

第二，构建——创建新的DOM节点

1.创建元素节点

创建元素节点，并将其作为ul元素的子节点添加到DOM节点树中。首先，创建元素点，使用Jquery的factory函数$()创建元素节点。格式如下：$(html)。这个方法将根据传入的HTML字符串返回一个DOM对象，将DOM对象包装成一个JQuery对象并返回。

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

$li1=$('li/li ')代码返回$li1是一个由DOM对象包装的JQuery对象。将新节点添加到DOM树中。JQuery代码如下：

$('ul ')。追加($ li1)；添加后，页面上只能看到li元素的默认“…”。由于没有向节点添加文本，因此只显示默认符号。文本节点创建如下。

PS:append()方法是添加DOM节点。有关详细信息，请参见添加-添加DOM节点。

2.创建文本节点

JQuery的factory函数$()也可以创建文本节点。创建文本节点的JQuery代码如下：

$ li2=$(' Li apple/Li ')；代码返回$li2，这是一个由DOM对象包装的JQuery对象。将新创建的文本节点添加到DOM树中。JQuery代码如下：

$('ul ')。追加($ li2)；添加后，可以在页面上看到‘Apple’，右键点击页面源代码，发现新添加的文本节点没有title属性。下面的方法创建一个具有属性的节点。

3.创建属性节点

创建属性节点，像元素节点和文本节点一样，是通过使用JQuery的工厂函数来完成的。创建属性节点的JQuery代码如下：

$ Li=$(' Li title='榴莲'榴莲/Li ')；代码返回$li，这也是一个由DOM对象包装的JQuery对象。将新创建的属性节点添加到DOM树中。JQuery代码如下：

$('ul ')。追加($ li3可以在添加的页面看到‘榴莲’，右键点击页面源代码，发现新添加的属性节点有title=‘榴莲’的属性。

第三，添加——添加DOM节点

动态创建新元素而不将其添加到文档中是没有意义的。有几种方法可以将新创建的节点插入到文档中，例如append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

1.append()方法

append()方法将内容追加到匹配元素的内部，如下所示：

$(“目标”)。追加(元素)；示例：

$('ul ')。追加(' Li title=' banana ' banana/Li ')；该方法查找ul元素，然后将新创建的li元素添加到ul中。

2.appendTo()方法

appendTo()方法将所有匹配的元素追加到指定的元素中，这与append()方法的操作相反。方法如下：$(元素)。appendTo(目标)；示例：

$('li title='荔枝'荔枝li ')。appendo(' ul ')；该方法创建一个新元素li，然后将li添加到找到的ul元素中。

3.prepend()方法

prepend()方法预先准备要添加到每个匹配元素中的元素，如下所示：

$(目标)。prepend(元素)；示例：

$('ul ')。prepend(' li title=' mango ' mango/Li ')此方法将找到元素ul，然后将新创建的Li元素用作ul的子节点，并将其插入ul作为UL的第一个子节点。

4.prependTo()方法

方法将元素添加到每个匹配元素的前面，如下所示：

$(元素)。prepend to()；示例：

$('li title='西瓜'西瓜/li ')。前置到(' ul ')；该方法将新创建的元素li插入到找到的ul元素中，作为ul的第一个子元素。

5.after()方法

after()方法将一个元素添加到匹配的元素中，新添加的元素将作为目标元素之后的下一个同级元素。方法如下：

$(目标)。在(元素)之后；示例：

$('p ')。在“(span新段落、新段落、新段落、新段落/span)”之后；

该方法将找到节点p，然后在span节点后面添加新创建的元素作为p的兄弟节点。

6.insertAfter()方法

insertAfter()方法将新创建的元素插入到找到的目标元素中，并作为目标元素的同级节点。方法如下：

$(元素)。insertAfter(目标)；示例：

$('pinsertAfter操作/p ')。insert after(' span ')；方法将新创建的p元素添加到搜索到的目标元素范围的后面，作为目标元素后面的第一个同级节点。

7.before()方法

before()方法作为匹配元素的前一个同级节点插入到每个匹配元素之前。方法如下：

$(目标)。在(元素)之前；示例：

$('p ')。在(' span是/span '下面的段落)之前；

before方法查找每个元素p，并将新创建的span元素作为p的前一个同级节点插入到元素p之前。

8.insertBefore()方法

insertBefore()方法将新元素添加到目标元素之前，作为目标元素的前一个同级节点，如下所示：

$(元素)。insertBefore(目标)；示例：

$('a href='#' anchor /a ')。在(' ul ')之前插入；InsertBefore()创建一个新的A元素，并将新的A元素添加到ul元素之前，作为ul的前一个同级节点。

前四种添加元素的方法是添加内部元素，后四种是添加外部元素。这些方法可以完成任何形式的元素添加。

第四，删除——删除DOM节点操作

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

1.remove()方法

remove()方法删除所有匹配的元素，传入的参数用于筛选元素。此方法可以删除元素中的所有子节点。当匹配的节点和后代被删除时，此方法的返回值是对已删除节点的引用，因此您可以使用此引用，然后使用这些已删除的元素。

方法如下：

$(元素)。移除()；示例：

$span=$('span ')。移除()；$ span . insert after(' ul ')；

在本例中，首先删除所有span元素，删除的元素由$span接收，删除的元素作为ul的兄弟节点添加到ul的后面。此操作相当于将所有span元素和后代元素移到ul之后。

2.empty()方法。

empty()方法严格来说不是删除元素，而是清空节点，可以清空元素中的所有子节点。方法如下：

$(元素)。empty()；示例：

$(“ul Li : eq(0)”)。empty()；该示例使用empty方法清空ul中第一个li的文本值。只能放置li标签的默认符号“”。

动词（verb的缩写）更改-修改DOM节点操作

修改文档中的元素节点有很多方法，比如复制节点、替换节点、包装节点。

1.复制节点$(元素)。克隆()

复制节点方法可以复制节点元素，并根据参数决定是否复制节点元素的行为。方法如下：

$(元素)。克隆(真)；示例：

$(“ul Li : eq(0)”)。克隆(真)；此方法复制ul的第一个li元素。true参数确定复制元素时将复制元素的行为，不复制行为时没有参数。

2.替换节点$(元素)。repalcewith()，$(元素)。repalceAll()

替换节点的方法可以替换某个节点，实现方式有两种：replaceWith()和replaceAll()。replaceWith方法用后一个元素替换前一个元素，replaceAll方法用前一个元素替换后一个元素。

方法如下：

$(oldelement)。replace with(new element)；$(newelement)。repalCell(old element)；示例：

$('p ')。replaceWith('strong我想留下/strong ')；方法用强元素替换p元素。

$(“H3替换strong/h3”)。repalcell(' strong ')；本示例用h3元素替换所有强元素。

3.包装节点$(元素)。wrap()，$(元素)。wrapAll()，$(元素)。wrapInner()

包装节点方法用其他标签包装目标元素，以改变元素的显示形式等。并且此操作不会破坏原始文档的含义。包装节点有三种实现：wrap()；wrap all()；wrap inner()；

wrap()方法如下：

$(dstelement)。包装(标签)；示例：

$('p ')。换行(“”)；这个示例方法用B标签包装所有P元素，每个元素用B标签包装。

wrapAll()方法如下：

$(dstelement)。wrapAll(标签)；示例：

$('p ')。wrap all(' ')；示例方法使用B标签包装所有P元素，所有P元素标签都用B标签包装。

wrapInner()方法如下：

$(dstelement)。wrapInner(标记)；示例：

$(“strong”)。wrap inner(“”)；本示例用一个B标记包装每个强元素的子元素。

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

1.属性操作attr()和removeAttr()

Attr()方法可以获取和设置元素属性。方法如下：当attr(para1)方法有一个参数时，用于获取当前元素para1的属性值；当attr(para1，attrValue)有两个参数时，将para1的属性值设置为attrValue；示例：

$('p ')。attr(' title ')；本示例用于获取p元素的标题属性值。

$('p ')。attr('title '，'你最喜欢的水果')；本示例将p元素的标题属性值设置为“您最喜欢的水果”；

如果一次设置多个属性值，可以使用“名称/值”对的形式，例如：

$('p ')。attr({'title': '你最喜欢的水果'，' name': '水果' })本示例一次设置两个属性值。

removeAttr()方法用于通过在参数中指定属性名称来移除特定属性。示例：

$('p ')。remove attr(' name ')；方法是移除p元素的名称属性。

2.样式操作addClass()、removeClass()、toggleClass()和hasClass()

Add style addClass()方法，并使用此方法向目标元素添加相应的样式，如下所示：

$(元素)。addCLaSS()；示例：

$('p ')。addCLaSS(' ul ')；该示例将元素p的样式设置为ul。

移除样式移除类()方法，用于移除目标元素的指定样式，如下所示：

$(元素)。remove CLaSS()；示例：

$('p ')。remove CLaSS(' ul ')；这有助于删除P元素的ul类样式。

切换样式toggleClass()方法，并使用此方法切换目标元素的样式，如下所示：

$(元素)。toggle class()；示例：

$('p ')。toggle class(' ul ')；该方法来回切换元素p的样式ul[增删实现切换]。

确定元素是否使用样式$(元素)。hasClass()，如下所示：

$(元素)。hasClass(类)；示例：

警报($('p ')。has CLaSS(' ul ')；打印出p元素是否具有ul样式。

PS:addClass()和attr()方法设置了不同的样式。attr方法将元素属性名对应的属性值设置为方法中的参数值，而addClass()设置属性值

将其添加到与属性名称对应的属性值中。示例：已经有一个元素p class='元素样式/p，请使用attr()和addClass()分别添加新样式。

$('p ')。attr('class '，' other ')。结果是p class=' another '元素样式/

$ ('p ')。addclass ('class '，' other ')结果是p class=' class1ather '元素样式/p

3.设置并获取HTML【html()】、文本【text()】和值【val()】

html()方法获取或设置元素的html元素。方法如下：

$(选择器)。html()；示例：

$('p ')。html()；该示例获取元素p的html内容.

$ ('p ')。html(' strong添加html内容/strong ')；该示例将p的html内容设置为“strong添加html内容/strong”；

PS:这个方法可以用于XHTML文档，但不能用于XML文档。

Text()方法获取或设置元素的文本值。方法如下：$(selecotr)。text()；示例：

$('p ')。text()；本示例获取元素p的文本内容。

$('p ')。文本(“重置文本内容”)；本示例将元素p的文本设置为“重置文本内容”；

这个方法适用于html和XML文档。

val()方法获取或设置元素的值。如果元素值是多重选择的，它将作为数组返回。方法如下：$(选择器)。val()；示例：文本元素

输入类型='文本' id='用户名'值='请输入用户名'/$(' #用户名')。val()；获取输入元素的值。

$(' #用户名')。val('香马')；将输入元素的值设置为“相马”。

val()方法不仅可以操作输入，还可以用于选择[下拉列表框]、复选框[多选框]和单选[单选框]。

示例：下拉框中的多选分配应用程序

选择id='水果' multiple=' multiple '选项苹果/选项香蕉/选项西瓜/选项/选择$ ('#水果')。val (['apple '，' banana '])；这个例子使苹果和香蕉在选择中被选中。

4.遍历节点操作子()、下一个()、上一个()、同级()和最近的()

children()方法用于获取匹配元素的子元素集，只匹配子元素，不考虑任何后代元素。方法如下：

$(选择器)。儿童()；示例：

$('$('body ')。儿童()。长度；本示例获取body元素的子元素数量；

next()方法用于匹配元素的下一个同级节点。方法如下：

$(选择器)。next()；示例：

$('p ')。下一个()。html()；该示例获取p元素的下一个同级节点的html内容。

prev()方法用于匹配元素的前一个同级节点，如下所示：

$(选择器)。prev()；示例：

$('ul ')。prev()。text()；本示例获取ul元素的上一个同级节点的文本内容。

兄弟方法()用于匹配目标元素的所有兄弟元素，如下所示：

$(选择器)。兄弟姐妹()；示例：

$('p ')。slibings()；该示例获取p元素的所有同级节点元素。

最接近()方法()用于获取最接近的匹配元素。首先，检查当前元素是否匹配。如果匹配，直接返回；否则，它将继续在父元素中查找合格的元素并返回它。如果没有匹配的元素，它将返回一个空的JQuery对象。

5.css-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()

方法用于获取和设置元素的一个或多个属性。方法如下：

$(选择器)。CSS()；示例：

$('p ')。css('color '，' red ')；本示例用于将元素的颜色属性设置为红色；

$(' p ')；本示例用于获取元素的颜色样式值；

$('p ')。css({'font-size':'30px '，' backgroundColor '，' # 888888 ' })；此示例用于设置元素的多种样式。

offset()方法用于获取元素相对于当前表单的偏移量，其返回对象包含两个属性：top和left。

方法如下：

$(选择器)。offset()这个例子用来获取元素p的偏移量。

PS:offset()仅对可见元素有效。

position()方法用于获取元素在位置样式属性设置为相对或绝对的最近祖先节点处的相对偏移量。方法如下：

$(选择器)。position()；示例：

var position=$(' p ')。position()；var left=positon.leftvar top=positon.top这个例子用来获取元素p的位置。

ScrollTop()和scrollLeft()方法用于获取元素滚动条顶部和左侧的距离。方法如下：

$(选择器)。scroll top()；$(选择器)。scrolleft()；示例：

var scrollTop=$('p ')。scroll top()；var scrolleft=$(' p ')。scrolleft()；本示例用于获取元素滚动条的位置。

还可以添加参数，将元素滚动到指定位置。示例：

$(“text area”)。scroll top(300)；$(“text area”)。scrolleft(300)；以上是Jquery基础教程的DOM操作，希望对大家有所帮助。