Part15 – 前端之jQuery
本節內容
- jQuery
1、jQuery
jQuery是對DOM的封裝
1 jQuery 2 3 中文在線文檔：http://jquery.cuishifeng.cn/ 4 5 模塊(Python) <--> 類庫(其餘語言中) 6 jQuery：集合DOM/BOM/JavaScript的類庫 7 8 版本： 9 1.x 1.12 推薦(能夠兼容舊版本瀏覽器) 10 2.x 11 3.x 12 13 轉換： 14 jQuery對象[0] -> Dom對象 15 Dom對象 -> $(Dom對象) = jQuery對象 16 17 18 1、查找元素 19 a、DOM 20 10左右 21 b、jQuery： 22 選擇器，直接找到某個或者某類標籤（跟CSS相似） 23 1. id 24 $('#id') //id爲id的標籤 25 26 2. class 27 <div class='c1'></div> 28 $(".c1") //全部class爲c1的標籤 29 30 3. 標籤 31 <div id='i10' class='c1'> 32 <a>f</a> 33 <a>f</a> 34 </div> 35 <div class='c1'> 36 <a>f</a> 37 </div> 38 <div class='c1'> 39 <div class='c2'> </div> 40 </div> 41 42 $('a') //全部的a標籤 43 44 4. 組合(一次查詢多個，用逗號分隔) 45 <div id='i10' class='c1'> 46 <a>f</a> 47 <a>f</a> 48 </div> 49 <div class='c1'> 50 <a>f</a> 51 </div> 52 <div class='c1'> 53 <div class='c2'> </div> 54 </div> 55 56 $('a') 57 $('.c2') 58 59 $('a,.c2,#i10') 60 61 5. 層級(層層過濾) 62 $('#i10 a') 子子孫孫 63 $('#i10>a') 只找兒子 64 65 6. 基本 66 :first 67 :last 68 :eq() 69 70 7. 屬性 71 $('[alex]') 具備alex屬性的全部標籤 72 $('[alex="123"]') alex屬性等於123的標籤 73 74 -------------------- 75 代碼： 76 <input type='text'/> 77 <input type='text'/> 78 <input type='file'/> 79 <input type='password'/> 80 81 經過屬性選擇器查找： 82 $("input[type='text']") 83 經過表單選擇器查找： 84 $(':text') 85 86 8. 實例： 87 多選，反選，全選 88 - 選擇權 89 - 90 $('#tb:checkbox').prop('checked'); 獲取值 91 $('#tb:checkbox').prop('checked', true); 設置值 92 - 93 jQuery方法內置循環,批量操做簡單的這樣作便可： $('#tb:checkbox').xxxx 94 95 - $('#tb:checkbox').each(function(k){ 96 // k當前索引 97 // this代指DOM對象，$(this)代指jQuery對象，都是指當前循環的元素 98 99 }) 100 101 - 三元運算：var v = 條件? 條件爲真時值：條件爲假時值 102 var v = $(this).prop('checked')?false:true; 103 104 105 9. 篩選器 106 107 經過選擇器定位到標籤後，須要經過篩選器定位其關聯標籤 -------------- 108 <div> 109 <a>asdf</a> 110 <a>asdf</a> 111 <a id='i1'>asdf</a> 112 <a>asdf</a> 113 <a id='ii1'>asdf</a> 114 <a>asdf</a> 115 </div> 116 --------------- 117 $('#i1').next() 118 $('#i1').nextAll() 119 $('#i1').nextUntil('#ii1') 120 121 $('#i1').prev() 122 $('#i1').prevAll() 123 $('#i1').prevUntil('#ii1') 124 125 $('#i1').parent() 126 $('#i1').parents() 127 $('#i1').parentsUntil() 128 129 $('#i1').children() 130 $('#i1').siblings() 131 $('#i1').find() 132 $('li:eq(1)') 133 $('li').eq(1) 134 first() 135 last() 136 hasClass(class) 137 138 2、操做 139 140 a、文本操做： 141 $(..).text() # 不加內容獲取文本 142 $(..).text(「<a>1</a>」) # 加內容設置文本 143 144 $(..).html() # 不加內容獲取內容 145 $(..).html("<a>1</a>") 146 147 $(..).val() #獲取值，至關於DOM的value 148 $(..).val(..) 149 150 b、樣式操做： 151 addClass() #給對象增長類 152 removeClass() #給對象減小類 153 toggleClass() #開關,點擊切換增長、減小類 154 155 c、屬性操做： 156 # 專門用於作自定義屬性 157 $(..).attr('n') #獲取屬性n的值 158 $(..).attr('n','v') #設置屬性n的值 159 $(..).removeAttr('n') #移除屬性n 160 161 //示例 162 <input type='checkbox' id='i1' /> 163 164 165 # 專門用於chekbox,radio等選中操做(.attr在jQury的1.x和2.x中很差用) 166 $(..).prop('checked') 167 $(..).prop('checked', true) 168 169 PS: 170 $(..).index() 獲取索引位置 171 172 d、文檔處理： 173 append 向匹配元素內部追加內容在最後（孩子標籤） 174 prepend 向匹配元素內部追加內容在最前（孩子標籤） 175 after 向匹配元素後追加（兄弟標籤） 176 before 177 178 remove 刪除標籤及內容 179 empty 僅清空標籤內容 180 181 clone 克隆 182 183 e、css處理 184 185 $('t1').css('樣式名稱', '樣式值') //更細的處理對象的樣式 186 點贊： 187 - $('t1').append() 188 - $('t1').remove() 189 - 定時器setInterval 190 - 透明度 opacity 1 -> 0 191 - 位置變化position 192 - 字體大小，位置 193 194 f、位置： 195 $(window).scrollTop() 獲取windows窗口滾動了多少 196 $(window).scrollTop(0) 設置 197 scrollLeft([val]) 198 199 $('i1').offset() 指定標籤在html中的座標 200 $('i1').offset().left 指定標籤在html中左邊的座標 201 $('i1').offset().top 指定標籤在html中頂部的座標 202 203 position() 指定標籤相對父標籤(relative)標籤的座標 204 --------------- 205 <div style='relative'> 206 <div> 207 <div id='i1' style='position:absolute;height:80px;border:1px'></div> 208 </div> 209 </div> 210 --------------- 211 212 $('i1').height() # 獲取標籤的高度(純高度) 213 $('i1').innerHeight() # 獲取標籤的高度(純高度+內邊距) 214 $('i1').outerHeight() # 獲取標籤的高度(純高度+內邊距+邊框) 215 $('i1').outerHeight(true) # 獲取標籤的高度(純高度+內邊距+邊框+外邊距 216 217 # 純高度，邊框，外邊距，內邊距 218 219 3、事件 220 1、綁定方式 221 DOM： 三種綁定方式 222 jQuery： 223 $('.c1').click() 224 $('.c1')..... 225 --------- 226 $('.c1').bind('click',function(){ 227 228 }) 229 230 $('.c1').unbind('click',function(){ 231 232 }) 233 234 ******************* 235 //委託，只有事件發生時才綁定 236 //函數解釋以後添加的標籤，也能夠被綁定 237 $('.c').delegate('a', 'click', function(){ 238 239 }) 240 $('.c').undelegate('a', 'click', function(){ 241 242 }) 243 244 ******************* 245 $('.c1').on('click', function(){ 246 247 }) 248 $('.c1').off('click', function(){ 249 250 }) 251 252 2、阻止事件發生 253 return false 254 255 3、函數外邊加$(),當頁面框架加載完畢後，函數自動執行（提早綁定事件時機） 256 $(function(){ 257 258 $(...) 259 260 }) 261 262 4、jQuery擴展： 263 1、jquery擴展，兩種方式調用方式不同 264 - $.extend $.方法 265 - $.fn.extend $(..).方法 266 2、引入的代碼全局變量問題(引入的代碼中寫一個自執行函數,對全局變量進行封裝) 267 (function(){ 268 var status = 1; 269 // 封裝變量 270 })(jQuery) 271 272 273 274 ===》實例： 275 276 做業： 277 一： 278 $('i1').height() # 獲取標籤的高度(純高度) 279 $('i1').innerHeight() # 獲取標籤的高度(純高度+內邊距) 280 $('i1').outerHeight() # 獲取標籤的高度(純高度+內邊距+邊框) 281 $('i1').outerHeight(true) # 獲取標籤的高度(純高度+內邊距+邊框+外邊距 282 283 # 純高度，邊框，外邊距，內邊距 284 285 2、全部示例敲一遍 286 287 3、編輯框 288
一、引入jQuery
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="csswenjian" /> 7 <style> 8 9 </style> 10 11 </head> 12 <body> 13 <input type="text" /> 14 <input type="text" disabled /> 15 <input type="text" /> 16 17 <div id='i10' class='c1'> 18 <div> 19 <a>asd</a> 20 </div> 21 <a alex='123'>f2</a> 22 <a alex='456'>f2</a> 23 <a>f3</a> 24 <a>f4</a> 25 </div> 26 27 <div class='c1'> 28 <a>f</a> 29 </div> 30 <div class='c1'> 31 <div class='c2'> </div> 32 </div> 33 34 <!--引入jQuery，1.x版本兼容的舊版本瀏覽器更多--> 35 <script src="jquery-1.12.4.js"></script> 36 <script> 37 //調用jQuery(jQuery. 或 $.) 38 //找到標籤 -> $("#i1") 39 $("#i1") 40 </script> 41 </body> 42 </html>
二、示例之多選、取消、反選
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--示例多選、取消、反選 - 選擇器、三元運算--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <input type="button" value="全選" onclick="checkAll();" /> 10 <input type="button" value="反選" onclick="reverseAll();" /> 11 <input type="button" value="取消" onclick="cancleAll();"/> 12 13 <table border="1"> 14 <thead> 15 <tr> 16 <th>選項</th> 17 <th>IP</th> 18 <th>PORT</th> 19 </tr> 20 </thead> 21 <tbody id="tb"> 22 23 <tr> 24 <td><input type="checkbox" /></td> 25 <td>1.1.1.1</td> 26 <td>80</td> 27 </tr> 28 <tr> 29 <td><input type="checkbox" /></td> 30 <td>1.1.1.1</td> 31 <td>80</td> 32 </tr> 33 <tr> 34 <td><input type="checkbox" /></td> 35 <td>1.1.1.1</td> 36 <td>80</td> 37 </tr> 38 </tbody> 39 </table> 40 41 <script src="jquery-1.12.4.js"></script> 42 <script> 43 //查到的結果->jQury會自動循環，DOM須要手動循環 44 function checkAll() { 45 $('#tb :checkbox').prop('checked',true); 46 } 47 function cancleAll() { 48 $('#tb :checkbox').prop('checked',false); 49 } 50 function reverseAll() { 51 //.each是jQuery中的循環 52 $(':checkbox').each(function(k){ 53 // k是索引值，this代指當前循環的每個元素(DOM對象) 54 /* 55 if(this.checked){ 56 this.checked = false; 57 }else{ 58 this.checked = true; 59 } 60 */ 61 62 //***************************************** 63 // $(this)代指當前循環的每個元素(jQuery對象) 64 /* 65 if($(this).prop('checked')){ 66 $(this).prop('checked', false); 67 }else{ 68 $(this).prop('checked', true); 69 } 70 */ 71 72 //***************************************** 73 // 三元運算：var v = 條件? 條件爲真時值：條件爲假時值 74 var v = $(this).prop('checked')?false:true; 75 $(this).prop('checked',v); 76 }) 77 } 78 </script> 79 </body> 80 </html>
三、示例之左側菜單
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--左側菜單示例 - 選項器、篩選器--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .header{ 9 background-color: black; 10 color: wheat; 11 } 12 .content{ 13 min-height: 50px; 14 } 15 .hide{ 16 display: none; 17 } 18 </style> 19 </head> 20 <body> 21 <div style=" height:400px;width: 200px;border: 1px solid #dddddd"> 22 <div class="item"> 23 <div class="header">標題一</div> 24 <div id="i1" class="content hide">內容</div> 25 </div> 26 <div class="item"> 27 <div class="header">標題二</div> 28 <div class="content hide">內容</div> 29 </div> 30 31 <div class="item"> 32 <div class="header">標題三</div> 33 <div class="content hide">內容</div> 34 </div> 35 </div> 36 <script src="jquery-1.12.4.js"></script> 37 <script> 38 $('.header').click(function(){ 39 // 當前點擊的標籤 $(this) 40 // 獲取某個標籤的下一個標籤 41 // 獲取某個標籤的父標籤 42 // 獲取全部的兄弟標籤 43 // 添加樣式和移除樣式 44 // $('.i1').addClass('hide') 45 // $('#i1').removeClass('hide') 46 47 //經過層級選擇器篩選過於麻煩 48 // $("label + input"); 49 // var v = $("this + div"); 這樣寫this就無效了 50 // console.log(v); 51 52 // 篩選器:結構-> 選擇器.篩選方法() 53 /* 54 $(this).next() 當前對象下一個 55 $(this).prev() 上一個 56 $(this).parent() 父 57 $(this).children() 孩子 58 $('#i1').siblings() 兄弟 59 $('#i1').find('#i1') 子子孫孫中查找 60 // 61 $('#i1').addClass('hide') 62 $('#i1').removeClass('hide') 63 */ 64 65 // 鏈式編程 66 // $(...).click(function(){ 67 // this.. 68 // }) 69 70 //$(this).next().removeClass('hide'); 71 //$(this).parent().siblings().find('.content').addClass('hide') 72 73 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') 74 75 }) 76 </script> 77 </body> 78 </html>
四、示例之模態編程框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--示例：模態編程框 - 循環、屬性操做--> 4 <!--添加、編輯、刪除、取消、肯定--> 5 <head> 6 <meta charset="UTF-8"> 7 <title>Title</title> 8 <style> 9 .hide{ 10 display: none; 11 } 12 .modal{ 13 position: fixed; 14 top: 50%; 15 left: 50%; 16 width: 500px; 17 height: 400px; 18 margin-left: -250px; 19 margin-top: -250px; 20 background-color: #eeeeee; 21 z-index: 10; 22 } 23 .shadow{ 24 position: fixed; 25 top: 0; 26 left: 0; 27 right: 0; 28 bottom: 0; 29 opacity: 0.6; 30 background-color: black; 31 z-index: 9; 32 } 33 </style> 34 </head> 35 <body> 36 <a onclick="addElement();">添加</a> 37 38 <table border="1" id="tb"> 39 <tr> 40 <td target="hostname">1.1.1.11</td> 41 <td target="port">80</td> 42 <td target="ip">80</td> 43 <td> 44 <a class="edit">編輯</a> | <a class="del">刪除</a> 45 </td> 46 </tr> 47 <tr> 48 <td target="hostname">1.1.1.12</td> 49 <td target="port">80</td> 50 <td target="ip">80</td> 51 <td> 52 <a class="edit">編輯</a> | <a class="del">刪除</a> 53 </td> 54 </tr> 55 <tr> 56 <td target="hostname">1.1.1.13</td> 57 <td target="port">80</td> 58 <td target="ip">80</td> 59 <td> 60 <a class="edit">編輯</a> | <a class="del">刪除</a> 61 </td> 62 </tr> 63 <tr> 64 <td target="hostname">1.1.1.14</td> 65 <td target="port">80</td> 66 <td target="ip">80</td> 67 <td> 68 <a class="edit">編輯</a> | <a class="del">刪除</a> 69 </td> 70 71 </tr> 72 </table> 73 74 <div class="modal hide"> 75 <div> 76 <input name="hostname" type="text" /> 77 <input name="port" type="text" /> 78 <input name="ip" type="text" /> 79 </div> 80 81 <div> 82 <input type="button" value="取消" onclick="cancelModal();" /> 83 <input type="button" value="肯定" onclick="confirmModal();" /> 84 </div> 85 </div> 86 87 <div class="shadow hide"></div> 88 89 <script src="jquery-1.12.4.js"></script> 90 <script> 91 //刪除 92 $('.del').click(function () { 93 $(this).parent().parent().remove(); 94 }); 95 96 //肯定 97 function confirmModal() { 98 var tr = document.createElement('tr'); 99 var td1 = document.createElement('td'); 100 td1.innerHTML = "11.11.11.11"; 101 var td2 = document.createElement('td'); 102 td2.innerHTML = "8001"; 103 104 $(tr).append(td1); 105 $(tr).append(td2); 106 107 $('#tb').append(tr); 108 109 $(".modal,.shadow").addClass('hide'); 110 111 //$('.modal input[type="text"]').each(function () { 112 // var temp = "<td>..." 113 // 114 //}) 115 } 116 117 //添加 118 function addElement() { 119 $(".modal,.shadow").removeClass('hide'); 120 } 121 122 //取消 123 function cancelModal() { 124 $(".modal,.shadow").addClass('hide'); 125 $('.modal input[type="text"]').val(""); 126 } 127 128 //編輯，彈出修改模態框 129 //類edit綁定鼠標點擊事件(點擊編輯彈出編輯框) 130 // 1.循環獲取tds中內容 131 // 2.獲取 <td>內容</td> 獲取中間的內容 132 // 3.賦值給input標籤中的value 133 $('.edit').click(function(){ 134 //彈出模態框 135 $(".modal,.shadow").removeClass('hide'); 136 // this,獲取全部標籤 137 var tds = $(this).parent().prevAll(); 138 //循環標籤.each，獲取值賦給input 139 tds.each(function () { 140 // 獲取td的target屬性值 141 var n = $(this).attr('target'); 142 // 獲取td中的內容，拼接成選擇器字符串，用來選擇input框 143 var text = $(this).text(); 144 var a1 = '.modal input[name="'; 145 var a2 = '"]'; 146 var temp = a1 + n + a2; //選擇器條件 --> .modal input[name="hostname"] 147 $(temp).val(text); 148 149 //var port = $(tds[0]).text(); 150 //var host = $(tds[1]).text(); 151 // 152 //$('.modal input[name="hostname"]').val(host); 153 //$('.modal input[name="port"]').val(port); 154 }); 155 }); 156 </script> 157 </body> 158 </html>
五、jQuery樣式操做
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--樣式操做--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 </style> 12 </head> 13 <body> 14 <input type='checkbox' id='i2' /> 15 16 <input id="i1" type="button" value="開關" /> 17 <div class="c1 hide">asdfasdf</div> 18 19 <script src="jquery-1.12.4.js"></script> 20 <script> 21 $('#i1').click(function(){ 22 //if($('.c1').hasClass('hide')){ 23 // $('.c1').removeClass('hide'); 24 //}else{ 25 // $('.c1').addClass('hide'); 26 // } 27 28 //上下效果等同 29 30 $('.c1').toggleClass('hide'); 31 }) 32 </script> 33 </body> 34 </html>
六、示例之TAB切換菜單
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--TAB切換菜單，自定義屬性方式--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 .menu{ 12 height: 38px; 13 background-color: #eeeeee; 14 line-height: 38px; 15 } 16 .active{ 17 background-color: brown; 18 } 19 .menu .menu-item{ 20 float: left; 21 border-right: 1px solid red; 22 padding: 0 5px; 23 /*點擊時鼠標變成小手*/ 24 cursor: pointer; 25 } 26 .content{ 27 min-height: 100px; 28 border: 1px solid #eeeeee; 29 } 30 </style> 31 </head> 32 <body> 33 34 <div style="width: 700px;margin:0 auto"> 35 36 <div class="menu"> 37 <!--自定義屬性a,與b相對應--> 38 <div class="menu-item active" a="1">菜單一</div> 39 <div class="menu-item" a="2">菜單二</div> 40 <div class="menu-item" a="3">菜單三</div> 41 </div> 42 <div class="content"> 43 <div b="1">內容一</div> 44 <div class="hide" b="2">內容二</div> 45 <div class="hide" b="3">內容三</div> 46 47 </div> 48 49 </div> 50 <script src="jquery-1.12.4.js"></script> 51 <script> 52 $('.menu-item').click(function(){ 53 $(this).addClass('active').siblings().removeClass('active'); 54 var target = $(this).attr('a'); 55 //字符串拼接 "[b='" + target + "']" 56 $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide'); 57 }); 58 </script> 59 </body> 60 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--TAB切換菜單，索引方式方式--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 .menu{ 12 height: 38px; 13 background-color: #eeeeee; 14 line-height: 38px; 15 } 16 .active{ 17 background-color: brown; 18 } 19 .menu .menu-item{ 20 float: left; 21 border-right: 1px solid red; 22 padding: 0 5px; 23 cursor: pointer; 24 } 25 .content{ 26 min-height: 100px; 27 border: 1px solid #eeeeee; 28 } 29 </style> 30 </head> 31 <body> 32 33 <div style="width: 700px;margin:0 auto"> 34 35 <div class="menu"> 36 <div class="menu-item active" >菜單一</div> 37 <div class="menu-item" >菜單二</div> 38 <div class="menu-item" >菜單三</div> 39 </div> 40 <div class="content"> 41 <div >內容一</div> 42 <div class="hide" >內容二</div> 43 <div class="hide">內容三</div> 44 45 </div> 46 47 </div> 48 <script src="jquery-1.12.4.js"></script> 49 <script> 50 $('.menu-item').click(function(){ 51 $(this).addClass('active').siblings().removeClass('active'); 52 //$('.content').children().eq()，找到與菜單索引值相同的內容 53 //$(this).index()對象的索引值 54 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); 55 56 }); 57 </script> 58 </body> 59 </html>
七、jQuery文檔處理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--文檔處理--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <input id="t1" type="text" /> 10 <input id="a1" type="button" value="添加" /> 11 <input id="a2" type="button" value="刪除" /> 12 <input id="a3" type="button" value="複製" /> 13 14 <ul id="u1"> 15 16 <li>1</li> 17 <li>2</li> 18 19 </ul> 20 <script src="jquery-1.12.4.js"></script> 21 <script> 22 //添加 23 $('#a1').click(function () { 24 var v = $('#t1').val(); 25 26 var temp = "<li>" + v + "</li>"; 27 //append向匹配元素內部追加內容在最後（孩子標籤） 28 // $('#u1').append(temp); 29 //prepend向匹配元素內部追加內容在最前（孩子標籤） 30 $('#u1').prepend(temp); 31 //after向匹配元素後追加（兄弟標籤） 32 // $('#u1').after(temp) 33 // $('#u1').before(temp) 34 }); 35 36 //刪除 37 $('#a2').click(function () { 38 var index = $('#t1').val(); 39 //刪除標籤及內容 40 //$('#u1 li').eq(index).remove(); 41 //清除內容 42 //$('#u1 li').eq(index).empty(); 43 }); 44 45 //複製 46 $('#a3').click(function () { 47 var index = $('#t1').val(); 48 var v = $('#u1 li').eq(index).clone(); 49 $('#u1').append(v); 50 }) 51 </script> 52 </body> 53 </html>
八、示例之點贊特效
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--點贊以及jQuery的css操做--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .container{ 9 padding: 50px; 10 border: 1px solid #dddddd; 11 } 12 .item{ 13 position: relative; 14 width: 30px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="container"> 20 <div class="item"> 21 <span>贊</span> 22 </div> 23 </div> 24 <div class="container"> 25 <div class="item"> 26 <span>贊</span> 27 </div> 28 </div> 29 <div class="container"> 30 <div class="item"> 31 <span>贊</span> 32 </div> 33 </div> 34 <div class="container"> 35 <div class="item"> 36 <span>贊</span> 37 </div> 38 </div> 39 40 <script src="jquery-1.12.4.js"></script> 41 <script> 42 $('.item').click(function () { 43 AddFavor(this); 44 }); 45 46 function AddFavor(self) { 47 // DOM對象 48 var fontSize = 15; 49 var top = 0; 50 var right = 0; 51 var opacity = 1; 52 //tag是DOM對象，轉換成jQuery對象$(tag) 53 //建立標籤 54 var tag = document.createElement('span'); 55 //設置標籤樣式 56 $(tag).text('+1'); 57 $(tag).css('color','green'); 58 $(tag).css('position','absolute'); 59 $(tag).css('fontSize',fontSize + "px"); 60 $(tag).css('right',right + "px"); 61 $(tag).css('top',top + 'px'); 62 $(tag).css('opacity',opacity); 63 //在.item的標籤內添加標籤對象tag 64 $(self).append(tag); 65 //定時改變標籤樣式和位置 66 var obj = setInterval(function () { 67 fontSize = fontSize + 10; 68 top = top - 10; 69 right = right - 10; 70 opacity = opacity - 0.1; 71 72 $(tag).css('fontSize',fontSize + "px"); 73 $(tag).css('right',right + "px"); 74 $(tag).css('top',top + 'px'); 75 $(tag).css('opacity',opacity); 76 //標籤看不到後刪除定時器和標籤 77 if(opacity < 0){ 78 clearInterval(obj); 79 $(tag).remove(); 80 } 81 }, 40); 82 83 } 84 </script> 85 86 </body> 87 </html>
九、示例之可拖動標籤
1 <!DOCTYPE html> 2 <html> 3 <!--可拖動標籤，jQuery標籤位置操做--> 4 <head lang="en"> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 <body> 9 <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> 10 <div id="title" style="background-color: black;height: 40px;"></div> 11 <div style="height: 300px;"></div> 12 </div> 13 <script type="text/javascript" src="jquery-1.12.4.js"></script> 14 <script> 15 $(function(){ 16 $('#title').mouseover(function(){ 17 $(this).css('cursor','move'); 18 }); 19 $("#title").mousedown(function(e){ 20 //console.log($(this).offset()); 21 var _event = e || window.event; 22 var ord_x = _event.clientX; 23 var ord_y = _event.clientY; 24 25 var parent_left = $(this).parent().offset().left; 26 var parent_top = $(this).parent().offset().top; 27 28 $('#title').on('mousemove', function(e){ 29 var _new_event = e || window.event; 30 var new_x = _new_event.clientX; 31 var new_y = _new_event.clientY; 32 33 var x = parent_left + (new_x - ord_x); 34 var y = parent_top + (new_y - ord_y); 35 36 $(this).parent().css('left',x+'px'); 37 $(this).parent().css('top',y+'px'); 38 39 }) 40 }); 41 $("#title").mouseup(function(){ 42 $("#title").off('mousemove'); 43 }); 44 }) 45 </script> 46 </body> 47 </html>
十、jQuery綁定的三種方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--jQuery綁定的三種方式--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <input id="t1" type="text" /> 10 <input id="a1" type="button" value="添加" /> 11 12 <ul id="u1"> 13 <li>1</li> 14 <li>2</li> 15 </ul> 16 <script src="jquery-1.12.4.js"></script> 17 <script> 18 $('#a1').click(function () { 19 var v = $('#t1').val(); 20 var temp = "<li>" + v + "</li>"; 21 $('#u1').append(temp); 22 }); 23 //方式一，函數解釋以後添加的標籤不能綁定事件 24 // $('ul li').click(function () { 25 // var v = $(this).text(); 26 // alert(v); 27 // }) 28 29 // $('ul li').bind('click',function () { 30 // var v = $(this).text(); 31 // alert(v); 32 // }) 33 //方式二，函數解釋以後添加的標籤不能綁定事件（能夠構造出來） 34 // $('ul li').on('click', function () { 35 // var v = $(this).text(); 36 // alert(v); 37 // }) 38 //方式三，委託，事件發生時才綁定 39 $('ul').delegate('li','click',function () { 40 var v = $(this).text(); 41 alert(v); 42 }) 43 44 </script> 45 </body> 46 </html>
十一、阻止事件發生
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--阻止、容許事件發生--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> 10 11 <a id="i1" href="http://www.oldboyedu.com">走你2</a> 12 <script src="jquery-1.12.4.js"></script> 13 <script> 14 //標籤事件綁定的函數先執行，在函數中輸入return false;標籤後邊的操做終止 15 //DOM中標籤也要寫onclick="return ClickOn()" 16 function ClickOn() { 17 alert(123); 18 return true; 19 } 20 //jQuery只在函數中輸入return false;就能夠了 21 $('#i1').click(function () { 22 alert(456); 23 return false; 24 }) 25 </script> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--表單驗證，根據提交的內容阻止或容許事件發生--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .error{ 9 color: red; 10 } 11 </style> 12 </head> 13 <body> 14 15 <form id="f1" action="s5.html" method="POST"> 16 <div><input name="n1" tex = "用戶名" type="text" /></div> 17 <div><input name="n2" tex = "密碼" type="password" /></div> 18 <div><input name="n3" tex = "郵箱" type="text" /></div> 19 <div><input name="n4" tex = "端口" type="text" /></div> 20 <div><input name="n5" tex = "IP" type="text" /></div> 21 22 <input type="submit" value="提交" /> 23 <img src="..."> 24 </form> 25 <script src="jquery-1.12.4.js"></script> 26 <script> 27 // 函數外邊加$(),當頁面框架加載完畢後，函數自動執行 28 // 提早綁定事件時機 29 // $.Login('#f1'),jQuery已經寫好的方法，同下面一大堆代碼 30 $(function(){ 31 $.Login('#f1') 32 }); 33 34 $(function(){ 35 // 當頁面全部元素徹底加載完畢後，執行 36 $(':submit').click(function () { 37 //執行表單驗證以前，先清空全部的.error標籤 38 $('.error').remove(); 39 var flag = true; 40 $('#f1').find('input[type="text"],input[type="password"]').each(function () { 41 var v = $(this).val(); 42 var n = $(this).attr('tex'); 43 //若是沒有輸入內容 44 if(v.length <= 0){ 45 flag = false; 46 //建立提示標籤 47 var tag = document.createElement('span'); 48 tag.className = "error"; 49 tag.innerHTML = n + "必填"; 50 $(this).after(tag); 51 //終止循環，至關於break 52 // return false; 53 } 54 }); 55 //結束整個函數 56 return flag; 57 }); 58 }); 59 60 //簡單的驗證有沒有輸入內容 61 // $(':submit').click(function () { 62 // var v = $(this).prev().val(); 63 // if(v.length > 0){ 64 // return true; 65 // }else{ 66 // alert('請輸入內容'); 67 // return false 68 // } 69 // }) 70 71 </script> 72 </body> 73 </html>
十二、jQuery擴展
1 <!DOCTYPE html> 2 <html lang="en"> 3 <!--jQuery擴展--> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 10 <script src="jquery-1.12.4.js"></script> 11 <!--能夠引入別人寫好的jQuery代碼，擴展名可能重複(沒法解決)--> 12 <!--引入的代碼全局變量問題(引入的代碼中寫一個自執行函數)--> 13 <script src="plugin1.js"></script> 14 <script> 15 var v = $.wangsen(); 16 alert(v); 17 // $('#i1').css() 18 // $.ajax() 19 20 // jquery擴展，兩種方式的調用方式不同 21 //方法一 22 // $.fn.extend({ 23 // "hanyang": function () { 24 // return 'db'; 25 // } 26 // }); 27 // var v = $('#i1').hanyang(); 28 // alert(v); 29 30 //方法二 31 // $.extend({ 32 // 'wangsen': function () { 33 // return 'sb'; 34 // } 35 // }); 36 // var v = $.wangsen(); 37 // alert(v); 38 </script> 39 40 </body> 41 </html>
/**
* Created by alex on 2016/11/26.
*/
status = 1;
$.extend({
'wangsen': function () {
return 'sb';
}
});
/**
* Created by alex on 2016/11/26.
*/
//引入的代碼全局變量問題(引入的代碼中寫一個自執行函數,對全局變量進行封裝)
(function (arg) {
var status = 1;
arg.extend({
'wangsen': function () {
return 'sb';
}
});
})(jQu$ery);
更多內容參考：http://www.cnblogs.com/wupeiqi/articles/5369773.html
相關文章
- 1. 前端之Jquery
- 2. 前端 之 jQuery
- 3. 前端之jQuery
- 4. 前端之JQuery
- 5. python15-前端之jQuery
- 6. DAY13-前端之jQuery
- 7. python前端之JQuery
- 8. 前端神器之jquery
- 9. 前端基礎之jQuery
- 10. 前端之JQuery第二篇
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端之Jquery
- 2. 前端 之 jQuery
- 3. 前端之jQuery
- 4. 前端之JQuery
- 5. python15-前端之jQuery
- 6. DAY13-前端之jQuery
- 7. python前端之JQuery
- 8. 前端神器之jquery
- 9. 前端基礎之jQuery
- 10. 前端之JQuery第二篇