jQuery中的DOM操作(三)
一、查找节点 【返回jQuery对象】
$(选择器字符串);
使用jQuery函数,里面参数为选择器字符串,查询符合条件的BOM对象并返回jQuery对象
eg:
$('div.one span:first'); //查询所有类名为one的div里面的所有后代span里面的第一个span元素
二、创建节点
$(HTML文本字符串);
使用jQuery函数,里面参数为要创建的节点字符串,返回jQuery对象
eg:
var $newNode = $("<span>hello<span>"); //创建一个span节点,里面内容为hello
三、插入节点
对于下面这些方法的一些相关说明:
a、参数:一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象
b、如果将页面上的元素插入到某元素内,则该插入的元素会从页面上移动过去,原来页面上的元素则会不存在【同一元素节点在页面上是唯一的】
1、插入节点作为最后孩子
append() 【在自身内部插入其它节点作为最后孩子】
向调用该函数的jQuery对象中所有DOM节点内容最后面插入该节点,即将该节点作为他们的最后孩子插入
eg:
var $node = $("<span>hello</span>");
$('div').append($node); //将$node插入到所选取的div内容最后,作为div的最后一个孩子
appendTo() 【将自身插入到其它节点内容中作为最后孩子】
调用方法者与需要插入的节点和append()恰好相反
eg:
$("<span>hello</span>").appendTo($('div')); //将span节点插入到所有匹配的div中并作为div的最后孩子
2、插入节点作为开始孩子
prepend() 【在自身内部插入其它节点作为开始孩子】
向调用该函数的jQuery对象中所有DOM节点内容最前面插入该节点,即将该节点作为他们的最开始的孩子插入
eg:
$('div').appendTo($("<span>hello</span>")); //将span节点插入到所有匹配的div中并作为div的开始孩子
prependTo() 【将自身插入到其它节点内容中作为开始孩子】
调用方法者与需要插入的节点和prependTo()恰好相反
eg:
$("<span>hello</span>").prependTo($('div')); //将span节点插入到所有匹配的div中并作为div的开始孩子
3、插入节点作为兄弟元素
after() 【将节点插入到自身后面作为自己后面的兄弟元素】
在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点插在每个匹配元素的后面。
insertAfter() 【将自身插入到节点后面作为节点后面的兄弟元素】
调用方法者与需要插入的节点和after()恰好相反
before() 【将节点插入到自身前面作为自己前面的兄弟元素】
在匹配元素的前面插入内容(外部插入)作为其兄弟节点插在集合中每个匹配元 素前面。
insertBefore() 【将自身插入到节点前面作为节点前面的兄弟元素】
调用方法者与需要插入的节点和before()恰好相反
四、删除节点
remove([selector]) 【返回被删除的节点对象】
删除指定元素并删除其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中不包含有原来的事件及相关的jQuery数据)
eg:
$('div').remove('.one'); //删除类名为one的div
$('div.one').remove(); //删除类名为one的div
detach([selector]) 【返回被删除的节点对象】
删除指定元素但会保留其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中包含有原来的事件及相关的jQuery数据)
eg:
$('div:not(".one")').remove(':first'); //删除类名不为one的div中的第一个div
$('div.one').remove(); //删除类名为one的div
empty() 【清空元素内容】
无参数,移除匹配元素的所有子节点
eg:
$('div:contains("one")').empty(); //清空的div内容中包含文本one的div元素内容
jQuery中的DOM操作(三)的更多相关文章
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
随机推荐
- 201671030126 赵佳平 实验十四 团队项目评审&课程学习总结
项目 内容 这个作业属于那个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 作业学习目标 掌握软件项目评审会流程:反思 ...
- 树莓派项目(1-2)人脸识别 C++
级联分类器 在这里,我们学习如何使用objdetect在我们的图像或视频中查找对象 https://docs.opencv.org/3.3.0/db/d28/tutorial_cascade_clas ...
- zzulioj - 2599: 对称的数字
题目链接: http://acm.zzuli.edu.cn/problem.php?id=2599 题目描述 小D同学发现了一些数字与其反转数字相加求和得出新数字,新数字再不断重复这个过程,最终可能得 ...
- 拷贝插件 copy-webpack-plugin
用于拷贝文件或目录到输出目录中 https://blog.csdn.net/weixin_41643133/article/details/95489335 https://www.jianshu.c ...
- set(集合)的使用方法
1.普通集合set 直接定义一个set具有动态有序和去重的功效,不再赘述. 如果要实现set时从大到小排序(desc)的,只需要在定义的时候指定“大于符号”,即greater<class> ...
- 【JZOJ5739】【20190706】毒奶
题目 有\(n\)个现实城市,另有\(n\)个幻想城市 原图中在现实城市存在\(m\)条边,在幻想城市存在\(m-1-n\)条边 一个排列是合法的当且进当显示城市 \(i\) 向幻想城市 \(p_i\ ...
- Redis4.0.9最新版本安装时出现的问题
Redis Redis(REmote DIctionary Server,远程数据字典服务器)是开源的内存数据库,常用作缓存或者消息队列. Redis的特点: Redis存在于内存,使用硬盘作为持久化 ...
- JS 实现复制、全选文本
先上效果,由于截图,高亮蓝色成了灰色 参考这位大佬的 https://www.cnblogs.com/dreambin/p/9046999.html HTML 部分 <form name=t ...
- Salesforce 开发整理(四)记录锁定
如果一个对象的记录在满足某个条件的情况下,希望能对其进行锁定,即普通用户没有权限对其进行编辑操作,记录页面显示如下图 一般会在提交审批,或者项目进行到某个阶段的情况下,由后台进行判断要不要锁定记录,或 ...
- 基于 SpringBoot2.0+优雅整合 SpringBoot+Mybatis
SpringBoot 整合 Mybatis 有两种常用的方式,一种就是我们常见的 xml 的方式 ,还有一种是全注解的方式.我觉得这两者没有谁比谁好,在 SQL 语句不太长的情况下,我觉得全注解的方式 ...