Jquery学习小结一

最新推荐文章于 2024-12-27 17:22:33 发布

原创最新推荐文章于 2024-12-27 17:22:33 发布 · 154 阅读

CC 4.0 BY-SA版权

概述：Jquery是一个兼容多浏览器的、轻量级的JavaScript库。其主要特点是 Write less Do more

一、入门示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HellojQuery</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //使用$()代替window.onload
	$(function(){
        //获取按钮对象并绑定单机响应函数
		$("#btnId").click(function(){
			alert("Hello");
		});
	});

	//window.onload = function(){
		//document.get
		//btnEle.onclick = fun  
		//alert()
	//}
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

二、入门详解

2.1 Jquery核心函数：

$是什么? $代表jQuery
核心函数的4个作用
$()
2.1 传入参数为[函数]时：在文档加载完成后执行这个函数
2.2 传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
2.3 传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
2.4 传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回

2.2操作文本

js	jQuery
innerHTML	html()
innerText	text()
value	val()

2.3jQuery对象与DOM对象的转换问题

DOM->jQuery: $(DOM对象)

jQuery->DOM: 将jQuery看成集合或者数组

1. $div[0]

2. $div.get(0)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象和jQuery对象</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){	
		//分别使用DOM对象和jQuery对象获取div中的文本
		//使用DOM对象调用DOM方法
		$("#dom2dom").click(function(){
			var divValue = document.getElementById("testDiv").innerHTML;
			alert(divValue);
		});
		//使用DOM对象调用jQuery方法
		$("#dom2jQuery").click(function(){
			var divValue = document.getElementById("testDiv");
			//将dom对象转换成jQuery对象
			//alert(divValue.html());
			alert($(divValue).html());
		});
		//使用jQuery对象调用jQuery方法  
		$("#jQuery2jQuery").click(function(){
			var $divValue = $("#testDiv").html();
			alert($divValue);
		});
		//使用jQuery对象调用DOM方法
		$("#jQuery2dom").click(function(){
			var $div = $("#testDiv");
			//将jQuery对象转换成dom对象， int[] s = new int[5]; s[0] = 10; list.get(0)
			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>
</html>

2.3 选择器

选择器

基本选择器	层次选择器
$("#id")	$("E F"):后代选择器
$(".class")	$("E>F"):子一代选择器
$("h2")	$("E+F"):相邻选择器
$("*"):全局选择器	$("E~F"):同辈选择器
$("#id,.class,h2"):并集选择器

           * jQuery操作文本
               html()
               text()
               val()
               共同特点：无参取值，有参赋值。
           * jQuery操作css
               css()
           * jQuery操作属性
               attr()
               共同特点：一个参数取值，两个参数赋值

基本选择器示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</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">
		/*
			* 选择器
				* 基本选择器
					$("#id")
					$(".class")
					$("h2")
					$("*"):全局选择器
					$("#id,.class,h2"):并集选择器
				* 层次选择器
					$("E F"):后代选择器
					$("E>F"):子一代选择器
					$("E+F"):相邻选择器
					$("E~F"):同辈选择器
			* jQuery操作文本
				html()
				text()
				val()
				共同特点：无参取值，有参赋值。
			* jQuery操作css
				css()
			* jQuery操作属性
				attr()
				共同特点：一个参数取值，两个参数赋值
		*/
			$(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>
	</head>
	<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>
</html>

层次选择器示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层次选择器</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(){
				//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>
</html>

过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过滤选择器练习</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(1000, 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");
					$("div:gt(1)").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");
// 					$("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="test">class为mini,title为test</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>
</html>

表单对象属性过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单对象属性过滤选择器</title>
		<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(){
					alert($(":checkbox:checked").length);
				});
				//4.获取多选框选中的内容
				$("#btn4").click(function(){
					var $cc = $(":checkbox:checked");
					//方式一
// 					for(var i=0;i<$cc.length;i++){
// 						alert($cc[i].value);
// 					}
					//方式二
// 					$.each($cc,function(){
// 					});
					$cc.each(function(){
						alert($(this).val());
					});
				});
				//5.获取下拉框选中的内容
				$("#btn5").click(function(){
					var $ss = $("select option:selected");
					$ss.each(function(){
						alert(this.value);
					});
				});
			})	
		</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>
<!-- 			style="height: 100px" -->
			<select name="test" multiple="multiple"  size="4">
				<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>
</html>