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中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法的更多相关文章

  1. DOM节点的创建、插入、删除

    值得注意的是:节点的创建.插入以及删除都是操作父级容器.(1)创建var newDiv = documnet.createElement('div'); ——创建的元素只能操作一次 (2)插入/追加a ...

  2. JavaScript字符串插入、删除、替换函数

    JavaScript字符串插入.删除.替换函数 说明: 以下函数中前两个函数取出查找字符串的前一部分和后一部分,以用于其他函数.注意,调用一次 replaceString(mainStr,search ...

  3. Javascript:splice()方法实现对数组元素的插入、删除、替换及去重

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...

  4. Swift字符串的插入、删除和替换-备

    对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字符串. insert(_:atIndex:). ...

  5. 数组多功能splice()方法的插入,删除,替换

    多功能splice()插入.删除.替换 <script type="text/javascript"> var arr=['A','B','C','D','E','F' ...

  6. 《从零开始学Swift》学习笔记(Day 14)——字符串的插入、删除和替换

    原创文章,欢迎转载.转载请注明:关东升的博客 对应可变字符串可以插入.删除和替换,String提供了几个方法可以帮助实现这些操作.这些方法如下: splice(_:atIndex:).在索引位置插入字 ...

  7. javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

    DOM 含义: DOM 是文档对象模型(Document Object Model) 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准.其赋予了JS 操作节点的能力,当网页被加载时,浏 ...

  8. js的DOM节点操作:创建 ,插入,删除,复制,查找节点

    DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的 ...

  9. jQuery里面的DOM操作(查找,创建,添加,删除节点)

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...

随机推荐

  1. lr使用soap协议,来对webservice接口进行测试

    实际项目中基于WSDL来测试WebService的情况并不多,WSDL并不是WebService测试的最佳选择. 最主要的原因还是因为WSDL文档过于复杂. 在案例(天气预报WebService服务) ...

  2. Powershell抓取网页信息

    一般经常使用invoke-restmethod和invoke-webrequest这两个命令来获取网页信息,如果对象格式是json或者xml会更容易 1.invoke-restmethod 我们可以用 ...

  3. pinpoint php 使用不当引发棘手的问题 --psid sid tid pname ptype ah

    Pinpoint 简单介绍 Pinpoint 是用 Java 编写的 APM(应用性能管理)工具,用于大规模分布式系统,以帮助分析系统的总体结构以及分布式应用程序的组件之间是如何进行数据互联的. 安装 ...

  4. Android UIAutomator自动化测试

    描述:UiAutomator接口丰富易用,可以支持所有Android事件操作,事件操作不依赖于控件坐标,可以通过断言和截图验证正确性,非常适合做UI测试. UIAutomator不需要测试人员了解代码 ...

  5. Linux终端命令格式

    01.终端命令格式 command [-options] [parameter] 说明: command:命令名,响应功能的英文单词或单词的缩写 [-options]:选项,可用来对命令进行控制,也可 ...

  6. Python-selenium-自动化测试模型

    1.线性测试 优势:每一个脚本都是完整独立的,每一个脚本对应一个测试用例 缺点:开发成本高,会有重复操作重复脚本:维护成本也高,修改重复操作的脚本时,要逐一进行修改. 2.模块化驱动测试 把重复的操作 ...

  7. M - Help Hanzo LightOJ - 1197 (大区间素数筛法)

    题解:素数区间问题.注意到a和b的范围是1<<31,所以直接暴力打表肯定不可以.如果一个数是合数,他的两个因子要么是两个sqrt(x),要么就分布在sqrt(x)两端,所以我们可以根据sq ...

  8. 忍不住还是手写了一遍博客的css

    F12边调边改,的一点一点撸出来这个效果.感觉已经可以了.日历感觉没什么用直接隐藏了.

  9. Maven+JSP+Servlet+JDBC+Redis+Mysql实现的黑马旅游网

    项目简介 项目来源于:https://gitee.com/haoshunyu/travel 本系统是基于Maven+JSP+Servlet+JdbcTemplate+Redis+Mysql实现的旅游网 ...

  10. Servlet 和 Servlet容器

    Servlet 很多同学可能跟我一样始终没有搞清楚到底什么是 Servlet,什么是 Servlet 容器.网上看了很多帖子,或许人家说的很清楚,但是自己的那个弯弯就是拐不过来. 想了很久说一下自己的 ...