jQuery（一）
定義：對JavaScript對象和函數的封裝，提升開發效率
http://jquery.com/ 開發版\發佈版
做用：
1.訪問和操做DOM元素
2.控制頁面樣式
3.對頁面事件進行處理
4.與Ajax技術完美結合
5.擴展新的jQuery插件
優點：
1.出色的DOM封裝
2.可靠的事件處理機制
3.出色的瀏覽器兼容性
4.強大的選擇器
5.使用隱式迭代簡化編程
6.體積小，豐富的插件支持
jQuery和JavaScript區別：
window.onload $(document).ready()
執行時機 必須等頁面全部的內容（包括圖片，flash，視頻等）加載完畢後才能執行 網頁全部DOM文檔繪製完畢後便可執行，可能與DOM元素無關的內容（包括圖片，flash，視頻等）並無加載完
編寫個數 同一個頁面只能編寫一個 同一個頁面同時編寫多個
簡化寫法 無 $(function(){//執行代碼});
語法：
1.引入jQuery庫文件
2.$(選擇器).方法名();
<script>
$(document).ready(function() {
alert("Hello,jQuery！");
});
</script>
DOM元素的操做
a.js，獲取的是DOM對象
var input = document.getElementById('userName');
alert(input.value);
b.jQuery，獲取的是jQuery對象
var $input = $('#userName');
alert($input.val());
【注意：DOM對象和jQuery對象分別有一套獨立的方法，不能混用！！！】
jQuery對象和DOM對象轉換
1.數組方式
var $userName = $('#userName');
var userName = $userName[0];
2.get方法
var $userName = $('#userName');
var userName = &userName.get(0);
【★注意：jQuery對象自己是一個集合★】
範例：javascript
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title></title> 6 </head> 7 <body> 8 9 <input id="userName" type="text" value="admin"></input> 10 <button value="點擊" onclick="getUserName()">點擊</button> 11 <button id="btn" value="jQuery">jQuery</button> 12 13 <script type="text/javascript" src="bootstrap/bootstrap.js"></script> 14 <!-- jQuery包 --> 15 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 16 <script type="text/javascript"> 17 18 /* 文檔就緒事件 */ 19 $(document).ready(function(){ 20 alert('hello,jQuery'); 21 }); 22 23 //文檔就緒的簡化寫法 24 $(function(){ 25 alert('您好！'); 26 }); 27 28 /* jQuery獲取jQuery對象 */ 29 $(function(){ 30 31 $('#btn').click(function () { 32 /* body... */ 33 alert($('#userName').val()); 34 }); 35 36 }); 37 38 /* 原始js獲取DOM對象 */ 39 function getUserName(){ 40 //使用原始方法獲取DOM對象 41 var inputDom = document.getElementById('userName').value; 42 alert(inputDom); 43 } 44 </script> 45 </body> 46 </html>
jQuery選擇器
1.基本選擇器：class、id
a.標籤選擇器：$('h2')
b.類選擇器：$('.title')
c.ID選擇器：$('#title')
d.並集選擇器：$('div,p,.title')
e.交集選擇器：$('h2.title')
f.全局選擇器：$('*')
2.層次選擇器：HTML佈局結構
a.後代選擇器：$('#menu h2') 選取#menu下的全部<h2>元素
b.子選擇器：$('#menu>span') 選取#menu的子元素<span>
c.相鄰元素選擇器：$('h2+dl') 選取緊鄰<h2>元素以後的同輩元素<dl>
d.同輩元素選擇器：$('h2~dl') 選取<h2>元素以後全部的同輩元素<dl>
3.過濾選擇器：指定的過濾規則
1)屬性過濾選擇器
a.$("[href]") 選取含有href屬性的元素
b.$("[href ='#']") 選取href屬性值爲「#」的元素
c.$("[href !='#']") 選取href屬性值不爲「#」的元素
d.$("[href^='en']") 選取href屬性值以en開頭的元素
e.$("[href$='.jpg']") 選取href屬性值以.jpg結尾的元素
f.$("li[id][title=新聞要點]") 選取含有id屬性和title屬性爲新聞要點的<li>元素
2)基本過濾選擇器
a.$("li:first") 選取全部<li>元素中的第一個<li>元素
b.$("li:last") 選取全部<li>元素中的最後一個<li>元素
c.$("li:even") 選取索引是偶數的全部<li>元素（index從0開始）
d.$("li:odd") 選取索引是奇數的全部<li>元素（index從0開始）
e.$("li:eq(1)") 選取索引等於1的<li>元素（index從0開始）
f.$("li:gt(1)") 選取索引大於1的<li>元素（注：大於1，不包括1）（index從0開始）
g.$("li:lt(1)") 選取索引小於1的<li>元素（注：小於1，不包括1）（index從0開始）
3)可見性過濾選擇器
a.$(":visible") 選取全部可見的元素
b.$(":hidden") 選取全部隱藏的元素
4)表單過濾選擇器
a.$( ":input") 選取全部的表單元素
b.$("[type=ckeckbox]:checked") 選取全部選中的複選框元素
c.$("select:selected") 匹配全部選中的下拉框
d.$( ":enabled") 匹配全部可用元素
e.$(":disabled") 匹配全部不可用元素
jQuery提供的方法
1.DOM元素的篩選
a.位置：eq(),first(),last(),next(),prev()
b.層次：chlidren()，parent()，siblings()，closest()
c.指定表達式：find()，hasClass()
2.屬性操做
a.class屬性：addClass()，removeClass()，toggleClass()
b.value屬性：val()：獲取或設置元素的值，通常用於表單元素
c.內容屬性：html()，text()
3.樣式
a.單樣式操做：height()，width()
b.組合樣式操做：css()
4.事件
a.事件綁定：$(選擇器).事件名(); / $(選擇器).on(事件類型,[選擇器],[參數],方法);
b.事件移除：$(選擇器).off(事件類型,[選擇器],方法);
c.事件觸發：$(選擇器).trigger(事件類型,[參數]);
經常使用事件：ready，click，mouseover，mouseout，focus，blur，hover
5.操做
6.動畫效果
範例：jQuery對象和DOM對象區別css
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title></title> 6 </head> 7 <body> 8 <input id="userName" type="text" value="admin"></input> 9 <button value="點擊" onclick="getUserName()">點擊</button> 10 <button id="btn" value="jQuery">jQuery</button> 11 <script type="text/javascript" src="bootstrap/bootstrap.js"></script> 12 <!-- jQuery包 --> 13 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 14 <script type="text/javascript"> 15 16 /* 文檔就緒事件 */ 17 $(document).ready(function(){ 18 alert('hello,jQuery'); 19 }); 20 21 //文檔就緒的簡化寫法 22 $(function(){ 23 alert('您好！'); 24 }); 25 26 /* jQuery獲取jQuery對象 */ 27 $(function(){ 28 $('#btn').click(function () { 29 alert($('#userName').val()); 30 }); 31 }); 32 33 /* 原始js獲取DOM對象 */ 34 function getUserName(){ 35 //使用原始方法獲取DOM對象 36 var inputDom = document.getElementById('userName').value; 37 alert(inputDom); 38 } 39 40 $(function(){ 41 var inputDom = document.getElementById('userName').value; 42 console.log(inputDom); 43 var $inputJQ = $('#userName'); 44 console.log($inputJQ); 45 }); 46 </script> 47 </body> 48 </html>
範例：jQuery選擇器html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .step h1+ol{ 8 background-color: red; 9 } 10 li[class]{ 11 color:blue; 12 } 13 li[class=s]{ 14 color: yellow; 15 } 16 input[data-role="save"]{ 17 background-color: blue; 18 color: white; 19 border: none; 20 border-radius: 4px; 21 } 22 li:nth-child(1),li:nth-child(2){ 23 font-size: 40px; 24 } 25 </style> 26 </head> 27 <body> 28 <script type="text/javascript" src="bootstrap/jquery.min.js"></script> 29 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 30 <div class="step"> 31 <h1>把大象裝進冰箱</h1> 32 <ol> 33 <li class="">打開冰箱</li> 34 <li class="s">把冰箱清空</li> 35 <li>把大象裝進去</li> 36 <li>關上冰箱</li> 37 </ol> 38 <h1>把熊貓裝進冰箱</h1> 39 <ol> 40 <li>打開冰箱</li> 41 <li>把冰箱清空</li> 42 <li>把熊貓裝進去</li> 43 <li>關上冰箱</li> 44 </ol> 45 <input type="button" value="登陸" data-role="save"></input> 46 </div> 47 <script type="text/javascript"> 48 $(function(){ 49 /* 得到全部的奇偶行 */ 50 $('li:odd').css('background-color','blue'); 51 $('li:odd').css({ 52 'background-color':'blue', 53 'color':'red', 54 'font-size':'20px' 55 }); 56 57 /* 找到第一個ol下面的第三個li */ 58 $('ol li:eq(2)').css('border','10px solid red'); 59 60 /* 找到全部ol下面的第三個li */ 61 $('ol').find('li:eq(2)').css('border','10px solid red'); 62 }); 63 </script> 64 </body> 65 </html>
範例：事件java
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .news li.selected{ 8 background-color: red; 9 color: white; 10 } 11 </style> 12 </head> 13 <body> 14 <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 15 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 16 17 <button id="btn_add" value="添加">添加</button> 18 <h3>新聞列表</h3> 19 <ol class="news"> 20 <li><a href="javascript:;"></a>國內新聞</li> 21 <li>國際新聞</li> 22 <li>體育新聞</li> 23 <li>新聞列表</li> 24 </ol> 25 26 <script type="text/javascript"> 27 $(function(){ 28 $('#btn_add').click(function () { 29 var $li = $('<li></li>'); 30 $li.text('新添加'); 31 $('ol').append($li); 32 }); 33 34 $('.news li').click(function () { 35 // $(this).toggleClass('selected'); 36 // $(this).addClass('selected').siblings().removeClass('selected'); 37 $(this).toggleClass('selected').siblings().removeClass('selected'); 38 $(this).css('font-size','20px'); 39 alert($(document).height()); 40 }); 41 42 $('.news').on('click','li',function(){ 43 $(this).toggleClass('selected').siblings().removeClass('selected'); 44 /* 事件觸發一次，就關閉 */ 45 // $('.news').off('click'); 46 47 /* 點擊li，就觸發添加按鈕 */ 48 $('#btn_add').trigger('click'); 49 }); 50 }); 51 </script> 52 </body> 53 </html>
範例：jQuery操做表格jquery
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <table> 10 <thead> 11 <tr> 12 <th>姓名</th> 13 <th>性別</th> 14 <th>出生日期</th> 15 <th>電話</th> 16 <th>郵箱</th> 17 <th>操做</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <td>張三</td> 23 <td>男</td> 24 <td>1999-11-11</td> 25 <td>13612345672</td> 26 <td>zhangsan@qq.com</td> 27 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 28 </tr> 29 <tr> 30 <td>李四</td> 31 <td>男</td> 32 <td>1999-11-11</td> 33 <td>13612345672</td> 34 <td>zhangsan@qq.com</td> 35 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 36 </tr> 37 <tr> 38 <td>王五</td> 39 <td>男</td> 40 <td>1999-11-11</td> 41 <td>13612345672</td> 42 <td>zhangsan@qq.com</td> 43 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 44 </tr> 45 <tr> 46 <td>趙六</td> 47 <td>男</td> 48 <td>1999-11-11</td> 49 <td>13612345672</td> 50 <td>zhangsan@qq.com</td> 51 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 52 </tr> 53 <tr> 54 <td>劉七</td> 55 <td>男</td> 56 <td>1999-11-11</td> 57 <td>13612345672</td> 58 <td>zhangsan@qq.com</td> 59 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 60 </tr> 61 </tbody> 62 </table> 63 <div>詳細信息</div> 64 </div> 65 66 <div> 67 <table> 68 <thead> 69 <tr> 70 <th>姓名</th> 71 <th>性別</th> 72 <th>出生日期</th> 73 <th>電話</th> 74 <th>郵箱</th> 75 <th>操做</th> 76 </tr> 77 </thead> 78 <tbody> 79 <tr> 80 <td>張三</td> 81 <td>男</td> 82 <td>1999-11-11</td> 83 <td>13612345672</td> 84 <td>zhangsan@qq.com</td> 85 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 86 </tr> 87 <tr> 88 <td>李四</td> 89 <td>男</td> 90 <td>1999-11-11</td> 91 <td>13612345672</td> 92 <td>zhangsan@qq.com</td> 93 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 94 </tr> 95 <tr> 96 <td>王五</td> 97 <td>男</td> 98 <td>1999-11-11</td> 99 <td>13612345672</td> 100 <td>zhangsan@qq.com</td> 101 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 102 </tr> 103 <tr> 104 <td>趙六</td> 105 <td>男</td> 106 <td>1999-11-11</td> 107 <td>13612345672</td> 108 <td>zhangsan@qq.com</td> 109 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 110 </tr> 111 <tr> 112 <td>劉七</td> 113 <td>男</td> 114 <td>1999-11-11</td> 115 <td>13612345672</td> 116 <td>zhangsan@qq.com</td> 117 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 118 </tr> 119 </tbody> 120 </table> 121 <div>詳細信息</div> 122 </div> 123 124 <div> 125 <table> 126 <thead> 127 <tr> 128 <th>姓名</th> 129 <th>性別</th> 130 <th>出生日期</th> 131 <th>電話</th> 132 <th>郵箱</th> 133 <th>操做</th> 134 </tr> 135 </thead> 136 <tbody> 137 <tr> 138 <td>張三</td> 139 <td>男</td> 140 <td>1999-11-11</td> 141 <td>13612345672</td> 142 <td>zhangsan@qq.com</td> 143 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 144 </tr> 145 <tr> 146 <td>李四</td> 147 <td>男</td> 148 <td>1999-11-11</td> 149 <td>13612345672</td> 150 <td>zhangsan@qq.com</td> 151 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 152 </tr> 153 <tr> 154 <td>王五</td> 155 <td>男</td> 156 <td>1999-11-11</td> 157 <td>13612345672</td> 158 <td>zhangsan@qq.com</td> 159 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 160 </tr> 161 <tr> 162 <td>趙六</td> 163 <td>男</td> 164 <td>1999-11-11</td> 165 <td>13612345672</td> 166 <td>zhangsan@qq.com</td> 167 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 168 </tr> 169 <tr> 170 <td>劉七</td> 171 <td>男</td> 172 <td>1999-11-11</td> 173 <td>13612345672</td> 174 <td>zhangsan@qq.com</td> 175 <td><a data-role="del" href="javascript:;">刪除</a><a data-role="detial" href="javascript:;">詳細</a></td> 176 </tr> 177 </tbody> 178 </table> 179 <div>詳細信息</div> 180 </div> 181 182 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 183 <script type="text/javascript"> 184 $(function(){ 185 $('a[data-role="del"]').click(function(){ 186 /* (a)td->tr->td:first */ 187 // var name = $(this).parent().parent().find('td:first').text(); 188 var name = $(this).closest('tr').children().first().text(); 189 confirm(name + '?'); 190 }); 191 192 $('a[data-role="detial"]').click(function(){ 193 var name = $(this).closest('tr').find('td:eq(0)').text(); 194 var $detialLayer = $(this).closest('table').next(); 195 $detialLayer.html(name); 196 // confirm('查看' + name); 197 }); 198 }); 199 </script> 200 </body> 201 </html>
範例：下拉表單編程
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="bootstrap/select2-4.0.2-dist/css/select2.min.css"> 7 </head> 8 <body> 9 <select style="width: 200px;"> 10 <option>1</option> 11 <option>12</option> 12 <option>13</option> 13 <option>14</option> 14 <option>21</option> 15 <option>31</option> 16 <option>41</option> 17 <option>61</option> 18 </select> 19 20 <script type="text/javascript" src="bootstrap/jquery-1.11.0.js"></script> 21 <script type="text/javascript" src="bootstrap/select2-4.0.2-dist/js/select2.full.min.js"></script> 22 <script type="text/javascript"> 23 $(function () { 24 $('select').select2(); 25 }); 26 </script> 27 </body> 28 </html>
- 1. 【jQuery】-----jQuery簡介（一）
- 2. JQuery(一)
- 3. jQuery(一)
- 4. jQuery（一）
- 5. JQuery一、
- 6. jQuery 一
- 7. Jquery(一)
- 8. Jquery(一) 初識Jquery，簡單使用Jquery。
- 9. jQuery基礎(一)
- 10. jQuery 學習（一）
- 更多相關文章...
- • 一對一關聯查詢 - MyBatis教程
- • jQuery Mobile 安裝 - jQuery Mobile 教程
- • RxJava操作符（一）Creating Observables
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. 【jQuery】-----jQuery簡介（一）
- 2. JQuery(一)
- 3. jQuery(一)
- 4. jQuery（一）
- 5. JQuery一、
- 6. jQuery 一
- 7. Jquery(一)
- 8. Jquery(一) 初識Jquery，簡單使用Jquery。
- 9. jQuery基礎(一)
- 10. jQuery 學習（一）