jQuery01
1、jQuery簡介（write less，do more）javascript
一、jQuery概念css
jQuery是一個輕量級（嚴格意義上說，不能稱爲一個框架）的js庫，輔助js開發，兼容css，多瀏覽器，jQuery2.0及以後的版本再也不支持IE6/7/8，可以使用戶更加方便的處理HTML、events、實現動畫效果，而且方便的爲網站提供AJAX交互；最大的優點是：說明文檔很全，各類應用說明的十分詳細，還有許多成熟的js插件可供選擇。html
使用了jQuery以後，就不須要在HTML裏邊插入大量的js代碼，只須要定義一個id便可（有些時候不須要）；前端
二、jQuery版本java
jquery-1.8.3.js：體積大，適合學習使用；jquery-1.8.3.min.js：，壓縮版，體積小，適合開發使用；（1.8.3是目前使用較多的版本）jquery
2、jQuery的引入和對象獲取瀏覽器
一、jQuery既然是一個js庫，使用前就要先引入：<script type="text/javascript" src="xxx/jquery-1.8.3.js"></script>;框架
/*知識點*/：傳統的js頁面加載（onload）和jQuery頁面加載的區別：less
a、傳統的js頁面加載（onload）只能寫一次，屢次書寫會存在後面覆蓋前面的現象，且jQuery的頁面加載比js快；dom
b、jQuery加載會在整個dom樹結構繪製完成以後進行加載，而js是在整個頁面加載完成以後再加載；
c、jQuery屢次書寫不存在覆蓋的問題，屢次加載的話，從上往下順序執行，以下（包含了幾種jQuery的書寫規範）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS與JQ頁面加載區別</title> 6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7 <script> 8 window.onload = function(){ 9 alert("張三"); 10 } 11 12 //傳統的方式頁面加載會存在覆蓋問題，加載比JQ慢(整個頁面加載完畢<包括裏面的其它內容，好比圖片>) 13 window.onload = function(){ 14 alert("老王"); 15 } 16 17 //JQ的加載比JS加載要快！(當整個dom樹結構繪製完畢就會加載) 18 jQuery(document).ready(function(){ 19 alert("李四"); 20 }); 21 22 //JQ不存在覆蓋問題，加載的時候是順序執行 23 $(document).ready(function(){ 24 alert("王五"); 25 }); 26 27 //簡寫方式 28 $(function(){ 29 alert("汾九"); 30 }); 31 32 </script> 33 </head> 34 <body> 35 </body> 36 </html>
二、jQuery獲取對象
(1)語法：var a = $("#id名")；（括號裏邊實際上放的是選擇器，這裏寫的是id選擇器（經常使用的），也可使用別的，如：$("p")，指的是p標籤選擇器）；
例如：$("#id名").click(function(){ alert("dadada"); })；
注：a、DOM對象（js）沒法操做JQ對象裏面屬性和方法；JQ對象也沒法操做JS裏面的屬性和方法；
b、var b = document.getElementById("span1")；其中a是jQuery對象，b是dom對象，二者不一樣，屬性不能混着使用，可是兩個對象能夠轉換；
(2)兩種對象之間的轉換：
jQuery對象向dom對象的轉換(轉換後可使用dom的屬性innerHTML)的兩種方法：
a、$("#span1").get(0).innerHTML="美美噠！";
b、$("#span1").[0].innerHTML="美美噠！";
dom對象向jQuery對象的轉換：
var b = document.getElementById("span1")；——>${b}.html="美美噠";
注：轉換爲jQuery對象以後，html能夠換位css（即：可使用jQuery的屬性）：
好比：$("tbody tr:even").css("background-color","yellow");
（3）在實際開發中，var opEle= xxx；opEle是一個js變量，var $opEle= xxx；$opEle指的是jQuery變量；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom與JQ對象之間的轉換</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
<script>
function write1(){
//1.JS的DOM操做
//document.getElementById("span1").innerHTML="萌萌噠！";
//DOM對象沒法操做JQ對象裏面屬性和方法
//document.getElementById("span1").html("萌萌噠！");
var spanEle = document.getElementById("span1");
//將DOM對象轉換成JQ對象
$(spanEle).html("思密達");
}
$(function(){
$("#btn").click(function(){
//JQ對象沒法操做JS裏面的屬性和方法！！！
//$("#span1").innerHTML="呵呵噠！"，innerHTML是js的屬性
$("#span1").html("呵呵噠！");//這裏只能用html
//JQ對象向DOM對象轉換方式一
$("#span1").get(0).innerHTML="美美噠！";
//JQ對象向DOM對象轉換方式二
$("#span1")[0].innerHTML="棒棒噠！";
});
});
</script>
</head>
<body>
<input type="button" value="JS寫入" onclick="write1()"/>
<input type="button" value="JQ寫入" id="btn"/><br />
班長：<span id="span1">你好帥！</span>
</body>
</html>
3、jQuery的方法介紹（具體見jQuery手冊，這些方法不要求掌握（緣由是效果太low））
一、效果類方法
show（）：顯示隱藏的圖片等；hide（）：隱藏圖片等；
slideDown（）/slideUp（）；fadeIn（）/fadeOut（）；
掌握一種方法：toggle（）：顯示/隱藏標籤，寫一個小代碼介紹一下：
固然toggle（switch）參數可爲true：顯示；false：隱藏；能夠用表達式表明true或者false；
1 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 2 <script> 3 $(function(){ 4 $("#btn").click(function(){ 5 $("#img1").toggle(); 6 }); 7 }); 8 </script>
4、jQuery的選擇器
一、基本選擇器：#id（id選擇器）、element（標籤選擇器）、.class（類選擇器）、*（通用選擇器）、（selector1，selector2，selectorN）（羣組選擇器）；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本選擇器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("#one").css("background-color","pink"); 12 }); 13 14 $("#btn2").click(function(){ 15 $(".mini").css("background-color","pink"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("div").css("background-color","pink"); 20 }); 21 22 $("#btn4").click(function(){ 23 $("*").css("background-color","pink"); 24 }); 25 26 $("#btn5").click(function(){ 27 $("#two,.mini").css("background-color","pink"); 28 }); 29 }); 30 </script> 31 32 </head> 33 <body> 34 <input type="button" id="btn1" value="選擇爲one的元素"/> 35 <input type="button" id="btn2" value="選擇樣式爲mini的元素"/> 36 <input type="button" id="btn3" value="選擇全部的div元素"/> 37 <input type="button" id="btn4" value="選擇全部元素"/> 38 <input type="button" id="btn5" value="選擇id爲two而且樣式爲mini的元素"/> 39 <hr/> 40 <div id="one"> 41 <div class="mini"> 42 111 43 </div> 44 </div> 45 46 <div id="two"> 47 <div class="mini"> 48 222 49 </div> 50 <div class="mini"> 51 333 52 </div> 53 </div> 54 55 <div id="three"> 56 <div class="mini"> 57 444 58 </div> 59 <div class="mini"> 60 555 61 </div> 62 <div class="mini"> 63 666 64 </div> 65 </div> 66 67 <span id="four"> 68 69 </span> 70 </body> 71 </html>
二、層級選擇器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>層級選擇器</title> 6 <link rel="stylesheet" type="text/css" href="../../css/style.css"/> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script type="text/javascript"> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("body div").css("background-color","gold"); 12 }); 13 14 $("#btn2").click(function(){ 15 $("body>div").css("background-color","gold"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("#two+div").css("background-color","gold"); 20 }); 21 22 $("#btn4").click(function(){ 23 $("#one~div").css("background-color","gold"); 24 }); 25 }); 26 </script> 27 28 29 </head> 30 <body> 31 <input type="button" id="btn1" value="選擇body中的全部的div元素"/> 32 <input type="button" id="btn2" value="選擇body中的第一級的孩子"/> 33 <input type="button" id="btn3" value="選擇id爲two的元素的下一個元素"/> 34 <input type="button" id="btn4" value="選擇id爲one的全部的兄弟元素"/> 35 36 <hr/> 37 <div id="one"> 38 <div class="mini"> 39 111 40 </div> 41 </div> 42 43 <div id="two"> 44 <div class="mini"> 45 222 46 </div> 47 <div class="mini"> 48 333 49 </div> 50 </div> 51 52 <div id="three"> 53 <div class="mini"> 54 444 55 </div> 56 <div class="mini"> 57 555 58 </div> 59 <div class="mini"> 60 666 61 </div> 62 </div> 63 64 <span id="four"> 65 66 </span> 67 </body> 68 </html>
三、基本過濾選擇器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>層級選擇器</title> 6 <link rel="stylesheet" href="../../css/style.css" type="text/css"/> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("body div:first").css("background-color","red"); 12 }); 13 14 $("#btn2").click(function(){ 15 $("body div:last").css("background-color","red"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("body div:odd").css("background-color","red"); 20 }); 21 22 $("#btn4").click(function(){ 23 $("body div:even").css("background-color","red"); 24 }); 25 }); 26 </script> 27 28 29 </head> 30 <body> 31 <input type="button" id="btn1" value="body中的第一個div元素"/> 32 <input type="button" id="btn2" value="body中的最後一個div元素"/> 33 <input type="button" id="btn3" value="選擇body中的奇數的div"/> 34 <input type="button" id="btn4" value="選擇body中的偶數的div"/> 35 36 <hr/> 37 <div id="one"> 38 <div class="mini"> 39 111 40 </div> 41 </div> 42 43 <div id="two"> 44 <div class="mini"> 45 222 46 </div> 47 <div class="mini"> 48 333 49 </div> 50 </div> 51 52 <div id="three"> 53 <div class="mini"> 54 444 55 </div> 56 <div class="mini"> 57 555 58 </div> 59 <div class="mini"> 60 666 61 </div> 62 </div> 63 64 <span id="four"> 65 66 </span> 67 </body> 68 </html>
四、屬性選擇器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>層級選擇器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("div[id]").css("background-color","red"); 12 }); 13 14 $("#btn2").click(function(){ 15 $("div[id='two']").css("background-color","red"); 16 }); 17 18 }); 19 </script> 20 21 22 </head> 23 <body> 24 <input type="button" id="btn1" value="選擇有id屬性的div"/> 25 <input type="button" id="btn2" value="選擇有id屬性的值爲two的div"/> 26 27 <hr/> 28 <div id="one"> 29 <div class="mini"> 30 111 31 </div> 32 </div> 33 34 <div id="two"> 35 <div class="mini"> 36 222 37 </div> 38 <div class="mini"> 39 333 40 </div> 41 </div> 42 43 <div id="three"> 44 <div class="mini"> 45 444 46 </div> 47 <div class="mini"> 48 555 49 </div> 50 <div class="mini"> 51 666 52 </div> 53 </div> 54 55 <span id="four"> 56 57 </span> 58 </body> 59 </html>
五、表單選擇器：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title>表單選擇器</title> 5 <link rel="stylesheet" type="text/css" href="../../css/style.css"/> 6 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 7 <script> 8 $(function(){ 9 $("#btn1").click(function(){ 10 $(":input").css("background-color","pink"); 11 }); 12 $("#btn2").click(function(){ 13 $(":text").css("background-color","pink"); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <input type="button" id="btn1" value="選擇全部input元素" /> 20 <input type="button" id="btn2" value="選擇文本框" /> 21 <br/> 22 <form> 23 <input type="text" /><br /> 24 <input type="checkbox" /><br /> 25 <input type="radio" /><br /> 26 <input type="image" /><br /> 27 <input type="file" /><br /> 28 <input type="submit" /> 29 <input type="reset" /><br /> 30 <input type="password" /><br /> 31 <input type="button" /><br /> 32 <select><option/></select><br /> 33 <textarea></textarea><br /> 34 <button></button> 35 </form> 36 </body> 37 </html>
5、jQuery案例
一、隔行換色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成表格隔行換色</title> 6 <link rel="stylesheet" href="../css/style.css" /> 7 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 8 <script> 9 //1.頁面加載 10 $(function(){ 11 /*//2.獲取tbody下面的偶數行並設置背景顏色 12 $("tbody tr:even").css("background-color","yellow"); 13 //3.獲取tbody下面的奇數行並設置背景顏色 14 $("tbody tr:odd").css("background-color","green");*/ 15 16 //2.獲取tbody下面的偶數行並設置背景顏色 17 $("tbody tr:even").addClass("even"); 18 $("tbody tr:even").removeClass("even"); 19 //3.獲取tbody下面的奇數行並設置背景顏色 20 $("tbody tr:odd").addClass("odd"); 21 }); 22 </script> 23 24 </head> 25 <body> 26 <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> 27 <thead> 28 <tr> 29 <th>編號</th> 30 <th>姓名</th> 31 <th>年齡</th> 32 </tr> 33 </thead> 34 <tbody> 35 <tr > 36 <td>1</td> 37 <td>張三</td> 38 <td>22</td> 39 </tr> 40 <tr > 41 <td>2</td> 42 <td>李四</td> 43 <td>25</td> 44 </tr> 45 <tr > 46 <td>3</td> 47 <td>王五</td> 48 <td>27</td> 49 </tr> 50 <tr > 51 <td>4</td> 52 <td>趙六</td> 53 <td>29</td> 54 </tr> 55 <tr > 56 <td>5</td> 57 <td>田七</td> 58 <td>30</td> 59 </tr> 60 <tr > 61 <td>6</td> 62 <td>汾九</td> 63 <td>20</td> 64 </tr> 65 </tbody> 66 </table> 67 </body> 68 </html>
二、全選和全不選
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成複選框的全選和全不選</title> 6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 7 <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>--> 8 <script> 9 $(function(){ 10 $("#select").click(function(){ 11 //獲取下面全部的 複選框並將其選中狀態設置跟編碼的前端 複選框保持一致。 12 //attr方法與JQ的版本有關，在1.8.3及如下有效。 13 //$("tbody input").attr("checked",this.checked); 14 $("tbody input").prop("checked",this.checked); 15 });//prop（）方法適用於高版本和低版本 16 }); 17 </script> 18 19 </head> 20 <body> 21 <table border="1" width="500" height="50" align="center" id="tbl" > 22 <thead> 23 <tr> 24 <td colspan="4"> 25 <input type="button" value="添加" /> 26 <input type="button" value="刪除" /> 27 </td> 28 </tr> 29 <tr> 30 <th><input type="checkbox" id="select"></th> 31 <th>編號</th> 32 <th>姓名</th> 33 <th>年齡</th> 34 </tr> 35 </thead> 36 <tbody> 37 <tr > 38 <td><input type="checkbox" class="selectOne"/></td> 39 <td>1</td> 40 <td>張三</td> 41 <td>22</td> 42 </tr> 43 <tr > 44 <td><input type="checkbox" class="selectOne"/></td> 45 <td>2</td> 46 <td>李四</td> 47 <td>25</td> 48 </tr> 49 <tr > 50 <td><input type="checkbox" class="selectOne"/></td> 51 <td>3</td> 52 <td>王五</td> 53 <td>27</td> 54 </tr> 55 <tr > 56 <td><input type="checkbox" class="selectOne"/></td> 57 <td>4</td> 58 <td>趙六</td> 59 <td>29</td> 60 </tr> 61 <tr > 62 <td><input type="checkbox" class="selectOne"/></td> 63 <td>5</td> 64 <td>田七</td> 65 <td>30</td> 66 </tr> 67 <tr > 68 <td><input type="checkbox" class="selectOne"/></td> 69 <td>6</td> 70 <td>汾九</td> 71 <td>20</td> 72 </tr> 73 </tbody> 74 </table> 75 </body> 76 </html>
相關文章
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
