jQuery中的dom查询、增删改

最新推荐文章于 2022-07-04 10:52:34 发布

救救孩子把

最新推荐文章于 2022-07-04 10:52:34 发布

阅读量318

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/yuanmomoya/article/details/82192506

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>