一、复制节点
$(选择器字符串).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操作【续】的更多相关文章

  1. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  2. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  3. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  4. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  5. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  6. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  7. 锋利的jQuery ——jQuery中的DOM操作(三)

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  8. jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

  9. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  10. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

随机推荐

  1. 201871010128-杨丽霞《面向对象程序设计(java)》第四周学习总结

    201871010128-杨丽霞<面向对象程序设计(java)>第四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh 这个 ...

  2. l获取list 的长度,EL表达式获取list的长度,EL表达式获取list大小

    在jsp页面中不能通过${list.size}取列表长度,而是 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref ...

  3. go安装及使用

    一.安装 Windows直接使用 MSI installer . 默认安装目录为 C:\Go,回自动配置好环境变量. 并默认设置工作目录为:C:\Users\用户名\go 二.使用 在默认的工作目录下 ...

  4. 【Linux】netstat命令

    https://www.cnblogs.com/ftl1012/p/netstat.html这个讲的不错 https://www.linuxprobe.com/netstat-common-metho ...

  5. Scrapy笔记08- 文件与图片

    Scrapy笔记08- 文件与图片 Scrapy为我们提供了可重用的item pipelines为某个特定的Item去下载文件. 通常来说你会选择使用Files Pipeline或Images Pip ...

  6. [RN] 阿里 ant-design 菜单比较丰富 https://github.com/ant-design/ant-design-mobile

    阿里 ant-design  菜单比较丰富 https://github.com/ant-design/ant-design-mobile 天和风雨顺 地和五谷丰 人和事业旺 家和万事兴

  7. ZROI 暑期高端峰会 A班 Day6 离线问题

    FBI Warning:本文含有大量人类本质之一. 动态联通问题 允许离线. 模板,不讲了. 归并排序 %@)(#&%)++%($@)%!#(&%)(&@))) 主定理 U^( ...

  8. OpenStack总体架构概览&OpenStack核心组件介绍

    下面个是51CTO上一位朋友发布的O版OpenStack核心组件说明,总结的非常到位,所以我就不再造轮子了.~,~ https://down.51cto.com/data/2448945 私有云 公有 ...

  9. 微服务异步架构---MQ之RocketMQ

    “我们大家都知道把一个微服务架构变成一个异步架构只需要加一个MQ,现在市面上有很多MQ的开源框架.到底选择哪一个MQ的开源框架才合适呢?” 一.什么是MQ?MQ的原理是什么? MQ就是消息队列,是Me ...

  10. leetcode-19:给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点。

    /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * Lis ...