jQuery中的dom查询、增删改

最新推荐文章于 2022-09-03 17:21:21 发布
最新推荐文章于 2022-09-03 17:21:21 发布
阅读量282 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanmomoya/article/details/82192506
版权

jQuery中的dom查询、增删改

dom查询（例子中体现）

eq()选择索引值为等于 3 的 div 元素

first()选择第一个 div 元素

filter()在div中选择索引为偶数的

has()选择div中包含.mini的

children()在body中选择所有class为one的div子元素

find()在body中选择所有class为mini的div后代元素

next()#one的下一个div

parent().mini的父元素

add()选择所有的 span 元素和id为two的元素

用到的CSS样式

@CHARSET "UTF-8";
#total{
	width: 450px;
}

ul{
	list-style-type: none;
}

li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM查询</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
				//(1)eq()选择索引值为等于 3 的 div 元素
				$("#btn1").click(function(){
					
				});
				//(2)first()选择第一个 div 元素
				$("#btn2").click(function(){
					
				});
				
				//(3)filter()在div中选择索引为偶数的
				$("#btn3").click(function(){
					
				});
				
				//(4)has()选择div中包含.mini的
				$("#btn4").click(function(){
					
				});
				
				//(5)children()在body中选择所有class为one的div子元素
				$("#btn5").click(function(){
					
				});
				//(6)find()在body中选择所有class为mini的div后代元素
				$("#btn6").click(function(){
					
				});
				//(7)next() #one的下一个div
				$("#btn7").click(function(){
					
				});
				
				//(8)parent() .mini的父元素
				$("#btn8").click(function(){
					
				});
				
				//(9)add()选择所有的 span 元素和id为two的元素
				$("#btn9").click(function(){
					
				});
				
			});
			
			
		</script>
	</head>
	<body>		
		<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
		<input type="button" value="first()选择第一个 div 元素" id="btn2" />	
		<input type="button" value="filter()在div中选择索引为偶数的" id="btn3" />	
		<input type="button" value="has()选择div中包含.mini的" id="btn4" />	
		<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn5" />
		<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn6" />
		<input type="button" value="next()#one的下一个div" id="btn7" />	
		<input type="button" value="parent().mini的父元素" id="btn8" />
		<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn9" />
		
		<h3>基本选择器.</h3>
		<br /><br />
		文本框<input type="text" name="account" disabled="disabled" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<span id="span1">^^span元素 111^^</span>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span2">^^span元素 222^^</span>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

dom增删改

例子：

在#city中添加广州节点[append()]

创建一个"广州"节点,添加到#city下[appendTo()]

创建一个"广州"节点,添加到#city下[prepend()]

创建一个"广州"节点,添加到#city下[prependTo()]

在#bj前面插入"广州"节点[before()]

将"广州"节点插入到#bj前面[insertBefore()]

在#bj后面插入"广州"节点[after()]

将"广州"节点插入到#bj后面[insertAfter()]

使用"广州"节点替换#bj节点[replaceWith()]

使用"广州"节点替换#bj节点[replaceAll()]

删除#rl节点[remove()]

掏空#city节点[empty()]

读取#city内的HTML代码

