详解jQuery中的DOM操作_网络技术_宿州市腾雀网络科技有限公司

详解jQuery中的DOM操作

发布时间 - 2026-01-10 22:03:46 点击率：次

大致介绍　　

jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发人员能方便的操作DOM对象。

jQuery中的DOM操作

看看DOM操作都有哪些

逐一来看

先写一份HTML代码，后面的代码将操作这份HTML代码

<p title="选择你最喜欢的水果">你最喜欢的水果？</p>
<ul>
 <li title="苹果">苹果</li>
 <li title="橘子">橘子</li>
 <li title="菠萝">菠萝</li>
</ul>

查找节点

1、查找元素节点

查找节点可以用各种各样的选择器来查找

$('ul li');

2、查找属性节点

可以用attr()方法，参数是一个的时候是查找属性，两个的时候是设置属性

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)').append('香蕉');

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

$('香蕉').appendTo('li:eq(1)');

这两种方法都是进行同一个操作，prepend()和prependTo()与上述方法类似，不同之处就是在元素内部前插入内容

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

$('li:eq(1)').after('香蕉');

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

$('香蕉').insertAfter('li:eq(1)');

这两种方法都是进行同一个操作，before()和insertBefore()与上述方法类似，不同之处就是在元素前插入内容

删除节点

1、remove()方法

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

var $li = $('li:eq(1)').remove();
$li.appendTo('ul');

remove（）方法也可以选择性的删除元素

$('ul li').remove('li[title="菠萝"]');

2、detach()方法

detach()方法和remove()方法用法一样，不同点是detach()方法，所有绑定的事件、附加的数据等都会保留下来

$('ul li').click(function(){
 alert($(this).html());
});
 var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');//点击事件会保存下来

3、empty()方法

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

$('ul li:eq(2)').empty();

复制节点

1、clone()方法

$('ul li').click(function(){
$(this).clone(true).appendTo($('ul'));

传入参数true时，会复制元素中所绑定的事件

替换节点

1、replaceWith()和replaceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的元素

$('p').replaceWith('香蕉');

replaceAll()方法只是将replaceWith()方法翻过来了

$('香蕉').replaceAll('p');

包裹节点

1、wrap()方法

将某个节点用其他的标记包裹起来，如果是一组节点，那么就会包裹这一组节点里的每个节点

$('li').wrap('');

2、wrapAll()方法

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

$('li').wrapAll('');

3、wrapInner()方法

将匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹

属性操作

1、获取属性和设置属性

attr()方法传递一个参数的时候是获取属性，传递两个参数的时候是设置属性

$('p').attr('title','you title');

2、删除属性

removeAttr()方法

$('p').removeAttr('title');

样式操作

1、获取样式和设置样式

可以用attr()方法

2、追加样式

addClass()是在原有的样式上添加样式

$('p').addClass('another');

3、移除样式

removeClass()方法可以删除class属性，如果有多个需要删除要用空格将他们分隔，如果不传入参数则表示移除全部class

$('p').removeClass('another');

4、切换样式

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

$('p').toggle(function(){
 // 函数1
},function(){
 // 函数2
 });

toggleClass()方法控制样式上的重复切换，如果类名存在就删除它，如果不在就添加它　　

$('p').toggleClass('another');

5、判断是否含有某个样式

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

$('p').hasClass('another');

设置和获取HTML、文本和值

1、html()方法

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

$('p').html('香蕉');

2、text()方法

类似于innerText,可以用来读取或者设置某个元素中的文本内容

$('p').text('hello');

3、val()方法

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

遍历节点

1、children()方法

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

$('ul').children();

2、next()方法

匹配元素后面紧邻的同辈元素

$('ul').next();

3、prev()方法

匹配元素前面紧邻的同辈元素

4、siblings()方法

匹配元素前后所有的同辈元素

5、closest()方法

该方法用于取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配直接返回该元素，否则向上查找父级元素，逐级向上查找，如果什么都没有找到则返回一个空的jQuery对象。

6、parent()与parents()方法

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

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

CSS-DOM操作

1、css()方法

可以获取元素的属性也可以设置元素的属性

$('p').css({fontSize:'20px',backgroundColor:'green'});

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

height()方法是获取width属性，innerHeight()方法获取的是width + padding,outerHeight()方法获取的是width + padding + border

3、offset()方法

获取元素在当前可视区的相对偏移

4、position()方法

获取元素相对于最近的一个position样式属性设置为relative或者absolute的父元素的相对偏移

5、scrollTop和scrollLeft()方法

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jQuery # DOM # 原生JS和jQuery操作DOM对比总结 # jQuery利用sort对DOM元素进行排序操作 # jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动) # 浅谈jQuery 选择器和dom操作 # jQuery遍历DOM节点操作之filter()方法详解 # 牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作 # jQuery移动和复制dom节点实用DOM操作案例 # jQuery的DOM操作之删除节点示例 # jQuery学习笔记之jQuery的DOM操作 # 使用jQuery操作DOM的方法小结 # 的是 # 可以用 # 可以用来 # 都是 # 是一个 # 类似于 # 最喜欢 # 这两种 # 绑定 # 移除 # 不同之处 # 这一 # 就会 # 是在 # 来了 # 就是在 # 多个 # 已被 # 遍历 # 其他的

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：php485怎么实现数据加密传输_php485串口数据加密方

下一篇：罗永浩向开源组织捐款累计约 1200 万

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：php485怎么实现数据加密传输_php485串口数据加密方

下一篇：罗永浩向开源组织捐款累计约 1200 万