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 相关文章推荐
      在IE下:float属性会影响offsetTop的取值
      Dec 22 Javascript
      JS控制显示隐藏兼容问题(IE6、IE7、IE8)
      Apr 01 Javascript
      浅析Prototype的模板类 Template
      Dec 07 Javascript
      Js四则运算函数代码
      Jul 21 Javascript
      Javascript高级技巧分享
      Feb 25 Javascript
      Jquery仿IGoogle实现可拖动窗口示例代码
      Aug 22 Javascript
      jquery $(document).ready()和window.onload的区别浅析
      Feb 04 Javascript
      jQuery实现边框动态效果的实例代码
      Sep 23 Javascript
      JQuery实现定时刷新功能代码
      May 09 jQuery
      浅谈angular2路由预加载策略
      Oct 04 Javascript
      seaJs使用心得之exports与module.exports的区别实例分析
      Oct 13 Javascript
      JS页面动态绘图工具SVG,Canvas,VML介简介
      Oct 16 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面向对象三大特点学习(充分理解抽象、封装、继承、多态)
      2012/05/07 PHP
      thinkphp中空模板与空模块的用法实例
      2014/11/26 PHP
      PHP实现统计所有字符在字符串中出现次数的方法
      2017/10/17 PHP
      jQuery 幻灯片插件(带缩略图功能)
      2011/01/24 Javascript
      jquery click([data],fn)使用方法实例介绍
      2013/07/08 Javascript
      php中给js数组赋值方法
      2014/03/10 Javascript
      JQuery中属性过滤选择器用法实例分析
      2015/05/18 Javascript
      jQuery实现气球弹出框式的侧边导航菜单效果
      2015/09/22 Javascript
      JS常见问题之为什么点击弹出的i总是最后一个
      2016/01/05 Javascript
      第一次接触Bootstrap框架
      2016/10/24 Javascript
      JavaScript对JSON数据进行排序和搜索
      2017/07/24 Javascript
      vue2.0 better-scroll 实现移动端滑动的示例代码
      2018/01/25 Javascript
      解决jquery有正确返回值但不执行success函数的问题
      2018/08/20 jQuery
      js jquery 获取某一元素到浏览器顶端的距离实现方法
      2018/09/05 jQuery
      Nodejs实现用户注册功能
      2019/04/14 NodeJs
      js实现页面多个日期时间倒计时效果
      2019/06/20 Javascript
      js时间转换毫秒的实例代码
      2019/08/21 Javascript
      layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
      2019/09/24 Javascript
      vue实现扫码功能
      2020/01/17 Javascript
      微信小程序实现上传多张图片、删除图片
      2020/07/29 Javascript
      详解vue中v-model和v-bind绑定数据的异同
      2020/08/10 Javascript
      vue调用本地摄像头实现拍照功能
      2020/08/14 Javascript
      Python函数式编程指南(二):从函数开始
      2015/06/24 Python
      python画柱状图--不同颜色并显示数值的方法
      2018/12/13 Python
      Python HTML解析模块HTMLParser用法分析【爬虫工具】
      2019/04/05 Python
      详解pandas删除缺失数据(pd.dropna()方法)
      2019/06/25 Python
      谈一谈数组拼接tf.concat()和np.concatenate()的区别
      2020/02/07 Python
      python基于socket模拟实现ssh远程执行命令
      2020/12/05 Python
      pycharm 如何取消连按两下shift出现的全局搜索
      2021/01/15 Python
      前端面试必备之CSS3的新特性
      2017/09/05 HTML / CSS
      Julep官网:美容产品和指甲油
      2017/02/25 全球购物
      Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
      2017/08/24 全球购物
      网络公司美工设计工作个人的自我评价
      2013/11/03 职场文书
      办公文员的工作岗位职责
      2013/11/12 职场文书
      有个性的自我评价范文
      2013/11/15 职场文书
      自考毕业自我鉴定
      2014/03/18 职场文书