设置#bj内的HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM增删改</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			$(function(){
				$("#btn01").click(function(){
					//在#city中添加广州节点 [append()]
					
				});
				
				$("#btn02").click(function(){
					//创建一个"广州"节点,添加到#city下[appendTo()]
					
				});
				
				$("#btn03").click(function(){
					//在#city中添加广州节点[prepend()]
				});
				
				$("#btn04").click(function(){
					//创建一个"广州"节点,添加到#city下[prependTo()]
					
				});
				
				
				$("#btn05").click(function(){
					//在#bj前面插入"广州"节点[before()]
					
				});
				
				$("#btn06").click(function(){
					//将"广州"节点插入到#bj前面[insertBefore()]
					
				});
				
				$("#btn07").click(function(){
					//在#bj后面插入"广州"节点[after()]
					
				});
				
				$("#btn08").click(function(){
					//将"广州"节点插入到#bj后面[insertAfter()]
					
				});
				
				$("#btn09").click(function(){
					//使用"广州"节点替换#bj节点[replaceWith()]
					
				});
				
				$("#btn10").click(function(){
					//使用"广州"节点替换#bj节点[replaceAll()]
					
				});
				
				$("#btn11").click(function(){
					//删除#rl节点[remove()]
					
				});
				
				$("#btn12").click(function(){
					//掏空#city节点[empty()]
					
				});
				
				$("#btn13").click(function(){
					//读取#city内的HTML代码
					
				});
				
				$("#btn14").click(function(){
					//设置#bj内的HTML代码
					
				});
				
			});
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input type="radio" name="gender" value="male"/>
				Male
				<input type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">在#city中添加广州节点[append()]</button></div>
			<div><button id="btn02">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
			<div><button id="btn03">创建一个"广州"节点,添加到#city下[prepend()]</button></div>
			<div><button id="btn04">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
			<div><button id="btn05">在#bj前面插入"广州"节点[before()]</button></div>
			<div><button id="btn06">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
			<div><button id="btn07">在#bj后面插入"广州"节点[after()]</button></div>
			<div><button id="btn08">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
			<div><button id="btn09">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
			<div><button id="btn10">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
			<div><button id="btn11">删除#rl节点[remove()]</button></div>
			<div><button id="btn12">掏空#city节点[empty()]</button></div>
			<div><button id="btn13">读取#city内的HTML代码</button></div>
			<div><button id="btn14">设置#bj内的HTML代码</button></div>
		</div>
	</body>
</html>

 

