jQuery-DOM manipulation

@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 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; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/**
HTML代码/文本/值
html([val|fn])    a.html()取出a的html值    a.html(val)  让a的html值变为val
text([val|fn]) 	  a.text()取出a的text值    a.text(val)  让a的文本值变为val
val([val|fn|arr]) a.val()  取出a的val值（input）   a.val(v)  设置a的value值为v 

属性
attr(name|pro|key,val|fn)  
 1、a.attr('name')取出a的name值   2、a.attr("name","username")把a的name值设置为username
 
removeAttr(name) 
a.removeAttr('class')    移除a的class属性


prop(name|pro|key,val|fn)1.6+ 
1、a.prop('id')  取出a的id值   2、a.prop('id',"bj")  设置a的id值为bj
removeProp(name)1.6+
a.removeProp('class') 移除a的class属性


 
 */

</script>
<script type="text/javascript">
$(function(){
     
     
	$("#btn1").click(function(){
     
     
	
	})
})
</script>

</head>
<body>
<button id="btn1">获取文本框的name值</button>
<form action="#" id="form1">
	文本框:<input  name="a" value="abc" type="text"/><br/>
	多选框:<input type="checkbox" name="interest" value="篮球">
	<input type="checkbox" name="interest" value="zuqiu">
	<input type="checkbox" name="interest" value="乒乓">
	<input type="checkbox" name="interest" value="御马">
</form>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; 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">
/**
文档处理
内部插入

appendTo(content) 	   a.appendTo(b);  把a加到b里面				  添加到最后面
prependTo(content)	   a.prependTo(b); 把a添加到b里面    			  添加到最前面

外部插入
insertAfter(content) 	a.insertAfter(b);  把a插入到b的后面
insertBefore(content) 	a.insertBefore(b); 把a插入到b的前面


替换
replaceWith(content|fn) a.replaceWith(b)  把a用b替换
replaceAll(selector) 	a.replaceAll(b)	  用a替换所有的b

删除
empty() 				a.empty()   把a掏空，把a里面的所有元素都删除
remove([expr]) 			a.remove(b)  所有的a，是b的话就会删除	a.remove()删除a		



*/
			$(function(){
     
     
			
				
				$("#btn01").click(function(){
     
     
					//创建一个"广州"节点,添加到#city下[appendTo()]
					//子节点.appendTo(父节点)
	
					
					
				});
				
				
				$("#btn02").click(function(){
     
     
					//创建一个"广州"节点,添加到#city下[prependTo()]
					
					
				});
				
				
				
				$("#btn03").click(function(){
     
     
					//将"广州"节点插入到#bj前面[insertBefore()]
					//前边.insertBefore(后边的)
					
					
				});
				
				
				$("#btn04").click(function(){
     
     
					//将"广州"节点插入到#bj后面[insertAfter()]
					//后边.insertAfter(前边的)
					
					
				});
				
				$("#btn05").click(function(){
     
     
					//使用"广州"节点替换#bj节点[replaceWith()]
					//被替换的.replaceWith()
					
					
				});
				
				$("#btn06").click(function(){
     
     
					//使用"广州"节点替换#bj节点[replaceAll()]
					//新的节点.replaceAll(旧的节点)
					
					
				});
				
				$("#btn07").click(function(){
     
     
					//删除#rl节点[remove()]
					//$("ul").remove("#rl");
					//$("#rl").remove();
					
					
				});
				
				$("#btn08").click(function(){
     
     
					//掏空#city节点[empty()]
				
					
				});
				
				$("#btn09").click(function(){
     
     
					//读取#city内的HTML代码
					
				});
				
				$("#btn10").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下[appendTo()]</button></div>
			<div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
			<div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
			<div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
			<div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
			<div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
			<div><button id="btn07">删除#rl节点[remove()]</button></div>
			<div><button id="btn08">掏空#city节点[empty()]</button></div>
			<div><button id="btn09">读取#city内的HTML代码</button></div>
			<div><button id="btn10">设置#bj内的HTML代码</button></div>
			
		</div>
	</body>
</html>

jQuery-DOM manipulation

jQuery-DOM manipulation

Guess you like