當前位置：
首頁 >
Python自动化开发学习的第十一周----WEB基础（jquery）
發布時間：2025/7/25
63
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Python自动化开发学习的第十一周----WEB基础（jquery）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery
jQuery 庫 - 特性
jQuery 是一個 JavaScript 函數庫。
jQuery 極大地簡化了 JavaScript 編程。
jQuery 庫包含以下特性：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
向您的頁面添加 jQuery 庫
1.下載 jQuery??
共有兩個版本的 jQuery 可供下載：一份是精簡過的，另一份是未壓縮的（供調試或閱讀）。
這兩個版本都可從?jQuery.com?下載。
2.jQuery 庫位于一個 JavaScript 文件中，其中包含了所有的 jQuery 函數。
可以通過下面的標記把 jQuery 添加到網頁中：
<head> <script type="text/javascript" src="jquery.js"></script> </head>jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執行對元素的操作
示例
$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。
?
http://www.w3school.com.cn/jquery/index.asp
http://jquery.cuishifeng.cn/
jQuery 選擇器
選擇器允許您對元素組或單個元素進行操作。
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| ? | ? | ? |
| :first | $("p:first") | 第一個 <p> 元素 |
| :last | $("p:last") | 最后一個 <p> 元素 |
| :even | $("tr:even") | 所有偶數 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數 <tr> 元素 |
| ? | ? | ? |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四個元素（index 從 0 開始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不為空的 input 元素 |
| ? | ? | ? |
| :header | $(":header") | 所有標題元素 <h1> - <h6> |
| :animated | ? | 所有動畫元素 |
| ? | ? | ? |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 無子（元素）節點的所有元素 |
| :hidden | $("p:hidden") | 所有隱藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可見的表格 |
| ? | ? | ? |
| s1,s2,s3 | $("th,td,.intro") | 所有帶有匹配選擇的元素 |
| ? | ? | ? |
| [attribute] | $("[href]") | 所有帶有 href 屬性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 屬性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 屬性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 屬性的值包含以 ".jpg" 結尾的元素 |
| ? | ? | ? |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| ? | ? | ? |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被選取的 input 元素 |
| :checked | $(":checked") | 所有被選中的 input 元素 |
實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 10 <input type="button" value="全選" onclick="ChooseAll();" /> 11 <input type="button" value="取消" onclick="CancleAll();" /> 12 <input type="button" value="反選" onclick="ReverseAll();" /> 13 <table border="2"> 14 <thead> 15 <tr> 16 <th>選擇</th> 17 <th>主機名</th> 18 <th>端口號</th> 19 </tr> 20 </thead> 21 <tbody id="tb"> 22 <tr> 23 <td><input type="checkbox"/></td> 24 <td>1.1.1.1</td> 25 <td>1000</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox"/></td> 29 <td>2.2.2.2</td> 30 <td>2000</td> 31 </tr> 32 <tr> 33 <td><input type="checkbox"/></td> 34 <td>3.3.3.3</td> 35 <td>3000</td> 36 </tr> 37 <tr> 38 <td><input type="checkbox"/></td> 39 <td>3.3.3.3</td> 40 <td>3000</td> 41 </tr> 42 <tr> 43 <td><input type="checkbox"/></td> 44 <td>3.3.3.3</td> 45 <td>3000</td> 46 </tr> 47 <tr> 48 <td><input type="checkbox"/></td> 49 <td>3.3.3.3</td> 50 <td>3000</td> 51 </tr> 52 </tbody> 53 </table> 54 55 56 57 <script src="jquery-1.12.4.js"></script> 58 <script> 59 function ChooseAll() { 60 $("#tb :checkbox").prop("checked",true); 61 } 62 function CancleAll() { 63 $("#tb :checkbox").prop("checked",false); 64 } 65 function ReverseAll() { 66 $("#tb :checkbox").each(function () { 67 //DOM 68 /* if(this.checked){ //this指當前循環的每一個元素 69 this.checked = false 70 }else{ 71 this.checked = true 72 }*/ 73 74 //jquery 75 /*if($(this).prop("checked")){ 76 $(this).prop("checked", false); 77 }else{ 78 $(this).prop("checked", true); 79 }*/ 80 81 //三元運算 82 var v = $(this).prop("checked") ? false:true 83 $(this).prop("checked",v) 84 }) 85 } 86 </script> 87 88 89 90 </body> 91 </html> 全選-取消-反選 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .item{ 8 width: 200px; 9 border: 1px solid #888888; 10 } 11 .header{ 12 background-color: #0d8ddb; 13 width: 200px; 14 } 15 .hide{ 16 display: none; 17 } 18 19 </style> 20 </head> 21 <body> 22 <div class="item"> 23 <div class="header">菜單1</div> 24 <div class="content"> 25 <div>內容1</div> 26 <div>內容1</div> 27 <div>內容1</div> 28 <div>內容1</div> 29 </div> 30 </div> 31 <div class="item"> 32 <div class="header">菜單2</div> 33 <div class="content hide"> 34 <div>內容1</div> 35 <div>內容1</div> 36 <div>內容1</div> 37 <div>內容1</div> 38 </div> 39 </div> 40 <div class="item"> 41 <div class="header">菜單3</div> 42 <div class="content hide"> 43 <div>內容1</div> 44 <div>內容1</div> 45 <div>內容1</div> 46 <div>內容1</div> 47 </div> 48 </div> 49 <div class="item"> 50 <div class="header">菜單4</div> 51 <div class="content hide"> 52 <div>內容1</div> 53 <div>內容1</div> 54 <div>內容1</div> 55 <div>內容1</div> 56 </div> 57 </div> 58 <div class="item"> 59 <div class="header">菜單5</div> 60 <div class="content hide"> 61 <div>內容1</div> 62 <div>內容1</div> 63 <div>內容1</div> 64 <div>內容1</div> 65 </div> 66 </div> 67 68 <script src="jquery-1.12.4.js"></script> 69 <script> 70 $(".header").click(function () { 71 // $(this).next().removeClass("hide"); 72 // $(this).parent().siblings().find(".content").addClass("hide"); 73 $(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide"); 74 }) 75 </script> 76 77 </body> 78 </html> 左側菜單?
jQuery 事件方法
事件方法會觸發匹配元素的事件，或將函數綁定到所有匹配元素的某個事件。
觸發實例：
$("button#demo").click()上面的例子將觸發 id="demo" 的 button 元素的 click 事件。
綁定實例：
$("button#demo").click(function(){$("img").hide()})?上面的例子會在點擊 id="demo" 的按鈕時隱藏所有圖像。
事件的綁定方式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div class="c1"><div class="c2">123</div></div><script src="jquery-1.12.4.js"></script><script>/*//第一種綁定$(".c1").click(function () {alert(123);})*//*//第二種綁定$(".c1").bind("click",function () {alert(123);});$(".c1").unbind("click",function () {alert(123);})*//*//第三種綁定$(".c1").on("click",function () {alert(123);});$(".c1").off("click",function () {alert(123);});*///第四種綁定 這種綁定可以為添加的新標簽綁定事件$(".c1").delegate(".c2","click",function () {alert(123);} );$(".c1").undelegate(".c2","click",function () {alert(123);} )</script></body> </html>?事件阻止方式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a οnclick=" return Click();" href="http://www.baidu.com">百度</a><a id="i1" οnclick="Click();" href="http://www.baidu.com">百度</a><script src="jquery-1.12.4.js"></script><script>function Click() {alert(123);return false;}$("#i1").click(function () {alert(123);return false;})</script> </body> </html>?
| bind() | 向匹配元素附加一個或更多事件處理器 |
| blur() | 觸發、或將函數綁定到指定元素的 blur 事件 |
| change() | 觸發、或將函數綁定到指定元素的 change 事件 |
| click() | 觸發、或將函數綁定到指定元素的 click 事件 |
| dblclick() | 觸發、或將函數綁定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
| die() | 移除所有通過 live() 函數添加的事件處理程序。 |
| error() | 觸發、或將函數綁定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 對象上是否調用了 event.preventDefault()。 |
| event.pageX | 相對于文檔左邊緣的鼠標位置。 |
| event.pageY | 相對于文檔上邊緣的鼠標位置。 |
| event.preventDefault() | 阻止事件的默認動作。 |
| event.result | 包含由被指定事件觸發的事件處理器返回的最后一個值。 |
| event.target | 觸發該事件的 DOM 元素。 |
| event.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
| event.type | 描述事件的類型。 |
| event.which | 指示按了哪個鍵或按鈕。 |
| focus() | 觸發、或將函數綁定到指定元素的 focus 事件 |
| keydown() | 觸發、或將函數綁定到指定元素的 key down 事件 |
| keypress() | 觸發、或將函數綁定到指定元素的 key press 事件 |
| keyup() | 觸發、或將函數綁定到指定元素的 key up 事件 |
| live() | 為當前或未來的匹配元素添加一個或多個事件處理器 |
| load() | 觸發、或將函數綁定到指定元素的 load 事件 |
| mousedown() | 觸發、或將函數綁定到指定元素的 mouse down 事件 |
| mouseenter() | 觸發、或將函數綁定到指定元素的 mouse enter 事件 |
| mouseleave() | 觸發、或將函數綁定到指定元素的 mouse leave 事件 |
| mousemove() | 觸發、或將函數綁定到指定元素的 mouse move 事件 |
| mouseout() | 觸發、或將函數綁定到指定元素的 mouse out 事件 |
| mouseover() | 觸發、或將函數綁定到指定元素的 mouse over 事件 |
| mouseup() | 觸發、或將函數綁定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。 |
| ready() | 文檔就緒事件（當 HTML 文檔就緒可用時） |
| resize() | 觸發、或將函數綁定到指定元素的 resize 事件 |
| scroll() | 觸發、或將函數綁定到指定元素的 scroll 事件 |
| select() | 觸發、或將函數綁定到指定元素的 select 事件 |
| submit() | 觸發、或將函數綁定到指定元素的 submit 事件 |
| toggle() | 綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一個被匹配元素的指定事件 |
| unbind() | 從匹配元素移除一個被添加的事件處理器 |
| undelegate() | 從匹配元素移除一個被添加的事件處理器，現在或將來 |
| unload() | 觸發、或將函數綁定到指定元素的 unload 事件 |
實例：
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: 40px; 12 background-color: #888888; 13 line-height: 40px; 14 } 15 .active{ 16 background-color: green; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: #1AB394 1px solid; 21 padding: 0 5px; 22 cursor: pointer; //鼠標變成小手 23 } 24 .content{ 25 min-height: 400px; 26 border: #2b542c 1px solid; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin: 0 auto;"> 32 <div class="menu"> 33 <div class="menu-item active" a="1">菜單一</div> 34 <div class="menu-item" a="2">菜單二</div> 35 <div class="menu-item" a="3">菜單三</div> 36 </div> 37 <div class="content"> 38 <div b="1">內容1內容1內容1內容1內容1內容1內容1</div> 39 <div class="hide" b="2">內容2內容2內容2內容2內容2內容2內容2</div> 40 <div class="hide" b="3">內容3內容3內容3內容3內容3內容3內容3</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $(".menu-item").click(function () { 46 $(this).addClass("active").siblings().removeClass("active"); 47 var tar = $(this).attr("a"); 48 $(".content").children('[b="'+tar+'"]').removeClass("hide").siblings().addClass("hide"); 49 }) 50 </script> 51 52 </body> 53 </html> tab切換菜單?
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: 40px; 12 background-color: #888888; 13 line-height: 40px; 14 } 15 .active{ 16 background-color: green; 17 } 18 .menu .menu-item{ 19 float: left; 20 border-right: #1AB394 1px solid; 21 padding: 0 5px; 22 cursor: pointer; //鼠標變成小手 23 } 24 .content{ 25 min-height: 400px; 26 border: #2b542c 1px solid; 27 } 28 </style> 29 </head> 30 <body> 31 <div style="width: 700px;margin: 0 auto;"> 32 <div class="menu"> 33 <div class="menu-item active" >菜單一</div> 34 <div class="menu-item" >菜單二</div> 35 <div class="menu-item" >菜單三</div> 36 </div> 37 <div class="content"> 38 <div >內容1內容1內容1內容1內容1內容1內容1</div> 39 <div class="hide" >內容2內容2內容2內容2內容2內容2內容2</div> 40 <div class="hide" >內容3內容3內容3內容3內容3內容3內容3</div> 41 </div> 42 </div> 43 <script src="jquery-1.12.4.js"></script> 44 <script> 45 $(".menu-item").click(function () { 46 $(this).addClass("active").siblings().removeClass("active"); 47 var tar = $(this).index(); 48 $(".content").children().eq(tar).removeClass("hide").siblings().addClass("hide"); 49 50 }) 51 </script> 52 53 </body> 54 </html> tab切換菜單2?
jQuery 效果
隱藏、顯示、切換，滑動，淡入淡出，以及動畫，哇哦！
| animate() | 對被選元素應用“自定義”的動畫 |
| clearQueue() | 對被選元素移除所有排隊的函數（仍未運行的） |
| delay() | 對被選元素的所有排隊函數（仍未運行）設置延遲 |
| dequeue() | 運行被選元素的下一個排隊函數 |
| fadeIn() | 逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| hide() | 隱藏被選的元素 |
| queue() | 顯示被選元素的排隊函數 |
| show() | 顯示被選的元素 |
| slideDown() | 通過調整高度來滑動顯示被選元素 |
| slideToggle() | 對被選元素進行滑動隱藏和滑動顯示的切換 |
| slideUp() | 通過調整高度來滑動隱藏被選元素 |
| stop() | 停止在被選元素上運行動畫 |
| toggle() | 對被選元素進行隱藏和顯示的切換 |
jQuery 文檔操作方法
這些方法對于 XML 文檔和 HTML 文檔均是適用的，除了：html()。
| addClass() | 向匹配的元素添加指定的類名。 |
| after() | 在匹配的元素之后插入內容。 |
| append() | 向匹配元素集合中的每個元素結尾插入由參數指定的內容。 |
| appendTo() | 向目標結尾插入匹配元素集合中的每個元素。 |
| attr() | 設置或返回匹配元素的屬性和值。 |
| before() | 在每個匹配的元素之前插入內容。 |
| clone() | 創建匹配元素集合的副本。 |
| detach() | 從 DOM 中移除匹配元素集合。 |
| empty() | 刪除匹配的元素集合中所有的子節點。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設置或返回匹配的元素集合中的 HTML 內容。 |
| insertAfter() | 把匹配的元素插入到另一個指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一個指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每個元素開頭插入由參數指定的內容。 |
| prependTo() | 向目標開頭插入匹配元素集合中的每個元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性。 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類。 |
| replaceAll() | 用匹配的元素替換所有匹配到的元素。 |
| replaceWith() | 用新內容替換匹配的元素。 |
| text() | 設置或返回匹配元素的內容。 |
| toggleClass() | 從匹配的元素中添加或刪除一個類。 |
| unwrap() | 移除并替換指定元素的父元素。 |
| val() | 設置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的內容或元素包裹起來。 |
| wrapAll() | 把所有匹配的元素用指定的內容或元素包裹起來。 |
| wrapinner() | 將每一個匹配的元素的子內容用指定的內容或元素包裹起來。 |
?
jQuery 屬性操作方法
下面列出的這些方法獲得或設置元素的 DOM 屬性。
這些方法對于 XML 文檔和 HTML 文檔均是適用的，除了：html()。
| addClass() | 向匹配的元素添加指定的類名。 |
| attr() | 設置或返回匹配元素的屬性和值。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設置或返回匹配的元素集合中的 HTML 內容。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性。 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類。 |
| toggleClass() | 從匹配的元素中添加或刪除一個類。 |
| val() | 設置或返回匹配元素的值。 |
?實例：
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 .ed1{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 400px; 15 height: 400px; 16 margin-top: -200px; 17 margin-left: -200px; 18 background-color: white; 19 z-index: 10; 20 } 21 .shade{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 bottom: 0; 26 right: 0; 27 background-color: black; 28 opacity: 0.6; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body style="margin: 0"> 34 35 <input type="button" value="添加" onclick="addModel();"/> 36 <table border="1"> 37 <thead> 38 <tr> 39 <th>主機IP</th> 40 <th>端口號</th> 41 <th>編輯屬性</th> 42 </tr> 43 </thead> 44 <tbody> 45 <tr> 46 <td>1.1.1.1</td> 47 <td>111</td> 48 <td><a class="edit">編輯</a><a>取消</a></td> 49 </tr> 50 <tr> 51 <td>2.2.2.2</td> 52 <td>222</td> 53 <td><a class="edit">編輯</a><a>取消</a></td> 54 </tr> 55 <tr> 56 <td>3.3.3.3</td> 57 <td>333</td> 58 <td><a class="edit">編輯</a><a>取消</a></td> 59 </tr> 60 <tr> 61 <td>4.4.4.4</td> 62 <td>444</td> 63 <td><a class="edit">編輯</a><a>取消</a></td> 64 </tr> 65 66 </tbody> 67 </table> 68 69 <!--遮罩層開始--> 70 <div class="shade hide"></div> 71 <!--遮罩層結束--> 72 73 <!--編輯框開始--> 74 <div class="ed1 hide"> 75 76 <p><input name="host" type="text" /></p> 77 <p><input name="port" type="text" /></p> 78 79 <p><input type="button" value="取消" onclick="hideModel()"/> 80 <input type="button" value="確定"/></p> 81 82 </div> 83 <!--編輯框結束--> 84 85 86 <script src="jquery-1.12.4.js"></script> 87 <script> 88 function addModel() { 89 $(".shade,.ed1").removeClass("hide"); 90 91 } 92 function hideModel() { 93 $(".shade,.ed1").addClass("hide"); 94 $(".ed1 input[type='text']").val(""); 95 } 96 97 $(".edit").click(function () { 98 $(".shade,.ed1").removeClass("hide"); 99 100 var tds = $(this).parent().prevAll(); 101 var host =$(tds[1]).text(); 102 var port =$(tds[0]).text(); 103 104 $(".ed1 input[name='host']").val(host); 105 $(".ed1 input[name='port']").val(port); 106 107 }) 108 109 </script> 110 111 </body> 112 </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 .ed1{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 400px; 15 height: 400px; 16 margin-top: -200px; 17 margin-left: -200px; 18 background-color: white; 19 z-index: 10; 20 } 21 .shade{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 bottom: 0; 26 right: 0; 27 background-color: black; 28 opacity: 0.6; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body style="margin: 0"> 34 35 <input type="button" value="添加" onclick="addModel();"/> 36 <table border="1"> 37 <thead> 38 <tr> 39 <th>主機IP</th> 40 <th>端口號</th> 41 <th>編輯屬性</th> 42 </tr> 43 </thead> 44 <tbody> 45 <tr> 46 <td target="host">1.1.1.1</td> 47 <td target="port">111</td> 48 <td target="ip">1111</td> 49 <td><a class="edit">編輯</a><a>取消</a></td> 50 </tr> 51 <tr> 52 <td target="host">2.2.2.2</td> 53 <td target="port">222</td> 54 <td target="ip">2222</td> 55 <td><a class="edit">編輯</a><a>取消</a></td> 56 </tr> 57 <tr> 58 <td target="host">3.3.3.3</td> 59 <td target="port">333</td> 60 <td target="ip">3333</td> 61 <td><a class="edit">編輯</a><a>取消</a></td> 62 </tr> 63 <tr> 64 <td target="host">4.4.4.4</td> 65 <td target="port">444</td> 66 <td target="ip">4444</td> 67 <td><a class="edit">編輯</a><a>取消</a></td> 68 </tr> 69 70 </tbody> 71 </table> 72 73 <!--遮罩層開始--> 74 <div class="shade hide"></div> 75 <!--遮罩層結束--> 76 77 <!--編輯框開始--> 78 <div class="ed1 hide"> 79 80 <p><input name="host" type="text" /></p> 81 <p><input name="port" type="text" /></p> 82 <p><input name="ip" type="password" /></p> 83 84 <p><input type="button" value="取消" onclick="hideModel()"/> 85 <input type="button" value="確定"/></p> 86 87 </div> 88 <!--編輯框結束--> 89 90 91 <script src="jquery-1.12.4.js"></script> 92 <script> 93 function addModel() { 94 $(".shade,.ed1").removeClass("hide"); 95 96 } 97 function hideModel() { 98 $(".shade,.ed1").addClass("hide"); 99 $(".ed1 input[type='text']").val(""); 100 } 101 102 $(".edit").click(function () { 103 $(".shade,.ed1").removeClass("hide"); 104 105 var tds = $(this).parent().prevAll(); 106 tds.each(function () { 107 var n = $(this).attr("target"); 108 var text = $(this).text(); 109 var a1=".ed1 input[name='"; 110 var a2 = "']"; 111 112 $(a1+n+a2).val(text); 113 114 }) 115 116 117 118 }) 119 120 </script> 121 122 </body> 123 </html> 模態對話框3 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 .ed1{ 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 width: 400px; 15 height: 400px; 16 margin-top: -200px; 17 margin-left: -200px; 18 background-color: white; 19 z-index: 10; 20 } 21 .shade{ 22 position: fixed; 23 top: 0; 24 left: 0; 25 bottom: 0; 26 right: 0; 27 background-color: black; 28 opacity: 0.6; 29 z-index: 9; 30 } 31 </style> 32 </head> 33 <body style="margin: 0"> 34 35 <input type="button" value="添加" onclick="addModel();"/> 36 <table border="1" id="tb"> 37 <thead> 38 <tr> 39 <th>主機IP</th> 40 <th>端口號</th> 41 <th>編輯屬性</th> 42 </tr> 43 </thead> 44 <tbody> 45 <tr> 46 <td target="host">1.1.1.1</td> 47 <td target="port">111</td> 48 <td target="ip">1111</td> 49 <td><a class="edit">編輯</a>|<a class="del">取消</a></td> 50 </tr> 51 <tr> 52 <td target="host">2.2.2.2</td> 53 <td target="port">222</td> 54 <td target="ip">2222</td> 55 <td><a class="edit">編輯</a>|<a class="del">取消</a></td> 56 </tr> 57 <tr> 58 <td target="host">3.3.3.3</td> 59 <td target="port">333</td> 60 <td target="ip">3333</td> 61 <td><a class="edit">編輯</a>|<a class="del">取消</a></td> 62 </tr> 63 <tr> 64 <td target="host">4.4.4.4</td> 65 <td target="port">444</td> 66 <td target="ip">4444</td> 67 <td><a class="edit">編輯</a>|<a class="del">取消</a></td> 68 </tr> 69 70 </tbody> 71 </table> 72 73 <!--遮罩層開始--> 74 <div class="shade hide"></div> 75 <!--遮罩層結束--> 76 77 <!--編輯框開始--> 78 <div class="ed1 hide"> 79 80 <p><input name="host" type="text" /></p> 81 <p><input name="port" type="text" /></p> 82 <p><input name="ip" type="password" /></p> 83 84 <p><input type="button" value="取消" onclick="hideModel();"/> 85 <input type="button" value="確定" onclick="confirmModel();"/></p> 86 87 </div> 88 <!--編輯框結束--> 89 90 91 <script src="jquery-1.12.4.js"></script> 92 <script> 93 $(".del").click(function () { 94 $(this).parent().parent().remove(); 95 }); 96 97 function confirmModel() { 98 var tr = document.createElement("tr"); 99 var td1 = document.createElement("td"); 100 var t1 = $(".ed1 input[name='host']").val(); 101 $(tr).append($(td1).append(t1)); 102 var td2 = document.createElement("td"); 103 var t2 = $(".ed1 input[name='port']").val(); 104 $(tr).append($(td2).append(t2)); 105 var td3 = document.createElement("td"); 106 var t3 = $(".ed1 input[name='ip']").val(); 107 $(tr).append($(td3).append(t3)); 108 var td4 = document.createElement("td"); 109 var a1="<a class='edit'>編輯</a>|<a class='del'>取消</a>"; 110 $(tr).append($(td4).append(a1)); 111 112 $("#tb").append(tr); 113 $(".shade,.ed1").addClass("hide"); 114 } 115 116 function addModel() { 117 $(".shade,.ed1").removeClass("hide"); 118 119 } 120 function hideModel() { 121 $(".shade,.ed1").addClass("hide"); 122 $(".ed1 input[type='text']").val(""); 123 } 124 125 $(".edit").click(function () { 126 $(".shade,.ed1").removeClass("hide"); 127 128 var tds = $(this).parent().prevAll(); 129 tds.each(function () { 130 var n = $(this).attr("target"); 131 var text = $(this).text(); 132 var a1=".ed1 input[name='"; 133 var a2 = "']"; 134 135 $(a1+n+a2).val(text); 136 137 }) 138 139 140 141 }) 142 143 </script> 144 145 </body> 146 </html> 模態對話框4?
?
jQuery CSS 操作函數
下面列出的這些方法設置或返回元素的 CSS 相關屬性。
| css() | 設置或返回匹配元素的樣式屬性。 |
| height() | 設置或返回匹配元素的高度。（純高度） |
| innerHight（） | 設置或返回匹配元素的純高度+外邊距（margin） |
| outerHeight（） | 設置或返回匹配元素的純高度+外邊距（margin）+邊框（border） |
| outerHeight（true） | 設置或返回匹配元素的純高度+外邊距（margin）+邊框（border）+內邊距（padding） |
| offset() | 返回第一個匹配元素相對于文檔的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一個匹配元素相對于父元素的位置。 |
| scrollLeft() | 設置或返回匹配元素相對滾動條左側的偏移。 |
| scrollTop() | 設置或返回匹配元素相對滾動條頂部的偏移。 |
| width() | 設置或返回匹配元素的寬度。 |
?實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .content{ 8 width: 980px; 9 margin: 0 auto; 10 padding: 50px; 11 border-bottom: #888888 1px solid; 12 } 13 .item{ 14 position: relative; 15 width: 60px; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="content"> 21 <div class="item"> 22 <span>點贊</span> 23 </div> 24 </div> 25 <div class="content"> 26 <div class="item"> 27 <span>點贊</span> 28 </div> 29 </div> 30 <div class="content"> 31 <div class="item"> 32 <span>點贊</span> 33 </div> 34 </div> 35 <div class="content"> 36 <div class="item"> 37 <span>點贊</span> 38 </div> 39 </div> 40 41 <script src="jquery-1.12.4.js"></script> 42 <script> 43 $(".item").click(function () { 44 var fontSize = 15; 45 var top = 0; 46 var right = 0; 47 var opacity = 1; 48 49 var tag = document.createElement("span"); 50 $(tag).text("+1"); 51 $(tag).css("color","green"); 52 $(tag).css("position","absolute"); 53 $(tag).css("fontSize",fontSize+"px"); 54 $(tag).css("top",top+"px"); 55 $(tag).css("right",right+"px"); 56 $(tag).css("opacity",opacity); 57 $(this).append(tag); 58 59 var obj = setInterval(function () { 60 fontSize = fontSize + 5; 61 top = top -5; 62 right = right - 5; 63 opacity = opacity - 0.1; 64 65 $(tag).css("fontSize",fontSize+"px"); 66 $(tag).css("top",top+"px"); 67 $(tag).css("right",right+"px"); 68 $(tag).css("opacity",opacity); 69 70 if(opacity <0){ 71 clearInterval(obj); 72 $(tag).remove(); 73 } 74 75 },100); 76 77 }) 78 </script> 79 </body> 80 </html> 點贊?
?
jQuery Ajax 操作函數
jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數和方法允許我們在不刷新瀏覽器的情況下從服務器加載數據。
| jQuery.ajax() | 執行異步 HTTP (Ajax) 請求。 |
| .ajaxComplete() | 當 Ajax 請求完成時注冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxError() | 當 Ajax 請求完成且出現錯誤時注冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 請求發送之前顯示一條消息。 |
| jQuery.ajaxSetup() | 設置將來的 Ajax 請求的默認值。 |
| .ajaxStart() | 當首個 Ajax 請求完成開始時注冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxStop() | 當所有 Ajax 請求完成時注冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxSuccess() | 當 Ajax 請求成功完成時顯示一條消息。 |
| jQuery.get() | 使用 HTTP GET 請求從服務器加載數據。 |
| jQuery.getJSON() | 使用 HTTP GET 請求從服務器加載 JSON 編碼數據。 |
| jQuery.getScript() | 使用 HTTP GET 請求從服務器加載 JavaScript 文件，然后執行該文件。 |
| .load() | 從服務器加載數據，然后把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 創建數組或對象的序列化表示，適合在 URL 查詢字符串或 Ajax 請求中使用。 |
| jQuery.post() | 使用 HTTP POST 請求從服務器加載數據。 |
| .serialize() | 將表單內容序列化為字符串。 |
| .serializeArray() | 序列化表單元素，返回 JSON 數據結構數據。 |
?
?
jQuery 遍歷函數
jQuery 遍歷函數包括了用于篩選、查找和串聯元素的方法。
| .add() | 將元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆棧中之前的元素集添加到當前集合中。 |
| .children() | 獲得匹配元素集合中每個元素的所有子元素。 |
| .closest() | 從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。 |
| .contents() | 獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。 |
| .each() | 對 jQuery 對象進行迭代，為每個匹配元素執行函數。 |
| .end() | 結束當前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態。 |
| .eq() | 將匹配元素集合縮減為位于指定索引的新元素。 |
| .filter() | 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。 |
| .find() | 獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。 |
| .first() | 將匹配元素集合縮減為集合中的第一個元素。 |
| .has() | 將匹配元素集合縮減為包含特定元素的后代的集合。 |
| .is() | 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 |
| .last() | 將匹配元素集合縮減為集合中的最后一個元素。 |
| .map() | 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 |
| .next() | 獲得匹配元素集合中每個元素緊鄰的同輩元素。 |
| .nextAll() | 獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。 |
| .nextUntil() | 獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .not() | 從匹配元素集合中刪除元素。 |
| .offsetParent() | 獲得用于定位的第一個父元素。 |
| .parent() | 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 |
| .parents() | 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 |
| .parentsUntil() | 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
| .prev() | 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 |
| .prevAll() | 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 |
| .prevUntil() | 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .siblings() | 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
| .slice() | 將匹配元素集合縮減為指定范圍的子集。 |
?
jQuery 數據操作函數
這些方法允許我們將指定的 DOM 元素與任意數據相關聯。
| .clearQueue() | 從隊列中刪除所有未運行的項目。 |
| .data() | 存儲與匹配元素相關的任意數據。 |
| jQuery.data() | 存儲與指定元素相關的任意數據。 |
| .dequeue() | 從隊列最前端移除一個隊列函數，并執行它。 |
| jQuery.dequeue() | 從隊列最前端移除一個隊列函數，并執行它。 |
| jQuery.hasData() | 存儲與匹配元素相關的任意數據。 |
| .queue() | 顯示或操作匹配元素所執行函數的隊列。 |
| jQuery.queue() | 顯示或操作匹配元素所執行函數的隊列。 |
| .removeData() | 移除之前存放的數據。 |
| jQuery.removeData() | 移除之前存放的數據。 |
jQuery DOM 元素方法
| .get() | 獲得由選擇器指定的 DOM 元素。 |
| .index() | 返回指定元素相對于其他指定元素的 index 位置。 |
| .size() | 返回被 jQuery 選擇器匹配的元素的數量。 |
| .toArray() | 以數組的形式返回 jQuery 選擇器匹配的元素。 |
jQuery 核心函數
| jQuery() | 接受一個字符串，其中包含了用于匹配元素集合的 CSS 選擇器。 |
| jQuery.noConflict() | 運行這個函數將變量 $ 的控制權讓渡給第一個實現它的那個庫。 |
?
jQuery 屬性
下面列出的這些方法設置或返回元素的 CSS 相關屬性。
| context | 在版本 1.10 中被棄用。包含傳遞給 jQuery() 的原始上下文。 |
| jquery | 包含 jQuery 版本號。 |
| jQuery.fx.interval | 改變以毫秒計的動畫速率。 |
| jQuery.fx.off | 全局禁用/啟用所有動畫。 |
| jQuery.support | 表示不同瀏覽器特性或漏洞的屬性集合（用于 jQuery 內部使用）。 |
| length | 包含 jQuery 對象中的元素數目。 |
?
jQuery擴展
?1.前面的jquery寫完是當頁面全部加載完后，才執行的，如果有頁面沒有加載完，那么就不會執行下面的jquery；
所以? 當頁面框架加載完畢后，自動執行的方法：
$(function(){$(...)})?2.設置自定義的jquery屬性的方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script src="jquery-1.12.4.js"></script><script>$.extend({'namess':function () {return 'sb';}});var v =$.namess();alert(v);// $.fn.extend({// "namess":function () {// return "db";// }// });// var v =$("#i1").namess();// alert(v);</script></body> </html>?如果在設置自定義屬性時，有全局變量出現，為了避免和其他的自定義屬性的變量名一樣，那么就需要把變量放入自執行函數里面
(function(){var status = 1;// 封裝變量})(jQuery)?實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .error{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 14 <form action="t1.html" method="get" id="f1"> 15 <div><input type="text" /></div> 16 <div><input type="password" /></div> 17 <div><input type="text" /></div> 18 <div><input type="text" /></div> 19 20 <input type="submit" value="提交" /> 21 </form> 22 23 <script src="jquery-1.12.4.js"></script> 24 <script> 25 $(":submit").click(function () { 26 $(".error").remove(); 27 var flag=true; 28 29 $("#f1").find("input[type='text'],input[type='password']").each(function () { 30 var v =$(this).val(); 31 if(v.length<=0){ 32 flag=false; 33 var tag =document.createElement("span"); 34 tag.className ="error"; 35 tag.innerHTML="必填"; 36 $(this).after(tag); 37 } 38 }); 39 40 return flag; 41 }) 42 43 </script> 44 </body> 45 </html> 表單?
?
****************************** To? Be Continue ****************************************
?
轉載于:https://www.cnblogs.com/garrett0220/p/8631170.html
總結
以上是生活随笔為你收集整理的Python自动化开发学习的第十一周----WEB基础（jquery）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 逐行读取文件示例
- 下一篇： Micropython TPYBoard