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

最新推荐文章于 2024-11-18 14:11:03 发布

Mars_LJ

最新推荐文章于 2024-11-18 14:11:03 发布

阅读量134

点赞数

分类专栏： java web 文章标签： javascript dom jquery

本文链接：https://blog.csdn.net/Mars_LJ/article/details/107429437

版权

java web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
	window.onload = function(){
		/*
			DOM操作 
			 * 简介:Document Object Model文档对象模型
			 * 节点
			    * 文档节点:document
			    * 元素节点:element
			    * 文本节点:text
			    * 属性节点:attribute
			 * dom查询
			    * 基于整个文档查询
			      1.getElementById():通过id查询
			      2.getElementsByTagName():通过标签名查询
			      3.getElementsByName():通过name值查询
		*/
		
		//1.查找#bj节点
		var btnEle = document.getElementById("btn01");
		btnEle.onclick = function(){
			var bjEle = document.getElementById("bj");	
			alert(bjEle.innerText);
		}
		
		//2.查找所有li节点
		var btnEle02 = document.getElementById("btn02");
		btnEle02.onclick = function(){
			var lis = document.getElementsByTagName("li");
			for(var i = 0;i < lis.length;i++){
				alert(lis[i].innerText);
			}
		};
		
		//3.查找name=gender的所有节点
		var btnEle03 = document.getElementById("btn03");
		btnEle03.onclick = function(){
			var gds = document.getElementsByName("gender");
			for(var i = 0;i < gds.length;i++){
				alert(gds[i].value);
			}
		};
		
		//4.查找#city下所有li节点
		var btnEle04 = document.getElementById("btn04");
		btnEle04.onclick = function(){
			var cityEle = document.getElementById("city");
			var lis = cityEle.getElementsByTagName("li");
			alert(lis.length);
		};
		
		//5.返回#city的所有子节点
		var btnEle05 = document.getElementById("btn05");
		btnEle05.onclick = function(){
			var cityEle = document.getElementById("city");
			var cs = cityEle.childNodes;
			//注意:ie版本<=8时,四个子节点。ie版本>=9时,9个子节点
			alert(cs.length);
		};
		
		//6.返回#phone的第一个子节点
		var btnEle06 = document.getElementById("btn06");
		btnEle06.onclick = function(){
			var phoneEle = document.getElementById("phone");
			var fc = phoneEle.firstChild;
			alert(fc.innerText);
		};
		
		//7.返回#bj的父节点
		var btnEle07 = document.getElementById("btn07");
		btnEle07.onclick = function(){
			var bjEle = document.getElementById("bj");
			var pn = bjEle.parentNode;
// 			alert(pn.innerText);
			alert(pn.innerHTML);
		};
		
		//8.返回#android的前一个兄弟节点
		var btnEle08 = document.getElementById("btn08");
		btnEle08.onclick = function(){
			var adEle = document.getElementById("android");
			var psEle = adEle.previousSibling;
			alert(psEle.innerText);
		};
		
		//9.读取#username的value属性值
		var btnEle09 = document.getElementById("btn09");
		btnEle09.onclick = function(){
			var userNameEle = document.getElementById("username");
			alert(userNameEle.value);
		};
		
		//10.设置#username的value属性值
		var btnEle10 = document.getElementById("btn10");
		btnEle10.onclick = function(){
			var userNameEle = document.getElementById("username");
			userNameEle.value = "123456";
		};
		
		//11.返回#bj的文本值
		var btnEle11 = document.getElementById("btn11");
		btnEle11.onclick = function(){
			var bjEle = document.getElementById("bj");
			alert(bjEle.innerHTML);
// 			var nv = bjEle.firstChild.nodeValue;
// 			alert(nv);
		};
	};
</script>

注意:在浏览器的不同版本中,值的显示略有不同,li排序中包含两值之间的空格!

在用户登录表单上添加判断用户名是否为空事件

<script type="text/javascript">
	window.onload = function(){
		
		var btnEle = document.getElementById("btnSub");
		btnEle.onclick = function(){
		//1.取值 用户名的值
		var uname = document.getElementById("username").value;
			if(uname == null || "" == uname){
				//alert("用户名不能为空,请重新输入!");
				var yOn = confirm("确认删除吗?");
				alert(yOn);
				//取消默认行为
				return false;
			}
		}	
	};
