IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> jQuery DOM基础操作 -> 正文阅读

[JavaScript知识库]jQuery DOM基础操作


前言

本文讲解了jQuery DOM 操作的基础,如果本文对你有所帮助请三连支持博主,你的支持是我更新的动力,先赞后看养成习惯。

在这里插入图片描述


DOM简介

文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树,通过 DOM 提供的 API 可以对树上的节点进行操作。
在这里插入图片描述


一、查找节点

查找元素节点

var $li = $("ul li:eq(0)"); //获取<ul>里第一个<li>节点
var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容

查找属性节点

使用 attr()方法来获取元素的各种属性的值。attr() 方法的参数可以是一个,也可以是两个。

var $pobj = $("p"); //获取<p>节点
var p_txt = $pobj.attr("title"); //获取<p>元素节点属性title
alert(p_txt); //打印title属性值

二、创建节点

创建元素节点

创建元素节点可以用 $(html)函数$(html) 方法会根据传入的 HTML 标记字符串,创建一个 DOM 对象,并将这个 DOM 对象包装成一个 jQuery 对象然后返回。

var $liobj = $("<li>创建一个新元素</li>"); //创建一个<li>元素

创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用 append()等方法将它们添加到文档中。

var $liobj = $("<li>我是文本节点</li>");

创建属性节点

与创建文本节点大同小异,可以在创建元素节点时直接创建属性节点,然后使用 append()等方法将它们添加到文档中。

var $li = $("<li title='属性节点'></li>"); 

三、插入节点

常用的方法:

.append() 在每个匹配元素里面的末尾处插入参数内容。

$parent.append('<li>最后面</li>')

.appendTo() 将匹配的元素插入到目标元素的最后面。

删除后恢复
appendTo()
var $li=$('ul li:eq(2)').remove() 将它存放在变量中
$li.appendTo($('ul'))

.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

$li_1$.insertAfter($li_2)// 内容.insertAfter(参考点) 元素集合的后面

.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。

$li_1$.insertBefore($li_2) // 内容.insertBefore(参考点) 元素集合的前面。

四、删除节点

如果文档中某一个元素多余,那么我们可以使用 jQuery 中的 remove() detach() 和empty() 方法删除节点。


.remove() 将匹配元素集合从 DOM 中删除,当我们想将元素自身移除时我们用.remove(),同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的 jQuery 数据。

 $('ul').remove()// 删除ul

detach() 从 DOM 中去掉所有匹配的元素。.detach()方法和.remove()一样, 除了.detach() 保存所有 jQuery 数据而且和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入 DOM 时,这种方法很有用。

 var $li = $("ul").detach(); //删除元素

empty() 从 DOM 中移除集合中匹配元素的所有子节点。这个方法不接受任何参数。这个方法不仅移除子元素,同样移除元素里的文本。因为,元素里任何文本字符串都被看做是该元素的子节点。

$("ul li:eq(1)").empty(); //获取第2个li元素节点后,清除此元素里的内容,注意是元素里面

五、复制节点

复制节点可以通过 clone()方法来实现, 当 clone()中传递了参数 true 时,代表复制元素的同时复制其所绑定的元素。

$('ul  li').clone(true).appendTo('ul')   
true参数决定着你是否可以复制,复制出来的元素

六、替换节点

.replaceAll() 用集合的匹配元素替换每个目标元素。
.replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
.replaceAll() 和 .replaceWith() 功能一样,但是目标和源相反。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-15 01:54:56  更:2022-09-15 01:57:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:46:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码