一、查找节点    【返回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操作(三)的更多相关文章

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

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

  2. jQuery中的DOM操作总结

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 201871010115——马北《面向对象程序设计JAVA》第二周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  2. python3字符串的方法及注释/ 字符串格式化符号含义及格式化符号含义

     capitalize()   把字符串的第一个字符改为大写   casefold()   把整个字符串的所有字符改为小写   center(width)   将字符串居中,并使用空格填充至长度wid ...

  3. RF元素定位的例子

    Execute Javascript $("input[type='button']").click() Comment Click Button css=input.login_ ...

  4. VIJOS-P1146 宿舍里的故事之五子棋

    洛谷 P1479 宿舍里的故事之五子棋 洛谷传送门 JDOJ 1311: VIJOS-P1146 宿舍里的故事之五子棋 JDOJ传送门 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何 ...

  5. Excel-自定义单元格、填充柄

    数据分析是指用适当的统计分析方法对收集来的大量数据进行分析, 提取有用信息和形成结论而对数据加以详细研究和概括总结的过程. 工具:EXCEL,sql,SAS,SPSS,R,Python.Hadoop. ...

  6. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  7. Layui 关闭当前标签页

    parent.layui.admin.events.closeThisTabs();

  8. Linux下进程间通信方式——信号量(Semaphore)

    1.信号量 信号量本质上是一个计数器(不设置全局变量是因为进程间是相互独立的,而这不一定能看到,看到也不能保证++引用计数为原子操作),用于多进程对共享数据对象的读取,它和管道有所不同,它不以传送数据 ...

  9. 洛谷 p3870 开关 线段树模板

    这两天学了很长时间于是做了一道水题 我就用了模板,就连任何优化都没有 就AC了,复杂度也很爆炸10个点1500多毫秒 这个题就是把lazy[]改成记录下修改的次数,每次修改的时候mod 2,因为反过来 ...

  10. ELK原理

    为什么要使用Elasticsearch?​ 因为在我们中的数据,会随着时间变的非常多,若采用以往的模糊查询,模糊查询前置通配符,如:"%aa%",会放弃索引,导致数据表查询将变成全 ...