救救孩子把
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用js dom和jquery分别实现简单增删改
10-25
今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，两者对比可以看出jquery的强大
JS之DOM元素的增、插、删、替换
qq_46179838的博客
11-04 1607
DOM元素的增、插、删、替换一、增1、document.creatElement()——创建元素节点（即创建标签）2、document.creatTextNode()——创建文本节点3、document.creatComment()——创建注释节点4、document.creatDocumentFragment()——创建文档碎片节点5、四个方法的使用需要注意下面几点：二、插1、appendChild()——类似于剪切的操作2、父级.insertBefore(a,b)三、删1、parent.removeCh
【jQuery】Dom操作之增删改查
weixin_48596030的博客
10-26 334
1.创建节点 2.添加内容 3.添加节点 4.删除节点 5.修改/替换
jQuery操作dom元素的增删查改
weixin_44374938的博客
03-21 822
一、获取内容和属性 jQuery中提供了一系列与Dom相关的方法，这使访问和操作元素和属性变得很容易. 1.获取内容 有text()、html()、val()方法: text () -设置或返回所选元素的文本内容； html() - 设置或返回所选元素的内容(包括html标记)； val () -设置或返回表达那字段的值 $(function(){ $("btn1").click(function(){ //获取文本内容 alert("Text"+$("#test").text()); //获取带
XML用VS2005 编写的DOM.(append.insert.replace.remove)
liaozhiweihaifeng的专栏
06-17 568
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.W
用jquery如何实现增删改查（详细如下：）
why0925123的博客
09-03 2651
利用本地存储和jquery做增删改查
jQuery中DOM常见操作实例小结
10-16
主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下
JQuery中DOM事件绑定用法详解
10-24
主要介绍了JQuery中DOM事件绑定用法,实例分析了bind方法绑定事件的相关技巧,需要的朋友可以参考下
jQuery 中DOM 操作详解
10-24
主要介绍了jQuery 中DOM 操作详解,需要的朋友可以参考下
jQuery操作DOM元素
weixin_33889245的博客
01-19 288
jQuery操作DOM元素 　　HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点.   查找节点 　　关于节点的查找,是利用选择器完成的. 　　在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html   插入节点 　　首先看一个例子,用原生的JavaScript如...
jQuery中常用DOM的增删改查
PengSHua的博客
11-08 2751
append()，appendTo(),prepend()，prependTo()，before()，after()，insertBefore()，insertAfter()，unwrap()，remove()，detach()，wrap()，wrapAll()，wrapInner()，replaceAll()，replaceWith()等jQuery常用方法的简单释义
jQuery的DOM操作（增删改查）
Luck_ZZ的博客
08-03 689
一、选择器 jQuery选择器基本语法规则使用的就是CSS的选择器语法，并对基进行了扩展 可参看：CSS选择器总结 基本： #id、element、.class、*、selector1,selector2,selector3、 层级： ancestor descendant、prant>child、prev+next、prev~siblings、 基本筛选器 // 1.选择第一个...
使用jQuery创建节点、将节点插入到指定的位置
weixin_30480651的博客
01-18 423
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse...
JQuery获取节点的html代码
zsg88的专栏
03-31 5062
一：jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码。 二：然而我们有时候确需要包含当前节点的html代码。有的人通过parent().html()，如果当前元素没有兄弟元素还行，如果有那就行不通了。下面这个jQuery的方法可以解决，而且非常简便，如下：jQuery.prop("outerHTML"); hello，你好！ $(".te
jquery 增删改查dom节点
weixin_43735593的博客
11-23 200
jquery 增删改查dom节点 HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点. 查找节点 关于节点的查找,是利用选择器完成的. 　　在上一篇jQuery选择器中已经介绍过了:http://www.cnblogs.com/mengdd/p/4211663.html 插入节点 首先看一个例子,用原生的JavaScript如何创建并添加元素: &amp;amp;lt;!D...
jQuery中DOM 的增删改
qq_45554909的博客
12-24 177
内部插入： appendTo()： a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素 prependTo()： a.prependTo(b) 把 a 插到 b 所有子元素前面，成为第一个子元素 外部插入： insertAfter()： a.insertAfter(b) 得到 ba insertBefore()： a.insertBefore(b) 得到 ab 替换: replaceWith()： a.replaceWith(b) 用 b 替换掉 a replaceAll()：
java数组工具类(遍历（display）、添加（append）、删除(remove)、查找(indexOf) 、排序(sort))
tel15716503548的博客
03-22 1227
设计一个类，用于数组操作。 （1）成员变量为一个一维数组，数组元素是int型。（2）构造方法中包含以一维数组为参数的构造方法。（2）成员方法包括数组遍历（display）、添加（append）、删除(remove)、查找(indexOf) 、排序(sort)。[分析与说明]（1）数组的遍历运算（display），就是按顺序输出所有数组元素。（2）数组添加运算（append），是将一个新元素放入数组...
jquery append() 追加内容 remove() 删除回调
Anonymous
03-07 5755
Html &lt;div class="row1 height28 s_consignee_city"&gt;&lt;/div&gt; &lt;select name="shipping_method" class="selectForm" onchange="getShipCost();changeProductBarStyle(),changeSalesValesShow()" sty
jquery常用的增删改查方法
Orange_Sheep的博客
08-03 1871
增： 内部插入 append( )内部后面插入内容 appendTo( ) prepend( ) prependTo( ) 外部插入 after（） before( ) insertAfter( ) insertBefore( ) 删： empty( ) remove( ) detach( ) 替换： replaceWith( ) replaceAll( ) 查： next（）下一个元素 prev（）上一个元素 nextAll（ )所有下一个元素 prevNext( )所有上一个元素 siblings( )
jquery增删改练习题
最新发布
01-12
以下是关于jQuery增删改的练习题的答案： 1. 添加一个节点到指定元素中： ```javascript $("#city").append("广州</li>"); ``` 2. 删除指定元素： ```javascript $("#city li").remove();``` 3. 修改指定元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值