详细解释jQuery中的DOM操作

概述

jQuery作为一个JavaScript库，继承和发展了JavaScript对DOM对象操作的特点，让开发者可以方便地操作DOM对象。

jQuery中的DOM操作

看看什么是DOM操作

一个个看着他们

先写一个HTML代码，下面的代码会操作这个HTML代码

选择你最喜欢的水果你最喜欢的水果？/pul Li title=' apple ' apple/Li Li title=' orange ' orange/Li Li title='菠萝'菠萝/li/ul找到节点

1.查找元素节点

可以用各种选择器搜索搜索节点

$(' ul Li ')；

2.查找属性节点

可以使用Attr()方法。当参数为1时，是查找属性，当参数为2时，是设置属性

console.log($('li:eq(2)')。attr(' title ')；//菠萝

创建节点

1.创建元素节点

var $ Li _ 1=$(' Li/Li ')；

2.创建文本节点

Var $li_1=$('li香蕉/Li ')；

3.创建属性节点

Var $li_1=$('li title='香蕉'香蕉/Li ')；

插入节点

1.向每个匹配的元素添加内容

$(“Li : eq(1)”)。追加(' pbana/p ')；

2.将匹配的元素追加到指定的元素

$('p香蕉/p ')。appendo(' Li : eq(1)')；

这两种方法执行相同的操作，并且prepend()和prependTo()与上述方法类似，只是内容被插入到元素之前。

3.在每个匹配的元素后插入内容

$(“Li : eq(1)”)。在(' p香蕉/p ')之后；

4.将匹配元素插入指定元素的后面

$('p香蕉/p ')。insert after(' Li : eq(1)')；

两种方法执行相同的操作。before()和insertBefore()与上述方法类似，只是内容插入在元素之前

删除节点

1.remove()方法

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

var $li=$('li:eq(1)')。移除()；$ Li . appendo(' ul ')；remove()方法还可以选择性地移除元素

$('ul li ')。移除(' li[title='菠萝']')；

2.分离()方法

分离()方法与移除()方法相同。区别在于分离()方法。所有绑定的事件和附加数据都将被保留

$('ul li ')。单击(function(){ alert($(this))。html())；});var $li=$('ul li:eq(1)')。分离()；$ Li . appendo(' ul ')；//点击事件保存。3.empty()方法

empty()方法不删除节点，而是清空它

$(“ul li: eq(2)”)。empty()；

复制节点

1.克隆()方法

$('ul li ')。单击(function(){$(this))。克隆(真)。appendTo($(' ul '))；当传入参数true时，将复制元素中绑定的事件

替换节点

1.replaceWith()和replaceAll()

方法用指定的元素替换所有匹配的元素

$('p ')。replaceWith('p香蕉/p ')；

replaceAll()方法只是颠倒了replaceWith()方法

$('p香蕉/p ')。replace all(' p ')；

宗地节点

1.wrap()方法

用其他标签包装节点。如果它是一组节点，它将包装这组节点中的每个节点

$('li ')。换行(“”)；

2.wrapAll()方法

与wrap()方法不同，即使是一组节点也只能用一个节点包装

$('li ')。wrap all(' ')；

3.wrapInner()方法

用其他结构化标签包装匹配元素的子内容(包括文本节点)

属性操作

1.获取属性并设置属性

Attr()方法在传递一个参数时获取属性，在传递两个参数时设置属性

$('p ')。attr('title '，' you title ')；

2.删除属性

removeAttr()方法

$('p ')。remove attr(' title ')；

风格操作

1.获取样式并设置样式

可以使用Attr()方法

2.添加样式

AddClass()将样式添加到原始样式中

$('p ')。addCLaSS(' other ')；

3.移除样式

removeClass()方法可以删除类属性。如果有很多需要删除的，应该用空格隔开。如果没有传入参数，所有类都将被移除

$('p ')。removeClass('另一个')；

4.切换样式

toggle()方法是交替执行代码

$('p ')。toggle(function(){ //function 1}，function(){//function 2 })；toggleClass()方法控制样式的重复切换，如果类名存在，则删除它，如果不存在，则添加它。

$('p ')。toggle class(' other ')；

5.确定它是否包含某种样式

HasClass()可以用来判断一个元素何时包含类，如果包含，则返回true否则，它返回false

$('p ')。has class(' other ')；

设置并获取HTML、文本和值

1.html()方法

此方法类似于innerHTML，可用于读取或设置元素中的HTML内容

$('p ')。html('香蕉')；

2.text()方法

与innerText类似，它可以用来读取或设置元素中的文本内容

$('p ')。文字(' hello ')；

3.val()方法

类似于value属性，它可以用来设置和获取元素的值。如果元素是多选的，则返回包含所有选定值的数组

遍历节点

1.children()方法

该方法用于获取匹配元素的子元素集合，考虑子元素的值不考虑其他后代元素

$('ul ')。儿童()；

2.next()方法

匹配紧接在元素后面的同级元素

$('ul ')。next()；

3.prev()方法

匹配紧接在元素之前的同级元素

4.兄弟()方法

匹配元素前后的所有兄弟元素

5.最接近()方法

此方法用于获取最近的匹配元素。首先，检查当前元素是否匹配。如果匹配，直接返回元素；否则，查找父元素并逐步查找。如果没有找到，返回一个空的jQuery对象。

6.parent()和parents()方法

parent()方法获取集合中每个匹配元素的父元素

parents()方法获取集合中每个元素的祖先元素

CSS-DOM操作

1.css()方法

您可以获取或设置元素的属性

$('p ')。css({fontSize:'20px '，background color : ' green ' })；

2.height()、innerHeight()和outerHeight()方法

Height()方法获取宽度属性，innerHeight()方法获取宽度填充，outerheight()方法获取宽度填充边框

3.offset()方法

获取当前可视区域中元素的相对偏移量

4.位置()方法

获取元素相对于其位置样式属性设置为相对或绝对的父元素的相对偏移量

5.scrollTop和scrollLeft()方法

获取距元素滚动条顶部和左侧的距离

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！