python之路-jQuery
http://jquery.cuishifeng.cncss
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（
或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。
jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各類主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery使用的主流系列：1.x（兼容性更好）、2.x、3.x（功能更齊全）
引入jQuery：<script src="jquery-1.12.4.js"></script> ，通常放在body的尾部。
調用jQuert方法：1.jQuery. 2.$.
1、查找元素
由於標籤具備自定義屬性，這樣的話DOM就沒法知足了。html
DOM大約有10種左右。jquery
轉換：jQuery對象[0] ------>Dom對象編程
Dom對象 ---------> $(Dom對象)設計模式
選擇器：
1.直接找到某個或某些元素瀏覽器
1. id app
$('#i1')框架
2.classide
$('.i1')字體
3.標籤
$('a')
4.* 表示全部
5.組合
$('a,.c2,#i3') 同時查找多個標籤
層級選擇器：
$(#i10 a)
先找到id爲i10的標籤，而後再到它的子子孫孫中找到全部的a標籤。
$(#i10>a)
只找兒子
6. 基本
$(#i10>a：first)
:first
:last
:eq()
7. 屬性
$('[alex]') 具備alex屬性的全部標籤
$('[alex="123"]') alex屬性等於123的標籤
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text') 簡寫
實例：全選、反選、取消
- 選擇權
-
$('#tb:checkbox').prop('checked'); 獲取值
$('#tb:checkbox').prop('checked', true); 設置值
-
jQuery方法內置循環： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k當前索引
// this，DOM，當前循環的元素 $(this)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 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 function checkAll() { 44 $('#tb :checkbox').prop('checked',true); 45 } 46 function cancleAll() { 47 $('#tb :checkbox').prop('checked',false); 48 } 49 function reverseAll() { 50 $(':checkbox').each(function(k){ //each循環每一個元素，function中也能夠加參數，是元素的下標 51 // this,代指當前循環的每個元素 52 // Dom實現 53 /* 54 if(this.checked){ 55 this.checked = false; 56 }else{ 57 this.checked = true; 58 } 59 */ 60 /* 61 jQuery方法 62 if($(this).prop('checked')){ 63 $(this).prop('checked', false); 傳兩個參數，表示去修改值，傳一個表示獲取值 64 }else{ 65 $(this).prop('checked', true); 66 } 67 */ 68 // 三元運算var v = 條件? 值1：值2 若是條件是真的，值1就會賦值給v，不然值2就會賦值給v 69 var v = $(this).prop('checked')?false:true; 70 $(this).prop('checked',v); 71 }) 72 } 73 </script> 74 </body> 75 </html>
篩選器：
$(this).prev() 上一個
$(this).next() 下一個
$(this).siblings() 兄弟
$(this).parent() 父
$(this).children 孩子
$(this).find()子子孫孫中查找
$(this).addClass() 添加
$(this).removeClass 刪除
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil() 加until表示找到哪裏爲止
$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)
jQuery支持鏈式編程（jQuery能夠一直篩選下去）。
實例：菜單的伸縮（沒有綁定事件，每一個div都有一個觸發事件）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.12.4.js"></script> 7 <style> 8 .pg-header{ 9 height: 48px; 10 background-color: black; 11 } 12 .pg-body .menu{ 13 width: 20%; 14 float: left; 15 background-color: #d3d3d3; 16 height: 800px; 17 } 18 .pg-body .test{ 19 width: 80%; 20 float: left; 21 } 22 .menu .item .title{ 23 background-color: #297EA8; 24 color: white; 25 height: 40px; 26 } 27 .menu .item{ 28 display: block; 29 } 30 .menu .item .content{ 31 background-color: white; 32 } 33 .menu .item .content a{ 34 display: block; 35 padding: 10px; 36 } 37 .hide{ 38 display: none; 39 } 40 </style> 41 42 43 44 </head> 45 <body> 46 <div id="i1" class="pg-header"></div> 47 <div class="pg-body"> 48 <div class="menu"> 49 <div class="item"> 50 <div class="title" onclick="changeMenu(this);" >菜單1</div> 51 <div class="content"> 52 <a>小彩蛋</a> 53 <a>小彩蛋</a> 54 <a>小彩蛋</a> 55 <a>小彩蛋</a> 56 <a>小彩蛋</a> 57 </div> 58 </div> 59 <div class="item"> 60 <div class="title" onclick="changeMenu(this);">菜單2</div> 61 <div class="content hide"> 62 <a>小彩蛋</a> 63 <a>小彩蛋</a> 64 <a>小彩蛋</a> 65 <a>小彩蛋</a> 66 <a>小彩蛋</a> 67 </div> 68 </div> 69 <div class="item"> 70 <div class="title" onclick="changeMenu(this);">菜單3</div> 71 <div class="content hide"> 72 <a>小彩蛋</a> 73 <a>小彩蛋</a> 74 <a>小彩蛋</a> 75 <a>小彩蛋</a> 76 <a>小彩蛋</a> 77 </div> 78 </div> 79 <div class="item"> 80 <div class="title" onclick="changeMenu(this);">菜單4</div> 81 <div class="content hide"> 82 <a>小彩蛋</a> 83 <a>小彩蛋</a> 84 <a>小彩蛋</a> 85 <a>小彩蛋</a> 86 <a>小彩蛋</a> 87 </div> 88 </div> 89 90 </div> 91 <div class="test"> 92 <input type="button" value="添加" onclick="addAsset();"> 93 <table border="1"> 94 <tr> 95 <td target="#id">1</td> 96 <td target="#host">c1.com</td> 97 <td target="#port">80</td> 98 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 99 <td>查看更多</td> 100 101 </tr> 102 <tr> 103 <td target="#id">2</td> 104 <td target="#host">c2.com</td> 105 <td target="#port">80</td> 106 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 107 <td>查看更多</td> 108 109 </tr> 110 <tr> 111 <td target="#id">3</td> 112 <td target="#host">c3.com</td> 113 <td target="#port">80</td> 114 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 115 <td>查看更多</td> 116 117 </tr> 118 <tr> 119 <td target="#id">4</td> 120 <td target="#host">c4.com</td> 121 <td target="#port">80</td> 122 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 123 <td>查看更多</td> 124 125 </tr> 126 </table> 127 128 129 </div> 130 </div> 131 132 133 <div class="shade hide"></div> 134 <div class="model hide"> 135 <p>序號：<input id="id" type="text" /></p> 136 <p>主機名：<input id="host" type="text" /></p> 137 <p>端口：<input id="port" type="text" /></p> 138 <p> 139 <a onclick="confirmAsset();">肯定</a> <a onclick="cancleAsset();">取消</a> 140 </p> 141 142 </div> 143 <div class="loading hide"></div> 144 <script> 145 function changeMenu(ths) { 146 // console.log(ths); 147 // ths--> DOM的對象 代指當前點擊的菜單標籤(內部封裝僅僅只有DOM的方法) 148 // DOM對象轉換成jquery對象： $(ths) 149 // jQuery對象轉換成DOM對象： $('#i1')[0] 150 // 找到當前ths的下一個標籤，去掉hide樣式 151 // 找到當前ths的父標籤，再找全部的兄弟標籤，內存再找class=content，加上hide 152 $(ths).next().removeClass('hide'); 153 $(ths).parent().siblings().find('.content').addClass('hide'); 154 155 } 156 </script> 157 158 </body> 159 </html>
綁定事件：經過綁定，給全部的div綁定一個事件，經過綁定事件能夠實現內部循環，這樣能夠給同一類的標籤進行操做。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .header{ 8 background-color: black; 9 color: wheat; 10 } 11 .content{ 12 min-height: 50px; 13 } 14 .hide{ 15 display: none; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="height:400px;width: 200px;border: 1px solid #dddddd"> 21 <div class="item"> 22 <div class="header">標題一</div> 23 <div id="i1" class="content hide">內容</div> 24 </div> 25 <div class="item"> 26 <div class="header">標題二</div> 27 <div class="content hide">內容</div> 28 </div> 29 30 <div class="item"> 31 <div class="header">標題三</div> 32 <div class="content hide">內容</div> 33 </div> 34 </div> 35 <script src="jquery-1.12.4.js"></script> 36 <script> 37 $('.header').click(function(){ 38 // 當前點擊的標籤 $(this) 39 // 獲取某個標籤的下一個標籤 40 // 獲取某個標籤的父標籤 41 // 獲取全部的兄弟標籤 42 // 添加樣式和移除樣式 43 // $('.i1').addClass('hide') 44 // $('#i1').removeClass('hide') 45 // var v = $("this + div"); 46 // $("label + input") 47 // console.log(v); 48 // 49 // $("afsldkfja;skjdf;aksdjf") 50 51 // 篩選器 52 /* 53 $(this).next() 下一個 54 $(this).prev() 上一個 55 $(this).parent() 父 56 $(this).children() 孩子 57 $('#i1').siblings() 兄弟 58 $('#i1').find('#i1') 子子孫孫中查找 59 // . . . 60 // 61 $('#i1').addClass(..) 62 $('#i1').removeClass(..) 63 */ 64 65 // 鏈式編程 66 // $(...).click(function(){ 67 // this.. 68 // }) 69 70 71 // $(this).next().removeClass('hide'); 72 // $(this).parent().siblings().find('.content').addClass('hide') 73 74 $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide') 75 76 }) 77 </script> 78 </body> 79 </html>
文本操做：
$().text() text中不寫內容，獲取值，寫內容，修改值。
$().html()
$().val 不寫內容，獲取值，寫內容，設置值。（input）
實例：對錶格進行編輯，點編輯，本行內容出如今文本框中，點取消、或者肯定時，清除髒數據。
經過查找修改
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-left: -250px; 17 margin-top: -250px; 18 background-color: #eeeeee; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 opacity: 0.6; 28 background-color: black; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="addElement();">添加</a> 35 36 <table border="1" id="tb"> 37 <tr> 38 <td target="hostname">1.1.1.11</td> 39 <td target="port">80</td> 40 <td target="ip">80</td> 41 <td> 42 <a class="edit">編輯</a> | <a class="del">刪除</a> 43 </td> 44 </tr> 45 <tr> 46 <td target="hostname">1.1.1.12</td> 47 <td target="port">80</td> 48 <td target="ip">80</td> 49 <td> 50 <a class="edit">編輯</a> | <a class="del">刪除</a> 51 </td> 52 </tr> 53 <tr> 54 <td target="hostname">1.1.1.13</td> 55 <td target="port">80</td> 56 <td target="ip">80</td> 57 <td> 58 <a class="edit">編輯</a> | <a class="del">刪除</a> 59 </td> 60 </tr> 61 <tr> 62 <td target="hostname">1.1.1.14</td> 63 <td target="port">80</td> 64 <td target="ip">80</td> 65 <td> 66 <a class="edit">編輯</a> | <a class="del">刪除</a> 67 </td> 68 69 </tr> 70 </table> 71 72 <div class="modal hide"> 73 <div> 74 <input name="hostname" type="text" /> 75 <input name="port" type="text" /> 76 <input name="ip" type="text" /> 77 </div> 78 79 <div> 80 <input type="button" value="取消" onclick="cancelModal();" /> 81 <input type="button" value="肯定" onclick="confirmModal();" /> 82 </div> 83 </div> 84 85 <div class="shadow hide"></div> 86 87 <script src="jquery-1.12.4.js"></script> 88 <script> 89 90 $('.del').click(function () { 91 $(this).parent().parent().remove(); 92 }); 93 94 function confirmModal() { 95 96 var tr = document.createElement('tr'); 97 var td1 = document.createElement('td'); 98 td1.innerHTML = "11.11.11.11"; 99 var td2 = document.createElement('td'); 100 td2.innerHTML = "8001"; 101 102 $(tr).append(td1); 103 $(tr).append(td2); 104 105 $('#tb').append(tr); 106 107 $(".modal,.shadow").addClass('hide'); 108 // $('.modal input[type="text"]').each(function () { 109 // // var temp = "<td>..." 110 // 111 // 112 // 113 // }) 114 } 115 116 function addElement() { 117 $(".modal,.shadow").removeClass('hide'); 118 } 119 function cancelModal() { 120 $(".modal,.shadow").addClass('hide'); 121 $('.modal input[type="text"]').val(""); 122 } 123 124 $('.edit').click(function(){ 125 $(".modal,.shadow").removeClass('hide'); 126 // this 127 var tds = $(this).parent().prevAll(); 128 tds.each(function () { 129 // 獲取td的target屬性值 130 var n = $(this).attr('target'); 131 // 獲取td中的內容 132 var text = $(this).text(); 133 var a1 = '.modal input[name="'; 134 var a2 = '"]'; 135 var temp = a1 + n + a2; 136 $(temp).val(text); 137 }); 138 139 140 // var port = $(tds[0]).text(); 141 // var host = $(tds[1]).text(); 142 // 143 // $('.modal input[name="hostname"]').val(host); 144 // $('.modal input[name="port"]').val(port); 145 // 循環獲取tds中內容 146 // 獲取 <td>內容</td> 獲取中間的內容 147 // 賦值給input標籤中的value 148 149 }); 150 </script> 151 </body> 152 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.12.4.js"></script> 7 <style> 8 .pg-header{ 9 height: 48px; 10 background-color: black; 11 } 12 .pg-body .menu{ 13 width: 20%; 14 float: left; 15 background-color: #d3d3d3; 16 height: 800px; 17 } 18 .pg-body .test{ 19 width: 80%; 20 float: left; 21 } 22 .menu .item .title{ 23 background-color: #297EA8; 24 color: white; 25 height: 40px; 26 } 27 .menu .item{ 28 display: block; 29 } 30 .menu .item .content{ 31 background-color: white; 32 } 33 .menu .item .content a{ 34 display: block; 35 padding: 10px; 36 } 37 .hide{ 38 display: none; 39 } 40 .shade{ 41 position: fixed; 42 top:0; 43 left: 0; 44 right: 0; 45 bottom: 0; 46 background-color: black; 47 opacity: 0.6; 48 z-index: 100; 49 } 50 .loading{ 51 position: fixed; 52 top:30%; 53 left: 50%; 54 width: 32px; 55 height: 32px; 56 background: url(loader.gif); 57 z-index: 101; 58 } 59 .model{ 60 position: fixed; 61 top:50%; 62 left: 50%; 63 width: 400px; 64 height: 400px; 65 z-index: 101; 66 background-color: white; 67 margin-left: -200px; 68 margin-top: -200px; 69 } 70 </style> 71 72 </head> 73 <body> 74 <div id="i1" class="pg-header"></div> 75 <div class="pg-body"> 76 <div class="menu"> 77 <div class="item"> 78 <div class="title" onclick="changeMenu(this);" >菜單1</div> 79 <div class="content"> 80 <a>小彩蛋</a> 81 <a>小彩蛋</a> 82 <a>小彩蛋</a> 83 <a>小彩蛋</a> 84 <a>小彩蛋</a> 85 </div> 86 </div> 87 <div class="item"> 88 <div class="title" onclick="changeMenu(this);">菜單2</div> 89 <div class="content hide"> 90 <a>小彩蛋</a> 91 <a>小彩蛋</a> 92 <a>小彩蛋</a> 93 <a>小彩蛋</a> 94 <a>小彩蛋</a> 95 </div> 96 </div> 97 <div class="item"> 98 <div class="title" onclick="changeMenu(this);">菜單3</div> 99 <div class="content hide"> 100 <a>小彩蛋</a> 101 <a>小彩蛋</a> 102 <a>小彩蛋</a> 103 <a>小彩蛋</a> 104 <a>小彩蛋</a> 105 </div> 106 </div> 107 <div class="item"> 108 <div class="title" onclick="changeMenu(this);">菜單4</div> 109 <div class="content hide"> 110 <a>小彩蛋</a> 111 <a>小彩蛋</a> 112 <a>小彩蛋</a> 113 <a>小彩蛋</a> 114 <a>小彩蛋</a> 115 </div> 116 </div> 117 118 </div> 119 <div class="test"> 120 <input type="button" value="添加" onclick="addAsset();"> 121 <table border="1"> 122 <tr> 123 <td target="#id">1</td> 124 <td target="#host">c1.com</td> 125 <td target="#port">80</td> 126 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 127 <td>查看更多</td> 128 129 </tr> 130 <tr> 131 <td target="#id">2</td> 132 <td target="#host">c2.com</td> 133 <td target="#port">80</td> 134 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 135 <td>查看更多</td> 136 137 </tr> 138 <tr> 139 <td target="#id">3</td> 140 <td target="#host">c3.com</td> 141 <td target="#port">80</td> 142 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 143 <td>查看更多</td> 144 145 </tr> 146 <tr> 147 <td target="#id">4</td> 148 <td target="#host">c4.com</td> 149 <td target="#port">80</td> 150 <td> <a onclick="editAsset(this);">編輯</a>| <a>刪除</a></td> 151 <td>查看更多</td> 152 153 </tr> 154 </table> 155 156 157 </div> 158 </div> 159 160 161 <div class="shade hide"></div> 162 <div class="model hide"> 163 <p>序號：<input id="id" type="text" /></p> 164 <p>主機名：<input id="host" type="text" /></p> 165 <p>端口：<input id="port" type="text" /></p> 166 <p> 167 <a onclick="confirmAsset();">肯定</a> <a onclick="cancleAsset();">取消</a> 168 </p> 169 170 </div> 171 <div class="loading hide"></div> 172 <script> 173 function changeMenu(ths) { 174 // console.log(ths); 175 // ths--> DOM的對象 代指當前點擊的菜單標籤(內部封裝僅僅只有DOM的方法) 176 // DOM對象轉換成jquery對象： $(ths) 177 // jQuery對象轉換成DOM對象： $('#i1')[0] 178 // 找到當前ths的下一個標籤，去掉hide樣式 179 // 找到當前ths的父標籤，再找全部的兄弟標籤，內存再找class=content，加上hide 180 $(ths).next().removeClass('hide'); 181 $(ths).parent().siblings().find('.content').addClass('hide'); 182 183 } 184 185 function addAsset() { 186 $('.shade,.model').removeClass('hide'); 187 188 } 189 function cancleAsset() { 190 $('.shade,.model').addClass('hide'); 191 $('.model [type="text"]').val(''); 192 } 193 function confirmAsset() { 194 $('.shade,.model').addClass('hide'); 195 $('.shade,.loading').removeClass('hide'); 196 } 197 function editAsset(ths) { 198 $('.shade,.model').removeClass('hide'); 199 //獲取上面的td 200 var $td_list = $(ths).parent().prevAll(); 201 //循環全部的td 202 $td_list.each(function () { 203 //this，當前循環的td（DOM） $(this) 204 var $td = $(this); 205 //獲取標籤內部的文本信息，至關於innerText 206 var text = $td.text(); 207 //獲取標籤自定義屬性的值 208 var v = $td.attr('target');//#port #id #host 209 //$(v)獲取對應的input標籤 210 //$(v).val('df') 對input系列進行賦值 211 $(v).val(text); 212 }) 213 } 214 </script> 215 216 217 </body> 218 </html>
上面一個方法是經過屬性修改值。
樣式操做
addClass、removeClass、toggleClass。經過前兩個可實現內容的隱藏、出現。toggleClass能夠將這兩個功能實現。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 </style> 11 </head> 12 <body> 13 <input type='checkbox' id='i2' /> 14 15 <input id="i1" type="button" value="開關" /> 16 <div class="c1 hide">asdfasdf</div> 17 18 <script src="jquery-1.12.4.js"></script> 19 <script> 20 $('#i1').click(function(){ 21 // if($('.c1').hasClass('hide')){ 22 // $('.c1').removeClass('hide'); 23 // }else{ 24 // $('.c1').addClass('hide'); 25 // } 26 $('.c1').toggleClass('hide'); 27 }) 28 </script> 29 </body> 30 </html>
屬性操做
專門用來作自定義屬性
$().attr() $().removeAttr() 括號中有一個參數時，獲取值，有兩個值是修改
$().prop() 用於爲checkbox、radio作操做
# 專門用於chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
PS:
index 獲取索引位置
上面的查找方法中有此實例。
實例：菜單切換、內容也跟着切換（經過屬性實現）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.12.4.js"></script> 7 <style> 8 .menus{ 9 height: 48px; 10 background-color: #d3d3d3; 11 line-height: 48px; 12 cursor: pointer; //放到菜單選項是變成小手樣式 13 } 14 .menus a{ 15 display: inline-block; 16 border-right: 1px solid #b2b2b5; 17 padding: 0 10px; 18 margin-top: -3px; 19 } 20 .menus a.active{ 21 border-top: 3px solid cadetblue; 22 } 23 .hide{ 24 display: none; 25 } 26 </style> 27 28 </head> 29 <body> 30 <div style="width: 500px;border: 1px solid #b2b2b5;min-height: 300px;"> 31 <div class="menus"> 32 <a class="active" target="i1">菜單1</a> 33 <a target="i2">菜單2</a> 34 <a target="i3">菜單3</a> 35 </div> 36 <div class="contents"> 37 <div nid="i1" class="content">內容一</div> 38 <div nid="i2" class="content hide">內容二</div> 39 <div nid="i3" class="content hide">內容三</div> 40 </div> 41 </div> 42 <script> 43 $('.menus a').click(function () { 44 //this代指當前觸發時間的標籤，DOM對象 45 $(this).addClass('active').siblings().removeClass('active'); 46 var v = $(this).attr('target'); //i1,i2,i3 47 var t = 'div[nid="' + v + '"]'; //div[nid='i1'] 48 $('.contents').find(t).removeClass('hide').siblings().addClass('hide') 49 }) 50 </script> 51 52 53 </body> 54 </html>
經過索引實現
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .menu{ 11 height: 38px; 12 background-color: #eeeeee; 13 line-height: 38px; 14 } 15 .active{ 16 background-color: brown; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: 1px solid red; 21 padding: 0 5px; 22 cursor: pointer; 23 } 24 .content{ 25 min-height: 100px; 26 border: 1px solid #eeeeee; 27 } 28 </style> 29 </head> 30 <body> 31 32 <div style="width: 700px;margin:0 auto"> 33 34 <div class="menu"> 35 <div class="menu-item active" >菜單一</div> 36 <div class="menu-item" >菜單二</div> 37 <div class="menu-item" >菜單三</div> 38 </div> 39 <div class="content"> 40 <div >內容一</div> 41 <div class="hide" >內容二</div> 42 <div class="hide">內容三</div> 43 44 </div> 45 46 </div> 47 <script src="jquery-1.12.4.js"></script> 48 <script> 49 $('.menu-item').click(function(){ 50 $(this).addClass('active').siblings().removeClass('active'); 51 $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); 52 53 }); 54 </script> 55 </body> 56 </html>
文檔處理
以ul爲例，
append 添加最最下面
prepend 添加到最上面
after 添加到ul下
before 添加到ul上
remove 移除內容
empty 移除內容，可是原有的位置還在
clone 複製
實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input id="t1" type="text" /> 9 <input id="a1" type="button" value="添加" /> 10 <input id="a2" type="button" value="刪除" /> 11 <input id="a3" type="button" value="複製" /> 12 13 <ul id="u1"> 14 15 <li>1</li> 16 <li>2</li> 17 18 </ul> 19 <script src="jquery-1.12.4.js"></script> 20 <script> 21 $('#a1').click(function () { 22 var v = $('#t1').val(); 23 24 var temp = "<li>" + v + "</li>"; 25 // $('#u1').append(temp); 26 $('#u1').prepend(temp); 27 // $('#u1').after(temp) 28 // $('#u1').before(temp) 29 }); 30 31 $('#a2').click(function () { 32 var index = $('#t1').val(); 33 //$('#u1 li').eq(index).remove(); 34 //$('#u1 li').eq(index).empty(); 35 }); 36 $('#a3').click(function () { 37 var index = $('#t1').val(); 38 var v = $('#u1 li').eq(index).clone(); 39 $('#u1').append(v); 40 41 42 //$('#u1 li').eq(index).remove(); 43 //$('#u1 li').eq(index).empty(); 44 }) 45 </script> 46 </body> 47 </html>
實例：添加表格內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none; 9 } 10 .modal{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 500px; 15 height: 400px; 16 margin-left: -250px; 17 margin-top: -250px; 18 background-color: #eeeeee; 19 z-index: 10; 20 } 21 .shadow{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 right: 0; 26 bottom: 0; 27 opacity: 0.6; 28 background-color: black; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body> 34 <a onclick="addElement();">添加</a> 35 36 <table border="1" id="tb"> 37 <tr> 38 <td target="hostname">1.1.1.11</td> 39 <td target="port">80</td> 40 <td target="ip">80</td> 41 <td> 42 <a class="edit">編輯</a> | <a class="del">刪除</a> 43 </td> 44 </tr> 45 <tr> 46 <td target="hostname">1.1.1.12</td> 47 <td target="port">80</td> 48 <td target="ip">80</td> 49 <td> 50 <a class="edit">編輯</a> | <a class="del">刪除</a> 51 </td> 52 </tr> 53 <tr> 54 <td target="hostname">1.1.1.13</td> 55 <td target="port">80</td> 56 <td target="ip">80</td> 57 <td> 58 <a class="edit">編輯</a> | <a class="del">刪除</a> 59 </td> 60 </tr> 61 <tr> 62 <td target="hostname">1.1.1.14</td> 63 <td target="port">80</td> 64 <td target="ip">80</td> 65 <td> 66 <a class="edit">編輯</a> | <a class="del">刪除</a> 67 </td> 68 69 </tr> 70 </table> 71 72 <div class="modal hide"> 73 <div> 74 <input name="hostname" type="text" /> 75 <input name="port" type="text" /> 76 <input name="ip" type="text" /> 77 </div> 78 79 <div> 80 <input type="button" value="取消" onclick="cancelModal();" /> 81 <input type="button" value="肯定" onclick="confirmModal();" /> 82 </div> 83 </div> 84 85 <div class="shadow hide"></div> 86 87 <script src="jquery-1.12.4.js"></script> 88 <script> 89 90 $('.del').click(function () { 91 $(this).parent().parent().remove(); 92 }); 93 94 function confirmModal() { 95 96 var tr = document.createElement('tr'); 97 var td1 = document.createElement('td'); 98 td1.innerHTML = "11.11.11.11"; 99 var td2 = document.createElement('td'); 100 td2.innerHTML = "8001"; 101 102 $(tr).append(td1); 103 $(tr).append(td2); 104 105 $('#tb').append(tr); 106 107 $(".modal,.shadow").addClass('hide'); 108 // $('.modal input[type="text"]').each(function () { 109 // // var temp = "<td>..." 110 // 111 // 112 // 113 // }) 114 } 115 116 function addElement() { 117 $(".modal,.shadow").removeClass('hide'); 118 } 119 function cancelModal() { 120 $(".modal,.shadow").addClass('hide'); 121 $('.modal input[type="text"]').val(""); 122 } 123 124 $('.edit').click(function(){ 125 $(".modal,.shadow").removeClass('hide'); 126 // this 127 var tds = $(this).parent().prevAll(); 128 tds.each(function () { 129 // 獲取td的target屬性值 130 var n = $(this).attr('target'); 131 // 獲取td中的內容 132 var text = $(this).text(); 133 var a1 = '.modal input[name="'; 134 var a2 = '"]'; 135 var temp = a1 + n + a2; 136 $(temp).val(text); 137 }); 138 139 140 // var port = $(tds[0]).text(); 141 // var host = $(tds[1]).text(); 142 // 143 // $('.modal input[name="hostname"]').val(host); 144 // $('.modal input[name="port"]').val(port); 145 // 循環獲取tds中內容 146 // 獲取 <td>內容</td> 獲取中間的內容 147 // 賦值給input標籤中的value 148 149 }); 150 </script> 151 </body> 152 </html>
CSS處理
$('t1').css('樣式名稱', '樣式值')
點贊：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字體大小，位置
案例：點贊
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .container{ 8 padding: 50px; 9 border: 1px solid #dddddd; 10 } 11 .item{ 12 position: relative; 13 width: 30px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="item"> 20 <span>贊</span> 21 </div> 22 </div> 23 <div class="container"> 24 <div class="item"> 25 <span>贊</span> 26 </div> 27 </div> 28 <div class="container"> 29 <div class="item"> 30 <span>贊</span> 31 </div> 32 </div> 33 <div class="container"> 34 <div class="item"> 35 <span>贊</span> 36 </div> 37 </div> 38 39 <script src="jquery-1.12.4.js"></script> 40 <script> 41 $('.item').click(function () { 42 AddFavor(this); 43 }); 44 45 function AddFavor(self) { 46 // DOM對象 47 var fontSize = 15; 48 var top = 0; 49 var right = 0; 50 var opacity = 1; 51 52 var tag = document.createElement('span'); 53 $(tag).text('+1'); 54 $(tag).css('color','green'); 55 $(tag).css('position','absolute'); 56 $(tag).css('fontSize',fontSize + "px"); 57 $(tag).css('right',right + "px"); 58 $(tag).css('top',top + 'px'); 59 $(tag).css('opacity',opacity); 60 $(self).append(tag); 61 62 var obj = setInterval(function () { 63 fontSize = fontSize + 10; 64 top = top - 10; 65 right = right - 10; 66 opacity = opacity - 0.1; 67 68 $(tag).css('fontSize',fontSize + "px"); 69 $(tag).css('right',right + "px"); 70 $(tag).css('top',top + 'px'); 71 $(tag).css('opacity',opacity); 72 if(opacity < 0){ 73 clearInterval(obj); 74 $(tag).remove(); 75 } 76 }, 40); 77 78 } 79 </script> 80 81 </body> 82 </html>
位置
$(window).scrollTop() 獲取 作返回頂部
$(window).scrollTop(0) 設置
scrollLeft([val])
offset().left 指定標籤在html中的座標
offset().top 指定標籤在html中的座標
position() 指定標籤相對父標籤(relative)標籤的座標
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
$('i1').height() # 獲取標籤的高度 純高度
$('i1').innerHeight() # 獲取邊框 + 純高度 + ？
$('i1').outerHeight() # 獲取邊框 + 純高度 + ？
$('i1').outerHeight(true) # 獲取邊框 + 純高度 + ？
# 純高度，邊框，外邊距，內邊距
2、操做元素
相關文章
- 1. JQUERY之路一
- 2. Python之路【第十四篇】jQuery、AngularJS
- 3. python學習之路前端-jQuery
- 4. Python之路：Jquery Ajax的使用
- 5. python前端之JQuery
- 6. 【Python之路Day16】前端知識篇之Dom、JQuery
- 7. Python之路【第十二篇】前端之js&dome&jQuery
- 8. python之路
- 9. python之路-01
- 10. python之路七
- 更多相關文章...
- • SQLite - Python - SQLite教程
- • Docker 安裝 Python - Docker教程
- • 適用於PHP初學者的學習線路和建議
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
