jQuery中的DOM操作【续】
一、复制节点
$(选择器字符串).clone(false) 【返回克隆的节点对象】
参数:
false,浅复制,复制元素但不复制元素中所绑定的事件【默认为false】
true,深复制,复制元素且复制元素中所绑定的事件
注:
js的原生的cloneNode()方法复制节点 深复制代表复制子节点 浅复制代表不复制子节点 与事件没有关系
二、替换节点
下面函数的一些相关说明:
a、参数可能是HTML字符串,DOM元素,或者jQuery对象
b、会删除与节点相关联的所有数据和事件处理程序
replaceWith() 【用参数节点替换自身】【返回被替换的元素】
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
eg:
$('div').replaceWith('<span>hello<span>'); //使用span节点替换所有div节点【每个div均用span节点替换】
replaeAll() 【自身替换参数中的节点】
替换节点与被替换节点与replaceWith()相反
eg:
$('<span>hello</span>').replaeAll('div') //使用span节点替换所有div节点【每个div均用span节点替换】
三、包裹节点
wrap([wrappingElement])
在每个匹配的元素外层包上一个html元素。
wrapAll([wrappingElement])
将所有匹配的元素用一个元素来包裹,可以嵌套多层,但是最内层只能有一个元素。
所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的HTML结构进行包裹。
wrapInner([wrappingElement])
每个匹配元素里面内容(子元素)都会被这种结构包裹【匹配元素里面需要有内容;如果为空则最后一个空元素也会出现包裹html元素】
四、节点遍历
注意:
下面这些方法可以用来解析html文档和xml文档【html文档和xml文档都可以转换为dom模型】
也就是说在ajax中,如果后台传过来的是xml文档,那么我们使用jquery也可以使用下面方法解析
children([selector]) 【获取匹配元素的子元素集合】
用于取得匹配元素的子元素集合
eg:
$(".content").children(".inner"); //获取类名content的所有子元素【有参数则再过滤出类名为inner的子元素】
$(".content>.inner"); //与上面效果是一样的
find(selector) 【获取所有匹配元素中符合参数的所有后代元素】
在当前元素对象中的子元素中查找,和参数所匹配的所有的后代元素
eg:
$(".content").find(".inner"); //获取类名content的所有后代中类名为inner的元素
$(".content .inner"); //与上面效果是一样的
next([selector]) 【获取下一个兄弟元素】
取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
nextAll([selector]) 【获取后面的兄弟元素】
查找当前元素之后所有的同辈元素。
prev([selector]) 【获取前一个兄弟元素】
取得匹配元素前面紧邻的兄弟元素
prevAll([selector]) 【获取前面所有的兄弟元素】
查找当前元素之前所有的同辈元素
siblings([selector]) 【获取所有兄弟元素】
取得匹配元素前后所有的兄弟元素
closest( selector) 【获取最近的匹配元素】
取得和参数匹配的最近的元素,如果匹配不上继续向上查找父元素
filter(selector) 【继续过滤原来匹配元素】
把当前所选择的所有元素再进行筛选过滤
parent([selector]) 【获取父元素】
取得匹配元素集合中,每个元素的父元素
parents([selector]) 【获取祖先元素】
获得集合中每个匹配元素的祖先元素
jQuery中的DOM操作【续】的更多相关文章
- 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 ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...
- JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
随机推荐
- AtCoder Grand Contest 033 题解
传送门 我比赛的时候怕不是在睡觉啊-- \(A\ Darker\ and\ Darker\) 我是不是想得太复杂了--根本没必要像我这样做吧-- 首先问题可以转化成令\(p_{i,j}\)表示到\(( ...
- Java 数组ArrayList语法
恶补基础,记录一下数组ArrayList的常用语法 1.导入 import java.util.ArrayList; 2.定义数组list ArrayList<类名> list = new ...
- html-前端内容初识
HTML解释: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的规则(W3C),大家都来遵守他,这 ...
- 第05组 团队Git现场编程实战
一.组员职责分工 组员 分工 卢欢(组长) 前后端接口设计 严喜 寻找相关资料 张火标 设计并描述界面原型 钟璐英 编写随笔 周华 填写完善文档 古力亚尔·艾山 填写完善文档 张聪 前后端接口设计 池 ...
- 动态内存管理:malloc/free/new/delete/brk/mmap
这是我去腾讯面试的时候遇到的一个问题——malloc()是如何申请内存的? c++ 内存获取和释放 new/delete,new[]/delete[] c 内存获取和释放 malloc/free, c ...
- 洛谷p1458顺序的分数题解
抱歉,您们的蒟蒻yxj不知道怎么插入链接qwq就只好粘个文本的了qwq:https://www.luogu.org/problemnew/show/P1458 没错,是个黄题,因为你们的小蒟蒻只会这样 ...
- 洛谷P2704 [NOI2001]炮兵阵地题解
题目描述 司令部的将军们打算在\(N * M\)的网格地图上部署他们的炮兵部队.一个\(N * M\)的地图由N行M列组成,地图的每一格可能是山地(用\("H"\) 表示),也可能 ...
- 【LG3647】[APIO2014]连珠线
[LG3647][APIO2014]连珠线 题面 洛谷 题解 首先考虑一下蓝线连起来的情况,一定是儿子-父亲-另一个儿子或者是儿子-父亲-父亲的父亲. 而因为一开始只有一个点在当前局面上,将一条红边变 ...
- 对最长公共子序列(LCS)等一系列DP问题的研究
LIS问题: 设\(f[i]\)为以\(a[i]\)结尾的最长上升子序列长度,有: \[f[i]=f[j]+1(j<i&&a[j]<a[i])\] 可以用树状数组优化至\( ...
- 【CF848B】 Rooter's Song
题目链接 \(solution\) 类似于蚂蚁那道题的做法 弹性碰撞相当于交换位置并继续前进,考虑一个起点\((x,0)\),时间为\(t\)出发的\(dancer\),相当于从\((x,-t)\)的 ...