</script>

<body>
	<h1>登录</h1>
	<form action="login_success.html">
		<table>
		  <tr>
			<td>用户名:</td>
			<td><input type="text" name="username" id="username"></td>
		  </tr>
		  <tr>
		   	<td align="right">密码:</td>
		   	<td><input type="password" name="pwd"></td>
		  </tr>
		  <tr>
			<td colspan="2" align="center">
			  <input type="reset">
			  <input id="btnSub" type="submit" value="登录" >
			</td>
		  </tr>
		</table>
	</form>
	<a href="../index.html">回首页</a>
</body>

注意:写完事件时,记得取消之前的action默认操作!

jQuery

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//验证jQuery库是否导入成功
	//alert($);
	$(function(){
		$("#btnId").click(function(){
			alert("Hello jQuery");
		});
	});
</script>

<body>
	<button id="btnId">SayHello</button>
</body>

注意:在导入完成后记得先检验是否导入成功!

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/*
	  $是什么?jQuery  $()==jQuery()
	      核心函数的4个作用
	  1.传入参数为[函数]时：在文档加载完成后执行这个函数 $(fn) == window.onload=function(){}
	  2.传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象 
	  3.传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
	  4.传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
	*/
	$(function(){
		//var $li = $("<li>马尔代夫</li>");
		//$("ul").append($li);
		
		var bj = document.getElementById("bj");
		var $bj = $(bj);
		alert($bj);
	});
</script>

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

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//分别使用DOM对象和jQuery对象获取div中的文本
		/*
			* jQuery操作文本
				text()	innerText
				html()	innerHTML
				val()	value
			* DOM->jQuery:$(dom对象)
			* jQuery->DOM:将jQuery看作数组|集合
			   * $div[0]|$div.get(0)
		*/
		//使用DOM对象调用DOM方法
		$("#dom2dom").click(function(){
			var div = document.getElementById("testDiv");
			alert(div.innerText);
		});
		//使用jQuery对象调用jQuery方法
		$("#jQuery2jQuery").click(function(){
			var $div = $("#testDiv");
			alert($div.text());
		});
		//使用DOM对象调用jQuery方法
		$("#dom2jQuery").click(function(){
			var div = document.getElementById("testDiv");
			var $div = $(div);
			alert($div.text());
		});
		//使用jQuery对象调用DOM方法
		$("#jQuery2dom").click(function(){
			var $div = $("#testDiv");
			alert($div[0].innerText);
			//alert($div.get(0).innerText);
		});
	});
</script>


<body>
	<div id="testDiv">注定你优秀</div>
	<br/>
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>

基本选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			/*
				* 基本选择器(5)
					* id选择器:$("#id")
					* 类选择器:$(".class")
					* 标签选择器:$("p")
					* 所有(全局)选择器:$("*")
					* 并集选择器:$("#id,.class,p")
			*/
			$(function(){
				//1.选择 id 为 one 的元素
				$("#btn1").click(function(){
					$("#one").css("background-color","#bbffaa");
				});	
				//2.选择 class 为 mini 的所有元素
				$("#btn2").click(function(){
					$(".mini").css("background-color","#bbffaa");
				});

				//3.选择 元素名是 div 的所有元素
				$("#btn3").click(function(){
					$("div").css("background-color","#bbffaa");
				});

				//4.选择所有的元素
				$("#btn4").click(function(){
					$("*").css("background-color","#bbffaa");
				});

				//5.选择所有的 span 元素和id为two的元素
				$("#btn5").click(function(){
					$("span,#two").css("background-color","#bbffaa");
				});
			});
		</script>

层次选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
        /*
            * 层次选择器(4)
					* 后代选择器:$("E F")
					* 子代选择器:$("E>F")
					* 相邻选择器:$("E+F")
					* 同辈选择器:$("E~F")
        */
			$(function(){
				//1.选择 body 内的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素
				$("#btn2").click(function(){
					$("body>div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>