Jquery元素追加和删除

原文链接:http://www.cnblogs.com/william-lin/archive/2012/08/12/2635402.html

介绍

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列表

  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>

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

时间: 2024-08-09 21:39:55

Jquery元素追加和删除的相关文章

JavaScript(20)jQuery HTML 加入和删除元素

jQuery - 加元 经 jQuery,可以非常easy增加了新的元素/内容. 加入新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); jQu

jquery 元素控制(追加元素/追加内容)介绍及应用

一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: <div id="content"> 在我的后面追加一条新闻 </div> js: <script type="text/javascript"> jQuery(function(){ //在元素内部追加内容 $("#content").append(" 姚明退役了...

jquery为指定的元素添加或者删除指定样式类

jquery为指定的元素添加或者删除指定样式类:在实际应用中,可能需要为指定的元素动态的添加或者删除指定css样式类,下面就通过简短的代码做一下介绍.一.添加css样式类: $("#antzone").addClass("class"); 上面的代码为指定的元素添加指定的样式类.更多相关内容可以参阅jQuery的addClass()方法一章节.二.删除css样式类: $("#antzone").removeClass("class&qu

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

JavaScript(20)jQuery HTML 添加和删除元素

jQuery - 添加元素 通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); jQue

jquery操作html元素之(删除元素)

删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 jQuery remove() 方法 jQuery remove() 方法删除被选元素及其子元素. 实例 $("#div1").remove(); jQuery empty() 方法 jQuery empty() 方法删除被选元素的子元素. 实例 $("#div1").empty(); 过滤被删除

[ jquery 文档处理 appendTo(content) ] 此方法用于把所有匹配的元素追加到另一个指定的元素集合中

把所有匹配的元素追加到另一个指定的元素元素集合中. 实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中. 在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是所有被追加的内容,而不仅仅是先前所选中的元素.所以,要选择先前选中的元素,需要使用end()方法,参见例二. 实例: <html lang='z

javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)

主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除splice(需明确位置) 9.数组遍历 10.jQuery根据元素值删除数组元素的方法 数组常见操作包含了 增.删.查.改.插入.交集.并集 1.数组整体元素修改 //map,给数组每个元素加1 输出[1,2,3] $.map([0,1,2],function(n){ return n+1; })

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元