jq添加或删除html元素,jQuery添加删除DOM元素方法详解
本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下:
介绍
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 = $("
香蕉"); //创建DOM对象
var $ul = $("ul"); //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
下面列出部分插入节点的方法
方法
描述
示例
Append()
向每个匹配的元素内追加内容
HTML代码
JQuery代码
$(“ul”).append(“
AA”);
结果
- AA
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代码:
- AAA
JQuery代码:
$("ul li:eq(0)").empty();
结果
记住,只会清空内容,不会请空属性;
更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题:《jQuery操作DOM节点方法总结》
希望本文所述对大家jQuery程序设计有所帮助。
jq添加或删除html元素,jQuery添加删除DOM元素方法详解相关推荐
- jquery对象PHP转换,jQuery对象与DOM对象转换方法详解_jquery
本文实例分析了jQuery对象与DOM对象的转换方法.分享给大家供大家参考,具体如下: jQuery对象转换为dom对象 只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属 ...
- jquery对象和DOM对象的相互转换详解
jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = ...
- Oracle重复数据只删除一条,解决Oracle删除重复数据只留一条的方法详解
查询及删除重复记录的SQL语句 1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 select * from 表 where Id in (select Id from 表 group ...
- C++ STL list添加(插入)元素方法详解
C++ STL list添加(插入)元素方法详解 主要内容 主要内容 参考链接
- python字典键盘添加元素_对python字典元素的添加与修改方法详解
1.字典中的键存在时,可以通过字典名+下标的方式访问字典中改键对应的值,若键不存在则会抛出异常.如果想直接向字典中添加元素可以直接用字典名+下标+值的方式添加字典元素,只写键想后期对键赋值这种方式会抛 ...
- webconfig的解决方案怎么添加_解决在Web.config或App.config中添加自定义配置的方法详解...
文档从网络中收集,已重新整理排版 .word 版本可编辑 . 欢迎下载支持 . 1 word 版本可编辑 . 欢迎下载支持 . 解决在 Web.config 或 App.config 中添 加自定义配 ...
- Jquery加载dom元素
JQuery加载DOM元素 使用JQuery的第一件事就是下载jquery库,并调成Jquery库! <script src="js/jquery-1.7.1.min.js" ...
- 饥荒服务器不显示管理员,饥荒联机版管理员怎么添加_饥荒联机版管理员介绍与添加方法详解_玩游戏网...
<饥荒>联机版里面的管理员这个概念大家了解吗?我之前也不清楚管理员相关内容,下面笔者就为大家带来了饥荒联机版管理员介绍与添加方法详解,小伙伴们还不了解联机版管理员的下面跟我一起来看看吧. ...
- java 窗体添加背景图片_Java Swing实现窗体添加背景图片的2种方法详解
本文实例讲述了java Swing实现窗体添加背景图片的2种方法.分享给大家供大家参考,具体如下: 在美化程序时,常常需要在窗体上添加背景图片.通过搜索和测试,发现了2种有效方式.下面分别介绍. 1. ...
- java word 超链接到文档内部_Java 添加超链接到 Word 文档方法详解
在Word文档中,超链接是指在特定文本或者图片中插入的能跳转到其他位置或网页的链接,它也是我们在编辑制作Word文档时广泛使用到的功能之一.今天这篇文章就将为大家演示如何使用Free Spire.Do ...
最新文章
- 类的sizeof大小和C语言中各种数据类型的长度
- Android studio/sdk/appium/jdk遇到的坑坑洼洼
- Docker小白到实战之开篇概述
- SpringBoot整合quartz的一个例子
- python 3d游戏 源码_毕设3D游戏《天鹰教》源码
- Windows XP SP3英文版镜像
- Spring| AOP之 引入(Introductions)
- 推荐 :数据科学研究的现状与趋势
- 六、全局锁和表锁 :给表加个字段怎么有这么 多阻碍?
- 油猴相关玩法-下载,脚本下载
- 基于嵌入式ARM工控主板与X86工控主板的比较 1
- HTTP请求网页(包括HTTPS)
- C语言编译时产生的警告:initializing ‘char *‘ with an expression of type ‘const char *‘ discards qualifiers
- 苹果高通和解后,华为5G芯片市场地位稳了?
- 机械阻抗法与频响分析
- 基于射频CC2520 实现的ZigBee 通信设计
- 【小米路由器R2D刷机】局域网内的电脑访问小米路由器R2D的管理界面和硬盘
- 前端技术(2)— CSS(超详解)
- ArcGIS创建图层包:分享图层数据以及符号
- 【转】HttpHelper类登录淘宝联盟并下载淘宝客订单xls