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强大的日期函数代码分享
      Sep 04 Javascript
      ExtJs纵坐标值重复问题的解决方法
      Feb 27 Javascript
      jquery操作HTML5 的data-*的用法实例分享
      Aug 17 Javascript
      JavaScript使用循环和分割来替换和删除元素实例
      Oct 13 Javascript
      非jQuery实现照片散落桌子上,单击放大的LightBox效果
      Nov 28 Javascript
      JavaScript基本语法讲解
      Jun 03 Javascript
      值得分享的Bootstrap Ace模板实现菜单和Tab页效果
      Dec 30 Javascript
      JavaScript给每一个li节点绑定点击事件的实现方法
      Dec 01 Javascript
      微信小程序 数组中的push与concat的区别
      Jan 05 Javascript
      微信小程序实现默认第一个选中变色效果
      Jul 17 Javascript
      JavaScript函数、闭包、原型、面向对象学习笔记
      Sep 06 Javascript
      5种方法告诉你如何使JavaScript 代码库更干净
      Sep 15 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 session常见问题集锦及解决办法总结
      2007/03/18 PHP
      PH P5.2至5.5、5.6的新增功能详解
      2014/07/14 PHP
      PHP 实现人民币小写转换成大写的方法及大小写转换函数
      2017/11/17 PHP
      jquery 如何动态添加、删除class样式方法介绍
      2012/11/07 Javascript
      JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
      2012/12/19 Javascript
      jquery模拟SELECT下拉框取值效果
      2013/10/23 Javascript
      编写自己的jQuery提示框(Tip)插件
      2015/02/05 Javascript
      JQuery中节点遍历方法实例
      2015/05/18 Javascript
      jQuery实现分隔条左右拖动功能
      2015/11/21 Javascript
      JS实现快速的导航下拉菜单动画效果附源码下载
      2016/11/01 Javascript
      easyui messager alert 三秒后自动关闭提示的实例
      2016/11/07 Javascript
      如何通过非数字与字符的方式实现PHP WebShell详解
      2017/07/02 Javascript
      jQuery简介_动力节点Java学院整理
      2017/07/04 jQuery
      mpvue小程序仿qq左滑置顶删除组件
      2018/08/03 Javascript
      解决vue-cli项目webpack打包后iconfont文件路径的问题
      2018/09/01 Javascript
      Javascript实现秒表计时游戏
      2020/05/27 Javascript
      小程序实现录音功能
      2020/09/22 Javascript
      微信小程序自定义支持图片的弹窗
      2020/12/21 Javascript
      [02:52]DOTA2新手基础教程 米波
      2014/01/21 DOTA
      [37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
      2020/11/24 DOTA
      在Python中使用第三方模块的教程
      2015/04/27 Python
      python3.x上post发送json数据
      2018/03/04 Python
      Python 中list ,set,dict的大规模查找效率对比详解
      2019/10/11 Python
      python列表返回重复数据的下标
      2020/02/10 Python
      Django 返回json数据的实现示例
      2020/03/05 Python
      Python CSS选择器爬取京东网商品信息过程解析
      2020/06/01 Python
      Django正则URL匹配实现流程解析
      2020/11/13 Python
      HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
      2017/08/18 HTML / CSS
      北美主要的汽车零部件零售商:AutoShack.com
      2019/02/23 全球购物
      给同事的道歉信
      2014/01/11 职场文书
      大学生活动策划方案
      2014/02/10 职场文书
      金融事务专业求职信
      2014/04/25 职场文书
      党员群众路线承诺书
      2014/05/20 职场文书
      总经理助理岗位职责范本
      2014/07/20 职场文书
      详解PHP用mb_string处理windows中文字符
      2021/05/26 PHP
      Python面向对象编程之类的概念
      2021/11/01 Python