Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery中的DOM操作

jQuery中的DOM操作

作者头像
IMWeb前端团队
发布于 2019-12-03 07:53:10
发布于 2019-12-03 07:53:10
1.3K00
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

Dom操作的分类:DOM Core,html-DOM,CSS-DOM

查找节点:

查找属性节点(通过jq选择器),操作属性节点(attr(‘属性名’,’属性值’)), 操作文本节点(text())读/写

1.创建节点:

可以使用工厂函数:$(创建节点的内容)。要使用标准的开闭和标签

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('<p id="text">p</p>')//创建了一个id为text,内容为p的p标签

返回值是一个jq对象

2.插入节点:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
append()://向匹配的元素的内部的结尾处追加内容
appendTo()://将每个匹配的元素追加到指定的元素内部结尾处
$('<p id="text">p</p>').appendTo("#outer");    
$('#outer').append('<p id="text2">插入p2</p>');  // 主语宾语调换
prepend()://向每个元素的内部的开始处插入内容
prependTo()://将每个匹配的元素插入到指定元素内部的开始处
$('<p id="text">插入p</p>').prependTo("#outer");
$('#outer').prepend('<p id="text2">插入p2</p>');   //主语宾语调换

插入为某个节点的子节点

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
insertAfter://将指定元素a插入到另一个元素b的后面
After://在b元素的后面插入a
insertBefore://将指定元素a插入到另一个元素b的前面
Before://在b元素的前面插入a

删除节点: remove:$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。不占位置

清空节点:

empty:$(selector).empty() 从指定元素中移出所有的内容,包括子节点和内容。占位置

复制节点:clone():只复制节点中的内容,不包括任何行为。 注意克隆后节点的id属性,避免id重复 clone(true):复制内容,也复制行为

替换节点:xxx.replace(a)用xxx把a替换掉 前后宾语调换:a.replaceWith(xxx)将a替换成xxx 节点互换需要先克隆节点 包裹节点:warp() 将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用。将所有的元素进行单独包裹 wrap(“”) wrapAll() 将所有匹配的元素用一个元素来包裹, wrapAll(“”)

wrapInner()包裹指定元素中的子内容(包括文本节点)

find()方法:查找子节点,返回值为子节点对应的jq对象 var text=$trNode.find(“te:first”).text();//获取tr的第一个td的文本节点的文本值

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-09-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js 实现元素拖拽
js 实现拖拽,主要使用元素的 onmousedown、onmousemove、onmouseup 三个事件实现。
蓓蕾心晴
2022/11/12
10.4K0
js 实现元素拖拽
蓓蕾心晴
2025/04/20
340
Vue之 Element dialog 拖拽
默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失。
IT工作者
2022/04/23
9250
原生JS实现拖拽位置预览
给大家分享一个拖拽元素时添加预览的小Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta http-equ
越陌度阡
2020/11/26
5.5K0
原生JS实现拖拽位置预览
vue页面采用原生方式拖动
主要的难点是怎么获取要拖动的元素,e.target是获取的目标元素,可以采用while循环
tianyawhl
2021/10/09
6140
Element UI 中 dialog 可拖拽实现方法
三、在vue页面中使用,给 el-dialog 添加 v-dialogDrag指令
tianyawhl
2020/11/03
4.9K0
【javaScript案例】之鼠标拖拽效果
我认为这个实验的难点是保持盒子和鼠标的相对位置不变,通过鼠标按下和移动来实现拖拽的效果
xinxin-l
2022/03/29
1.4K0
【javaScript案例】之鼠标拖拽效果
鼠标捕获(setCapture,releaseCapture)的学习
鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象——对指定的对象设置鼠标捕获。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
全栈程序员站长
2022/09/06
6010
鼠标捕获(setCapture,releaseCapture)的学习
原生JS实现拖拽元素时与另一元素碰撞检测
给大家分享一个用原生JS实现拖拽元素时与另个一元素碰撞检测的小Demo,效果如下:
越陌度阡
2020/11/26
1.7K0
原生JS实现拖拽元素时与另一元素碰撞检测
图片拖拽在项目中的实现
公司目前在做一个任务宝的项目,主要是用公众号举行一些活动,通过公众号推送活动的海报,海报上面附有公众号的二维码,当用户扫码进入公众号以后,提示用户需要完成一定数量的分享即可免费赠送相关礼品等等,活动的主要目的是为了涨粉。
越陌度阡
2020/11/26
6000
原生JS实现拖拽照片墙,实现照片互换位置
分享一个用原生JS实现的可拖拽照片墙,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
越陌度阡
2020/11/26
2.7K0
原生JS实现拖拽照片墙,实现照片互换位置
JS示例37-鼠标拖拽
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style> <scr
专注APP开发
2019/11/07
9.4K0
vue拖动通过指令方式
主要用到 onmousedown onmousemove onmouseup
tianyawhl
2021/10/09
2840
原生JS编写的照片墙效果实例演示特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>照片墙一多实
欢醉
2018/01/22
4.2K0
原生JS编写的照片墙效果实例演示特效
鼠标拖拽移动DIV 记录一下
export default { data() { return {} }, methods: { mousedown(e) { // 被移动的主体 mainDiv const mainDiv = document.querySelector('.vvhan-com') // 鼠标点击位置与主体边的距离 const distanceX = e.clientX - mainDiv.offsetL
骤雨重山
2022/05/30
1.2K0
原生JS实现拖拽缩放元素
今天给大家分享一个用原生JS实现的拖拽缩放元素大小的Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta
越陌度阡
2020/11/26
5.7K0
原生JS实现拖拽缩放元素
组件左右拖动
<template> <div> <div style="display:flex;overflow:hidden;"> <div class="left" style="width:300px;margin-right:20px;" ref="leftRef"> <ul @dragstart="handleDragStart"> <li v-for="(item,index) in componentsList" :key="index"
tianyawhl
2022/05/06
2.1K0
原生JS实现各种运动之拖拽碰撞加重心运动
分享一个用原生JS实现的拖拽碰撞加上重心运动的小Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta ht
越陌度阡
2020/11/26
1.2K0
原生JS实现各种运动之拖拽碰撞加重心运动
原生JS中的拖拽方法继承
给大家分享一个用原生JS编写的拖拽及拖拽方法继承的 小Demo,代码如下。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS中的拖拽方法继承</title> <style> #div1 { width: 100px; height: 100px;
越陌度阡
2020/11/26
5K0
Js拖拽事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>darg</title> <style type="text/css"> .login_title { cursor: move; position: absolute; top: 300px; left: 200px; background: #259; height: 60px; width: 500px; } </style> </head> <body> <di
2021/11/08
14.4K0
相关推荐
js 实现元素拖拽
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验