jQuery01
jQuery01
$("#span1").get(0).innerHTML="美美噠！";
//JQ對象向DOM對象轉換方式二
$("#span1")[0].innerHTML="棒棒噠！";
});
});
</script>
</head>
<body>
<input type="button" value="JS寫入" οnclick="write1()"/>
<input type="button" value="JQ寫入" id="btn"/><br />
班長：<span id="span1">你好帥！</span>
</body>
</html>
一、jQuery簡介（write less，do more）
1、jQuery概念
jQuery是一個輕量級（嚴格意義上說，不能稱為一個框架）的js庫，輔助js開發，兼容css，多瀏覽器，jQuery2.0及之后的版本不再支持IE6/7/8，能夠使用戶更加方便的處理HTML、events、實現動畫效果，并且方便的為網站提供AJAX交互；最大的優勢是：說明文檔很全，各種應用說明的十分詳細，還有許多成熟的js插件可供選擇。
使用了jQuery之后，就不需要在HTML里邊插入大量的js代碼，只需要定義一個id即可（有些時候不需要）；
2、jQuery版本
jquery-1.8.3.js：體積大，適合學習使用；jquery-1.8.3.min.js：，壓縮版，體積小，適合開發使用；（1.8.3是目前使用較多的版本）
二、jQuery的引入和對象獲取
1、jQuery既然是一個js庫，使用前就要先引入：<script type="text/javascript" src="xxx/jquery-1.8.3.js"></script>;
/*知識點*/：傳統的js頁面加載（onload）和jQuery頁面加載的區別：
a、傳統的js頁面加載（onload）只能寫一次，多次書寫會存在后面覆蓋前面的現象，且jQuery的頁面加載比js快；
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>2、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寫入" οnclick="write1()"/>
<input type="button" value="JQ寫入" id="btn"/><br />
班長：<span id="span1">你好帥！</span>
</body>
</html>
三、jQuery的方法介紹（具體見jQuery手冊，這些方法不要求掌握（原因是效果太low））
1、效果類方法
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>四、jQuery的選擇器
1、基本選擇器：#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> 基本選擇器2、層級選擇器：
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> 層級選擇器3、基本過濾選擇器：
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> 基本過濾選擇器4、屬性選擇器：
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> 屬性選擇器5、表單選擇器：
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> 表單選擇器五、jQuery案例
1、隔行換色
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> 隔行換色2、全選和全不選
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> 全選和全不選?
posted on 2018-02-20 16:07 limuma 閱讀(...) 評論(...) 編輯 收藏轉載于:https://www.cnblogs.com/limuma/p/8455327.html
總結
- 上一篇： shell中$后加引号有什么用($str
- 下一篇： 【算法专题】积性函数