jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法
jQuery操作节点我们可以分六点来讲,查找节点、创建节点、插入节点、删除节点、替换节点、复制节点。
一、查找节点
text() - 设置或返回所选元素的文本内容 ,html() - 设置或返回所选元素的内容(包括 HTML 标记),val() - 设置或返回表单字段的值(value值),attr() 方法用于获取属性值
二、创建节点
工厂函数 $() 可以用于创建或获取节点。
1. 我们以前经常用 $(selector) 就是通过选择器获取节点
2. $(element):把DOM节点转化成jQuery节点
3. $(html):使用HTML字符串创建jQuery节点
$("li");//得到li对象
var $newNode=$("<li></li>");//创建一个li对象
var $newNode2=$("<li title='last'>北我是一个列表</li>");//创建含文本与属性<li>元素节点
三、插入节点
在标签内部插入内容

在标签外部插入

//内部插入
$("p").append(" <b>追加文本</b>。");//效果就是<p>p标签内容 <b>追加文本</b></p>
//外部插入
$("p").after(" <b>追加文本</b>。");//效果就是<p>p标签内容 </p><b>追加文本</b>
四、删除节点
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
//假设HTML是 <p class="a">p标签<b>b标签</b></p>
$("p").remove();//效果为 内容节点全部删除
$("p").empty();//效果为 : <p class="a"></p> 只会保留节点,内容清空
五、替换节点
olddom.replaceWith( newdom):用提供的内容(newdom)替换集合中所有匹配的元素(olddom)并且返回被删除元素的集合
newdom.replaceAll( olddom) :用集合的匹配元素替换每个目标元素,相当于上面用法反过来
六、复制节点
clone() 方法生成被选元素的副本,包含子节点、文本和属性。参数可选(true、false)
表示是否同时复制元素的附加数据和绑定事件,默认为false只会复制节点,不会复制元素的附加数据和绑定事。
写的比较粗糙,但是却是原创,有疑问可以关注公众号 gh_9befddbfa55d
jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法的更多相关文章
- DOM节点的创建、插入、删除
值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...
- JavaScript字符串插入、删除、替换函数
JavaScript字符串插入.删除.替换函数 说明: 以下函数中前两个函数取出查找字符串的前一部分和后一部分,以用于其他函数.注意,调用一次 replaceString(mainStr,search ...
- Javascript:splice()方法实现对数组元素的插入、删除、替换及去重
定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...
- Swift字符串的插入、删除和替换-备
对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字符串. insert(_:atIndex:). ...
- 数组多功能splice()方法的插入,删除,替换
多功能splice()插入.删除.替换 <script type="text/javascript"> var arr=['A','B','C','D','E','F' ...
- 《从零开始学Swift》学习笔记(Day 14)——字符串的插入、删除和替换
原创文章,欢迎转载.转载请注明:关东升的博客 对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字 ...
- javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点
DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...
- js的DOM节点操作:创建 ,插入,删除,复制,查找节点
DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...
- jQuery里面的DOM操作(查找,创建,添加,删除节点)
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...
随机推荐
- k8s Service学习
service的概念 kubernetes service定义了一个抽象概念,一个pod的逻辑分组,一种可以访问的策略---通常称为服务.这组pod能够被service访问到,通常通过label se ...
- scala_spark实践2
参考:jianshu.com/p/9d2d225c1951 监听socket获取数据,代码如下:这里使用nc -lk 9999 在ip为10.121.33.44的机器上发送消息 object Sock ...
- java 中类为啥要序列化
java里为什么要序列化?http://zhidao.baidu.com/link?url=7_wAQ8eAl28vcJPE5OKM5Y0Bo4aINNQokHhRmI9XPszEoTO5QF-gNb ...
- HTTPS工作流程
HTTPS工作流程 RSA算法 RSA的密钥分成两个部分: PublicKey 加密数据 验证签名 不能解密 任何人都可以获得 Private Key 数据签名(摘要算法) 解密 加密(不用此功能) ...
- T - Nash Matrix CodeForces - 1316D
题意: 输入n行数,没行由2*n个数,表示一个坐标(x,y). 如果x和y==-1表示从该点(i,j)出发,按照构造的前移动不会停下. 否则就要到点(x,y)处停下. 题解: 首先处理-1 枚举每个 ...
- E. 数字串
给你一个长度为 n 的数字串,找出其中位数不超过15位的不包含前导0和后导0的数 x ,使得 x+f(x) 是一个回文数,其中 f(x) 表示将 x 反转过来的数. 输入格式 多组输入,处理到文件结束 ...
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
- Java中Character类
Character 类在对象中包装一个基本类型char的值此外,该类提供了几种方法,以确定字符的类别(小写字母,数字,等),并将字符从大写转小写,反之亦然. 构造方法: Character(char ...
- Scala学习系列(三)——入门与基础
本课程源码共享于 https://github.com/tree1123/learning-scala 首先,打开IDEA编辑器的SbtExampleProject项目,我们将在这个项目下进行练习 本 ...
- 关于Swiper和vue数据顺序加载问题处理
在使用swiper插件的时候,常常因为异步加载数据产生的顺序问题而使插件不能正常实行,所以可以使用vue的updated来解决. 问:什么时候 进updated方法? 答:只有事先设置好的data变量 ...