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 相关文章推荐
      关于Mozilla浏览器不支持innerText的解决办法
      Jan 01 Javascript
      jquery 使用点滴函数代码
      May 20 Javascript
      javascript显示用户停留时间的简单实例
      Aug 05 Javascript
      node.js中的console.dir方法使用说明
      Dec 10 Javascript
      Eclipse配置Javascript开发环境图文教程
      Jan 29 Javascript
      AngularJS学习笔记之TodoMVC的分析
      Feb 22 Javascript
      JS获取及设置TextArea或input文本框选择文本位置的方法
      Mar 24 Javascript
      使用javaScript实现鼠标拖拽事件
      Apr 03 Javascript
      vue-cli常用设置总结
      Feb 24 Javascript
      使用Vue实现移动端左滑删除效果附源码
      May 16 Javascript
      vue-element-admin 菜单标签失效的解决方式
      Nov 12 Javascript
      jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
      Feb 04 jQuery
      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 include的妙用,实现路径加密
      2008/07/29 PHP
      php提示undefined index的几种解决方法
      2012/05/21 PHP
      php笔记之:文章中图片处理的使用
      2013/04/26 PHP
      PHP Class&amp;Object -- 解析PHP实现二叉树
      2013/06/25 PHP
      PHP函数func_num_args用法实例分析
      2015/12/07 PHP
      PHP简单实现正则匹配省市区的方法
      2018/04/13 PHP
      ThinkPHP3.2框架自定义配置和加载用法示例
      2018/06/14 PHP
      响应鼠标变换表格背景或者颜色的代码
      2009/03/30 Javascript
      JavaScript创建对象的写法
      2013/08/29 Javascript
      js实现网页自动刷新可制作节日倒计时效果
      2014/05/27 Javascript
      extjs 分页使用jsp传递数据示例
      2014/07/29 Javascript
      jquery获取一个元素下面相同子元素的个数代码
      2014/07/31 Javascript
      显示今天的日期js代码(阳历和农历)
      2014/09/30 Javascript
      浅析javascript的return语句
      2015/12/15 Javascript
      js实现消息滚动效果
      2017/01/18 Javascript
      Angular.js自定义指令学习笔记实例
      2017/02/24 Javascript
      详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
      2017/05/22 Javascript
      使用vue-cli webpack 快速搭建项目的代码
      2018/11/21 Javascript
      ES6 Promise对象的应用实例分析
      2019/06/27 Javascript
      微信小程序实现拨打电话功能的示例代码
      2020/06/28 Javascript
      Vue通过provide inject实现组件通信
      2020/09/03 Javascript
      python 全文检索引擎详解
      2017/04/25 Python
      python迭代dict的key和value的方法
      2018/07/06 Python
      对pycharm代码整体左移和右移缩进快捷键的介绍
      2018/07/16 Python
      Django教程笔记之中间件middleware详解
      2018/08/01 Python
      python实现数字炸弹游戏程序
      2020/07/17 Python
      python 实用工具状态机transitions
      2020/11/21 Python
      AmazeUI导航的示例代码
      2020/08/14 HTML / CSS
      美国最大婚纱连锁店运营商:David’s Bridal
      2019/03/12 全球购物
      简单的辞职信范文
      2014/01/18 职场文书
      《千年梦圆在今朝》教学反思
      2014/02/24 职场文书
      投标保密承诺书
      2014/05/19 职场文书
      甜品蛋糕店创业计划书
      2014/09/21 职场文书
      2014年公路养护工作总结
      2014/12/04 职场文书
      幼儿园教师培训心得体会
      2016/01/21 职场文书
      女人创业励志语录,句句蕴含能量,激发你的潜能
      2019/08/20 职场文书