跟随小破站学习java web第五天

将选择器转换为方法后的DOM查询

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
				
				var $div = $("div");
				var $body = $("body");
				
				//(1)eq()选择索引值为等于 3 的 div 元素
				$("#btn1").click(function(){
					$div.eq(3).css("background-color","#fba");
				});
				//(2)first()选择第一个 div 元素
				$("#btn2").click(function(){
					$div.first().css("background-color","#fba");
				});
				
				//(3)filter()在div中选择索引为偶数的
				$("#btn4").click(function(){
					$div.filter(":even").css("background-color","#fba");
				});
				
				//(4)has()选择div中包含.mini的
				$("#btn6").click(function(){
					$div.has(".mini").css("background-color","#fba");
				});
				
				//(5)children()在body中选择所有class为one的div子元素:$("body div.one")
				$("#btn8").click(function(){
					$body.children("div.one").css("background-color","#fba");
				});
				//(6)find()在body中选择所有class为mini的div后代元素
				$("#btn9").click(function(){
					$body.find("div.mini").css("background-color","#fba");
				});
				//(7)next() #one的下一个div
				$("#btn10").click(function(){
					$("#one").next("div").css("background-color","#fba");
				});
				
				//(8)parent() .mini的父元素
				$("#btn13").click(function(){
					$(".mini").parent().css("background-color","#fba");
				});
				
				//(9)add()选择所有的 span 元素和id为two的元素
				$("#btn18").click(function(){
					$("span").add("#two").css("background-color","#fba");
				});
				
			});
			
			
		</script>

DOM对象的增删改(使用方法)

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			/*
			DOM操作,增删改
				   增
				      内后
				   append()
				   appendTo()
				     内前
				   prepend()
				   prependTo()
				    外后
				   after()
				    外前
				   before()
				删
				 empty():掏空
				 remove():删除
				改
				 replaceWith()
			*/
			$(function(){
				var $i = $("<li>广州</li>");
				
				$("#btn01").click(function(){
					//在#city中添加广州节点 [append()]
					$("#city").append($i);
				});
				
				$("#btn02").click(function(){
					//创建一个"广州"节点,添加到#city下[appendTo()]
					$i.appendTo($("#city"));
				});
				
				$("#btn03").click(function(){
					//在#city中添加广州节点[prepend()]
					$("#city").prepend($i);//添加到最前面
				});
				
				$("#btn04").click(function(){
					//创建一个"广州"节点,添加到#city下[prependTo()]
					$i.prependTo($("#city"));
				});
				
				
				$("#btn05").click(function(){
					//在#bj前面插入"广州"节点[before()]
					$("#bj").before($i);
				});
				
				$("#btn06").click(function(){
					//将"广州"节点插入到#bj前面[insertBefore()]
					$i.insertBefore($("#bj"));
				});
				
				$("#btn07").click(function(){
					//在#bj后面插入"广州"节点[after()]
					$("#bj").after($i);
				});
				
				$("#btn08").click(function(){
					//将"广州"节点插入到#bj后面[insertAfter()]
					$i.insertAfter($("#bj"));
				});
				
				$("#btn09").click(function(){
					//使用"广州"节点替换#bj节点[replaceWith()]
					$("#bj").replaceWith($i);
				});
				
				$("#btn10").click(function(){
					//使用"广州"节点替换#bj节点[replaceAll()]
					$i.replaceAll($("#bj"));
				});
				
				$("#btn11").click(function(){
					//删除#rl节点[remove()]
					$("#rl").remove();
				});
				
				$("#btn12").click(function(){
					//掏空#city节点[empty()]
					$("#city").empty();
				});
				
				$("#btn13").click(function(){
					//读取#city内的HTML代码
					var htmlText = $("#city").html();
					alert(htmlText);
				});
				
				$("#btn14").click(function(){
					//设置#bj内的HTML代码
					$("#bj").html("BeiJing");
				});
				
			});
			
		
		</script>

DOM的选择操作练习

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function(){
			//实现删除功能
			$("#employeeTable").delegate("a","click",function(){
				//$(this).parents("tr").remove();
				$(this).parent().parent().remove();
				//取消默认行为
				return false;
			});
			
			$("a").live("click",function(){
				//$(this).parents("tr").remove();
				$(this).parent().parent().remove();
				//取消默认行为
				return false;
			});
			
			//实现添加员工信息
			$("#addEmpButton").click(function(){
				//取值
				var name = $("#empName").val();
				var email = $("#email").val();
				var salary = $("#salary").val();
				
				//将值拼接到$tr
				var $tr = $("<tr>"
							+"<td>"+name+"</td>"
							+"<td>"+email+"</td>"
							+"<td>"+salary+"</td>"
							+"<td><a href='deleteEmp?id=003'>Delete</a></td>"
							+"</tr>");
				
				//将$tr追加到table的内后
				$("#employeeTable").append($tr);
			});
		});
		
	</script>

注意:在实现删除功能时,记得要取消默认行为!

注意:使用了live delegate事件方法,来实现当新增数据时,保留之前书写的功能!

window.onload和$(function(){})的区别

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*
		* window.onload和$(function(){})区别
			* 前者当前文档完全加载后执行,后者是当文档绘制成功后执行。
			* 前者只能书写一次,后者可以书写多次。
			* 前者语法只有一种,后者有两种语法。
		* $(function(){}):当前文档绘制成功后执行。
		* window.onload:当前文档完全加载后执行。
	*/
	window.onload = function(){
			alert("onload1");
		}
	window.onload = function(){
			alert("onload2");
		}
	$(function(){
		alert("jquery1");
	});
	$(function(){
		alert("jquery2");
	});
	$(document).ready(function(){
		alert("3");
	});
</script>

注意:$(function(){ })浏览器会先加载,而window.onload可能需要等待页面上的图片、视频等所有内容全部加载完后才能调用!

事件冒泡

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				/*
					* change事件:当元素失去焦点且文本改变时触发。
				*/
				$("#content").click(function(){
					alert("div");
				});
				
				$("span").click(function(){
					alert("span");
					//取消默认行为
					return false;
				});
			});
</script>


<body>
		<div id="content">
			外层div元素
				<span>内层span元素</span>
			外层div元素
		</div>
</body>

注意:当单击span元素调用事件后,div的事件也会随之调用,这就是事件的冒泡!

change事件 当注册时,判断信息是否重复

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//输入用户名后,验证用户名是否存在(zhangsan)
		$("#username").change(function(){
			var uname = $(this).val();
			if("zhangsan" == uname){
				//用户名已存在,请重新输入
				//alert("用户名已存在,请重新输入");
				$("#unameMsg").text("用户名已存在,请重新输入").css("color","red");
			}else{
				//用户名可用
				//alert("用户名可用");
				$("#unameMsg").text("用户名可用").css("color","green");
			}
		});
	});
</script>


<body>
	<h1>注册</h1>
	<form action="regist_success.html">
		用户名:<input type="text" name="username" id="username">
		<span id="unameMsg"></span><!-- 划出一个范围 -->
		<br>
		密&emsp;码:<input type="password" name="pwd"><br>
		<input type="reset">
		<input type="submit" value="注册">
	</form>
	<a href="../index.html">回首页</a>
</body>