02-jquery

最新推荐文章于 2021-08-12 23:49:20 发布

griow

最新推荐文章于 2021-08-12 23:49:20 发布

阅读量87

点赞数

分类专栏： java web学习

本文链接：https://blog.csdn.net/potato_grow/article/details/117769232

版权

java web学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery

入门
选择器
事件
- 文档加载
- 事件冒泡

入门

验证是否导入jquery库

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//验证是否导入js库
// 	alert($);
	$(function(){
		$("#btnId").click(function(){
			alert("hello,jQuery");
		});
	});
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

核心函数作用：

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

DOM对象和jQuery对象：

//分别使用DOM对象和jQuery对象获取div中的文本
		/*
			* jQuery操作文本 DOM操作文本
				text() 		innerText
				html() 		innerHTML
				val()  		value
			* DOM->jQuery: $(dom对象)
			* jQuery->DOM: 将jQuery看作为数组|集合
				* $div[0] | $div.get(0)
		*/

// 		使用DOM对象调用DOM方法
		$("#dom2dom").click(function(){
			var dom = document.getElementById("testDiv");
			alert(dom.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>
</head>
<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>

选择器

基本选择器&总结


			* 基本选择器（5）
				*id选择器	$("#id名")
				*类选择器	$(".class名")
				*标签选择器	$("标签名")
				*所有（全局）$("*")
				*并集		$("选择器1,选择器2,")
		
			*层次选择器（4）
				*后代选择器	$("E F")
				*子代选择器	$("E>F")
				*相邻选择器	$("E+F")
				*同辈选择器	$("E~F")

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(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>
		<body>		
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<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>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>

层次选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(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>
	</head>
	<body>		
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		
		<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>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>

过滤选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(function(){
				//1.选择第一个 div 元素
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});
				//2.选择class不为 one 的所有 div 元素
				$("#btn2").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});
				//3.选择索引值为等于 3 的 div 元素
				$("#btn3").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});
				//4.选择当前正在执行动画的所有元素
				$("#btn4").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//5.选择含有子元素的div元素
				$("#btn5").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
				//6.选择所有不可见的 div 元素
				$("#btn6").click(function(){
					$("div:hidden").show("normal").css("background", "#bbffaa");
				});
				//7.选取 属性title值等于'test'的div元素
				$("#btn7").click(function() {
					$("div[title='test']").css("background", "#bbffaa");
				});
				//8.选取每个class为one的div父元素下的第一个子元素
				$("#btn8").click(function(){
					$("div.one>:first-child").css("background","#bbffaa");
				});
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn2" />	
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn3" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn4" />
		<input type="button" value="选择含有子元素的div元素" id="btn5" />
		<input type="button" value="选择所有不可见的 div 元素" id="btn6" />
		<input type="button" value="选取 属性title值等于'test'的div元素." id="btn7" />
		<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn8"/>
		
		
		<h3>选择器练习.</h3>
		<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>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>

表单对象属性过滤选择器

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function(){
					$("input:enabled").val("New Value");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function(){
					$("input:disabled").val("New Value Too");
				});
				//3.获取多选框选中的个数
				$("#btn3").click(function(){
					var $cc = $(":checkbox:checked")
					alert($cc.length);
				});
				//4.获取多选框选中的内容
				$("#btn4").click(function(){
					var $cd = $(":checkbox:checked");
					$cd.each(function(){
						//借助this,它是DOM对象
						alert(this.value);
						//可以转成jQuery对象
						//$(this)
// 						alert($(this).val());
					});
				});
				//5.获取下拉框选中的内容
				$("#btn5").click(function(){
					var $sc = $("select option:selected");
					$sc.each(function(){
						alert($(this).val());
					})
					
				});
			})	
		</script>
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉列表1: <br>
			<!-- 这里可以用size -->
			<!-- style="height: 100px" -->
			<select name="test" multiple="multiple"  size="3">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>

事件

文档加载

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	/**
		window.onload与$(function(){})区别：
			*前者是文档完全加载后执行，后者是文档框架加载便可执行
			*前者只能书写一次，后者可以书写多次
			*前者语法只有一种，后者有两种语法
	**/
	//多写不会报错，但会进行覆盖
	window.onload = function(){
		alert("onload1");
	}
	window.onload = function(){
		alert("onload2");
	}
	
	//可以写多个
	$(function(){
		alert("jQuery1");
	})
	$(function(){
		alert("jQuery2");
	})
	$(document).ready(function(){
		alert("jQuery3");
	})
	

</script>

事件冒泡

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//change() 在失去焦点且文本已修改时触发
				$("#content").click(function(){
					
				})
			});
		</script>
	</head>
	<body>
		<div id="content">
			外层div元素
				<span>内层span元素</span>
			外层div元素
		</div>
	</body>