jQuery基礎入門
阿新 • • 發佈：2018-04-15
-s des tle HR times 定位 child checkbox 最大
一、什麽是 jQuery
Jquery它是javascript的一個輕量級框架，對javascript進行封裝，它提供了很多方便的選擇器。供你快速定位到需要操作的元素上面去。還提供了很多便捷的方法。
二、怎麽用 jQuery
jquery-1.8.3.js：一般用於學習階段。
jquery-1.8.3.min.js：用於項目使用階段
註：Jquery它是一個庫(框架)，要想使用它，必須先引入！
在<head>標簽中引入代碼：
<script src="../../js/jquery-1.8.3.js"></script>
例：獲取元素----------------$(“#id”);
Jquery函數的使用-------$(function(){});
三、Jquery頁面加載
註：在js給的onload只能賦一個值，如果對此賦值，後面的講覆蓋前面的。
在就Query ready可以使用多次，多個頁面加載將依次執行。
四、 jquery的選擇器
1、基本選擇器（使用頻率最大）
- id選擇器：$(“#id名稱”);
- 元素選擇器：$(“元素名稱”);
- 類選擇器：$(“.類名”);
- 通配符：* -----所有的元素
- 多個選擇器共用(並集)
代碼演練：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本選擇器</title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#btn1").click(function(){ $("#one").css("background-color","pink"); }); $("#btn2").click(function(){ $(".mini").css("background-color","pink"); }); $("#btn3").click(function(){ $("div").css("background-color","pink"); }); $("#btn4").click(function(){ $("*").css("background-color","pink"); }); $("#btn5").click(function(){ $("#two,.mini").css("background-color","pink"); }); }); </script> </head> <body> <input type="button" id="btn1" value="選擇為one的元素"/> <input type="button" id="btn2" value="選擇樣式為mini的元素"/> <input type="button" id="btn3" value="選擇所有的div元素"/> <input type="button" id="btn4" value="選擇所有元素"/> <input type="button" id="btn5" value="選擇id為two並且樣式為mini的元素"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>
2、層級選擇器
- ancestor descendant: 在給定的祖先元素下匹配所有的後代元素(兒子、孫子、重孫子)
- parent > child : 在給定的父元素下匹配所有的子元素(兒子)
- prev + next: 匹配所有緊接在 prev 元素後的 next 元素(緊挨著的，同桌)
- prev ~ siblings: 匹配 prev 元素之後的所有 siblings 元素(兄弟)
代碼演練：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>層級選擇器</title> <link rel="stylesheet" type="text/css" href="../../css/style.css"/> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ $("body div").css("background-color","gold"); }); $("#btn2").click(function(){ $("body>div").css("background-color","gold"); }); $("#btn3").click(function(){ $("#two+div").css("background-color","gold"); }); $("#btn4").click(function(){ $("#one~div").css("background-color","gold"); }); }); </script> </head> <body> <input type="button" id="btn1" value="選擇body中的所有的div元素"/> <input type="button" id="btn2" value="選擇body中的第一級的孩子"/> <input type="button" id="btn3" value="選擇id為two的元素的下一個元素"/> <input type="button" id="btn4" value="選擇id為one的所有的兄弟元素"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>
3、 基本過濾選擇器
$(‘li‘).first() 等價於：$(“li:first”)
代碼演練：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本過濾選擇器</title>
<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一個div元素"/>
<input type="button" id="btn2" value="body中的最後一個div元素"/>
<input type="button" id="btn3" value="選擇body中的奇數的div"/>
<input type="button" id="btn4" value="選擇body中的偶數的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
4、 屬性選擇器
代碼演練：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>層級選擇器</title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#btn1").click(function(){ $("div[id]").css("background-color","red"); }); $("#btn2").click(function(){ $("div[id=‘two‘]").css("background-color","red"); }); }); </script> </head> <body> <input type="button" id="btn1" value="選擇有id屬性的div"/> <input type="button" id="btn2" value="選擇有id屬性的值為two的div"/> <hr/> <div id="one"> <div class="mini"> 111 </div> </div> <div id="two"> <div class="mini"> 222 </div> <div class="mini"> 333 </div> </div> <div id="three"> <div class="mini"> 444 </div> <div class="mini"> 555 </div> <div class="mini"> 666 </div> </div> <span id="four"> </span> </body> </html>
5、表單選擇器
代碼演練：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單選擇器</title> </head> <body> <input type="button" id="btn1" value="選擇所有input元素" /> <input type="button" id="btn2" value="選擇文本框" /> <br/> <form> <input type="text" /><br /> <input type="checkbox" /><br /> <input type="radio" /><br /> <input type="image" /><br /> <input type="file" /><br /> <input type="submit" /> <input type="reset" /><br /> <input type="password" /><br /> <input type="button" /><br /> <select><option/></select><br /> <textarea></textarea><br /> <button></button> </form> </body> </html>
jQuery基礎入門