Jquery元素追加和删除的实现方法


Posted in Javascript onMay 24, 2016

介绍

DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。

1、DOM Core

DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。

例如:document,getElementsByTagName(“form”);//使用DOM Core来获取表单对象的方法。

2、HTML-DOM

在使用Javascript和DOM为HTML文件编写脚本时,有许多属于HTML-DOM的属性,HTML-DOM的出现甚至比DOM Core还要早,他提供了一些更简明的记号来描述各种HTML元素的属性。

例如:document.forms //HTML-DOM提供了一个forms对象。

PS:可以看出,获取对象、属性即可以用DOM Core来实现民,也可以用HTML-DOM实现。

3、CSS-DOM

CSS-DOM是针对CSS的操作,在javascript中,CSS-DOM主要的作用是获取和设置style对象的各种属性,由此达到网页呈现出各种不同的效果.

例如:element.style.color=”red”;//设置某元素的字体颜色的方法。

常用方法

1.查找元素节点

var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);

2.查找元素属性

利用jquery的attr()方法来获取元素的各种属性的值,attr()方法的参数可以是一个,也可以是两个。

当参数是一个时,则是要查询的属性名称。

当参数是两个时,则可以设置属性的值。

alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数

$(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数

3.添加元素节点

$(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象,并将这个dom对象包装成一个jquery对象返回,总之就是把标记所有html代码都放到$()工厂里面就行了!

例:

var $htmlLi = $(”<li title='香蕉'>香蕉</li>”);//创建DOM对象
var $ul = $(“ul”);//获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

下面列出部分插入节点的方法

方法 描述 示例
Append() 向每个匹配的元素内追加内容 HTML代码  
    JQuery代码 $(“ul”).append(“
  • AA
  • ”); 结果
    • AA
     
    appendTo() 注意大小写,我试验时appendto没通过。 该方法和Append()相反,a.Append(b)是将b追加到a中,而appendTo()是将b追求到a中 HTML代码  
      JQuery代码 $ (“
    • AA
    • ”).appendTo (“ul”).; 结果
      • AA
       
      Prepend() 向每个匹配的元素内部前置内容 HTML代码  

      哈哈

      JQuery代码 $(“p”).prepend(“ABC”); 结果

      ABC哈哈

      prependTo() 该方法和Prepend()相反,a. Prepend (b)是将b前置到a中,而prependTo ()是将b前置到a中 HTML代码  

      哈哈

      JQuery代码 $(“ABC”).prependTo.(“p”); 结果

      ABC哈哈

      After() 在每个匹配的元素之后插入内容,是之后 HTML代码  

      AAA

      JQuery代码 $(“p”).After(“cc”); 结果

      AAA

      cc
      insertAfter() 和After()相反 HTML代码  

      AAA

      JQuery代码 $ (“cc”).After(“p”); 结果

      AAA

      cc
      Before() 在每个匹配的元素之前插入内容 HTML代码  

      AAA

      JQuery代码 $(“p”). Before (“cc”); 结果 cc

      AAA

      insertBefore() 和Before()相反 HTML代码  

      AAA

      JQuery代码 $ (“cc”). insertBefore (“p”); 结果 cc

      AAA

      好了,不要斋看,自己动手试试吧:)

      4.删除元素节点

      由于我们需要经常动态去改变DOM元素,因此Jquery提供了两种删除节点的方法,即remove()和empty();

      4.1 remove()方法

      $(“p”).remove();// 我们可以获取到要删除的元素,然后调用remove()方法

      $(“ul li:eq(0)”).remove().appendTo(“ul”);// 删除ul下面的第一个li标记,然后再把删除的li标记重新加到ul里面,remove()方法返回删除元素的引用,这时你可以继续使用

      $(“ul li”).remove(“li[title!=ABC]“);//remove可以接受通过参数来选择性的删除符合条件的元素;

      4.2 empty()方法

      严格来讲,empty()方法并不是删除元素,而是清空

      例:

      HTML代码

       <ul>
       <li title=”AAA”>AAA</li>
       </ul>

      JQuery代码

      $(“ul li:eq(0)”).empty();

      结果

      <ul>
       <li title=”AAA”></li>
       </ul>

      记住,只会清空内容,不会请空属性;

      以上这篇Jquery元素追加和删除的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

      Javascript 相关文章推荐
      Javascript下IE与Firefox下的差异兼容写法总结
      Jun 18 Javascript
      使用Jquery来实现可以输入值的下拉选单 雏型
      Dec 06 Javascript
      javascript动态创建表格及添加数据实例详解
      May 13 Javascript
      JQuery包裹DOM节点的方法
      Jun 11 Javascript
      JS组件Bootstrap ContextMenu右键菜单使用方法
      Apr 17 Javascript
      微信小程序url与token设置详解
      Sep 26 Javascript
      JS实现图片旋转动画效果封装与使用示例
      Jul 09 Javascript
      vue实现的微信机器人聊天功能案例【附源码下载】
      Feb 18 Javascript
      一篇文章,教你学会Vue CLI 插件开发
      Apr 17 Javascript
      微信小程序实现写入读取缓存详解
      Aug 30 Javascript
      微信小程序添加插屏广告并设置显示频率(一天一次)
      Dec 06 Javascript
      在vue中实现给每个页面顶部设置title
      Jul 29 Javascript
      jquery html动态添加的元素绑定事件详解
      May 24 #Javascript
      js和jQuery设置Opacity半透明 兼容IE6
      May 24 #Javascript
      浅析jquery unbind()方法移除元素绑定的事件
      May 24 #Javascript
      jQuery unbind 删除绑定事件详解
      May 24 #Javascript
      深入理解jQuery之防止冒泡事件
      May 24 #Javascript
      30分钟快速掌握Bootstrap框架
      May 24 #Javascript
      JQuery 传送中文乱码问题的简单解决办法
      May 24 #Javascript
      You might like
      PHP脚本自动识别验证码查询汽车违章
      2016/12/20 PHP
      Thinkphp5 自定义上传文件名的实现方法
      2019/07/23 PHP
      根据分辩率调用不同的CSS.
      2007/01/08 Javascript
      JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
      2013/12/06 Javascript
      js通过location.search来获取页面传来的参数
      2014/09/11 Javascript
      浅谈JavaScript中的string拥有方法的原因
      2015/08/28 Javascript
      jquery动态遍历Json对象的属性和值的方法
      2016/07/27 Javascript
      jQuery中$.ajax()方法参数解析
      2016/10/22 Javascript
      js实现带简单弹性运动的导航条
      2017/02/22 Javascript
      bootstrap轮播图示例代码分享
      2017/05/17 Javascript
      详解使用webpack打包编写一个vue-toast插件
      2017/11/08 Javascript
      nodeJS服务器的创建和重新启动的实现方法
      2018/05/12 NodeJs
      微信小程序官方动态自定义底部tabBar的例子
      2019/09/04 Javascript
      JS中this的4种绑定规则详解
      2020/02/04 Javascript
      vue打包静态资源后显示空白及static文件路径报错的解决
      2020/09/02 Javascript
      Vue通过provide inject实现组件通信
      2020/09/03 Javascript
      详细介绍Python语言中的按位运算符
      2013/11/26 Python
      使用Python脚本生成随机IP的简单方法
      2015/07/30 Python
      python3.5 + PyQt5 +Eric6 实现的一个计算器代码
      2017/03/11 Python
      Django自定义分页与bootstrap分页结合
      2021/02/22 Python
      Python表示矩阵的方法分析
      2017/05/26 Python
      Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
      2018/12/03 Python
      Python多进程方式抓取基金网站内容的方法分析
      2019/06/03 Python
      pandas的连接函数concat()函数的具体使用方法
      2019/07/09 Python
      Kears+Opencv实现简单人脸识别
      2019/08/28 Python
      浅谈Python中的模块
      2020/06/10 Python
      纯CSS3+DIV实现小三角形边框效果的示例代码
      2020/08/03 HTML / CSS
      Carolina工作鞋官网:Carolina Footwear
      2019/03/14 全球购物
      办公室内勤工作职责
      2013/12/11 职场文书
      面试后感谢信
      2014/02/01 职场文书
      元旦联欢会策划方案
      2014/06/11 职场文书
      建筑结构施工求职信
      2014/07/11 职场文书
      党员学习群众路线心得体会
      2014/11/04 职场文书
      工作一年自我鉴定
      2019/06/20 职场文书
      深入理解mysql事务隔离级别和存储引擎
      2022/04/12 MySQL
      高通2023 年将发布高性能PC处理器
      2022/04/29 数码科技