Python自动化开发学习的第十一周----WEB基础（jquery）
生活随笔
收集整理的這篇文章主要介紹了
Python自动化开发学习的第十一周----WEB基础（jquery）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery
jQuery 庫 - 特性
jQuery 是一個(gè) JavaScript 函數(shù)庫。
jQuery 極大地簡(jiǎn)化了 JavaScript 編程。
jQuery 庫包含以下特性：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數(shù)
- JavaScript 特效和動(dòng)畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
向您的頁面添加 jQuery 庫
1.下載 jQuery??
共有兩個(gè)版本的 jQuery 可供下載：一份是精簡(jiǎn)過的，另一份是未壓縮的（供調(diào)試或閱讀）。
這兩個(gè)版本都可從?jQuery.com?下載。
2.jQuery 庫位于一個(gè) JavaScript 文件中，其中包含了所有的 jQuery 函數(shù)。
可以通過下面的標(biāo)記把 jQuery 添加到網(wǎng)頁中：
<head> <script type="text/javascript" src="jquery.js"></script> </head>jQuery 語法
jQuery 語法是為 HTML 元素的選取編制的，可以對(duì)元素執(zhí)行某些操作。
基礎(chǔ)語法是：$(selector).action()
- 美元符號(hào)定義 jQuery
- 選擇符（selector）“查詢”和“查找” HTML 元素
- jQuery 的 action() 執(zhí)行對(duì)元素的操作
示例
$(this).hide() - 隱藏當(dāng)前元素
$("p").hide() - 隱藏所有段落
$(".test").hide() - 隱藏所有 class="test" 的所有元素
$("#test").hide() - 隱藏所有 id="test" 的元素
提示：jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節(jié)，您將學(xué)習(xí)到更多有關(guān)選擇器的語法。
?
http://www.w3school.com.cn/jquery/index.asp
http://jquery.cuishifeng.cn/
jQuery 選擇器
選擇器允許您對(duì)元素組或單個(gè)元素進(jìn)行操作。
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| ? | ? | ? |
| :first | $("p:first") | 第一個(gè) <p> 元素 |
| :last | $("p:last") | 最后一個(gè) <p> 元素 |
| :even | $("tr:even") | 所有偶數(shù) <tr> 元素 |
| :odd | $("tr:odd") | 所有奇數(shù) <tr> 元素 |
| ? | ? | ? |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四個(gè)元素（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") | 所有標(biāo)題元素 <h1> - <h6> |
| :animated | ? | 所有動(dòng)畫元素 |
| ? | ? | ? |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 無子（元素）節(jié)點(diǎn)的所有元素 |
| :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" 結(jié)尾的元素 |
| ? | ? | ? |
| :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 元素 |
實(shí)例：
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>主機(jī)名</th> 18 <th>端口號(hào)</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指當(dāng)前循環(huán)的每一個(gè)元素 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 //三元運(yùn)算 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>內(nèi)容1</div> 26 <div>內(nèi)容1</div> 27 <div>內(nèi)容1</div> 28 <div>內(nèi)容1</div> 29 </div> 30 </div> 31 <div class="item"> 32 <div class="header">菜單2</div> 33 <div class="content hide"> 34 <div>內(nèi)容1</div> 35 <div>內(nèi)容1</div> 36 <div>內(nèi)容1</div> 37 <div>內(nèi)容1</div> 38 </div> 39 </div> 40 <div class="item"> 41 <div class="header">菜單3</div> 42 <div class="content hide"> 43 <div>內(nèi)容1</div> 44 <div>內(nèi)容1</div> 45 <div>內(nèi)容1</div> 46 <div>內(nèi)容1</div> 47 </div> 48 </div> 49 <div class="item"> 50 <div class="header">菜單4</div> 51 <div class="content hide"> 52 <div>內(nèi)容1</div> 53 <div>內(nèi)容1</div> 54 <div>內(nèi)容1</div> 55 <div>內(nèi)容1</div> 56 </div> 57 </div> 58 <div class="item"> 59 <div class="header">菜單5</div> 60 <div class="content hide"> 61 <div>內(nèi)容1</div> 62 <div>內(nèi)容1</div> 63 <div>內(nèi)容1</div> 64 <div>內(nèi)容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> 左側(cè)菜單?
jQuery 事件方法
事件方法會(huì)觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個(gè)事件。
觸發(fā)實(shí)例：
$("button#demo").click()上面的例子將觸發(fā) id="demo" 的 button 元素的 click 事件。
綁定實(shí)例：
$("button#demo").click(function(){$("img").hide()})?上面的例子會(huì)在點(diǎn)擊 id="demo" 的按鈕時(shí)隱藏所有圖像。
事件的綁定方式：
<!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);});*///第四種綁定 這種綁定可以為添加的新標(biāo)簽綁定事件$(".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() | 向匹配元素附加一個(gè)或更多事件處理器 |
| blur() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 blur 事件 |
| change() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 change 事件 |
| click() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 click 事件 |
| dblclick() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的當(dāng)前或未來的子元素附加一個(gè)或多個(gè)事件處理器 |
| die() | 移除所有通過 live() 函數(shù)添加的事件處理程序。 |
| error() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 對(duì)象上是否調(diào)用了 event.preventDefault()。 |
| event.pageX | 相對(duì)于文檔左邊緣的鼠標(biāo)位置。 |
| event.pageY | 相對(duì)于文檔上邊緣的鼠標(biāo)位置。 |
| event.preventDefault() | 阻止事件的默認(rèn)動(dòng)作。 |
| event.result | 包含由被指定事件觸發(fā)的事件處理器返回的最后一個(gè)值。 |
| event.target | 觸發(fā)該事件的 DOM 元素。 |
| event.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發(fā)生時(shí)的毫秒數(shù)。 |
| event.type | 描述事件的類型。 |
| event.which | 指示按了哪個(gè)鍵或按鈕。 |
| focus() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 focus 事件 |
| keydown() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key down 事件 |
| keypress() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key press 事件 |
| keyup() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key up 事件 |
| live() | 為當(dāng)前或未來的匹配元素添加一個(gè)或多個(gè)事件處理器 |
| load() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 load 事件 |
| mousedown() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse down 事件 |
| mouseenter() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse enter 事件 |
| mouseleave() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse leave 事件 |
| mousemove() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse move 事件 |
| mouseout() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse out 事件 |
| mouseover() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse over 事件 |
| mouseup() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件處理器。每個(gè)元素只能觸發(fā)一次該處理器。 |
| ready() | 文檔就緒事件（當(dāng) HTML 文檔就緒可用時(shí)） |
| resize() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 resize 事件 |
| scroll() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 scroll 事件 |
| select() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 select 事件 |
| submit() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 submit 事件 |
| toggle() | 綁定兩個(gè)或多個(gè)事件處理器函數(shù)，當(dāng)發(fā)生輪流的 click 事件時(shí)執(zhí)行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一個(gè)被匹配元素的指定事件 |
| unbind() | 從匹配元素移除一個(gè)被添加的事件處理器 |
| undelegate() | 從匹配元素移除一個(gè)被添加的事件處理器，現(xiàn)在或?qū)?/td> |
| unload() | 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 unload 事件 |
實(shí)例：
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; //鼠標(biāo)變成小手 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">內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1</div> 39 <div class="hide" b="2">內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2</div> 40 <div class="hide" b="3">內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容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; //鼠標(biāo)變成小手 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 >內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1</div> 39 <div class="hide" >內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2</div> 40 <div class="hide" >內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容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 效果
隱藏、顯示、切換，滑動(dòng)，淡入淡出，以及動(dòng)畫，哇哦！
| animate() | 對(duì)被選元素應(yīng)用“自定義”的動(dòng)畫 |
| clearQueue() | 對(duì)被選元素移除所有排隊(duì)的函數(shù)（仍未運(yùn)行的） |
| delay() | 對(duì)被選元素的所有排隊(duì)函數(shù)（仍未運(yùn)行）設(shè)置延遲 |
| dequeue() | 運(yùn)行被選元素的下一個(gè)排隊(duì)函數(shù) |
| fadeIn() | 逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| hide() | 隱藏被選的元素 |
| queue() | 顯示被選元素的排隊(duì)函數(shù) |
| show() | 顯示被選的元素 |
| slideDown() | 通過調(diào)整高度來滑動(dòng)顯示被選元素 |
| slideToggle() | 對(duì)被選元素進(jìn)行滑動(dòng)隱藏和滑動(dòng)顯示的切換 |
| slideUp() | 通過調(diào)整高度來滑動(dòng)隱藏被選元素 |
| stop() | 停止在被選元素上運(yùn)行動(dòng)畫 |
| toggle() | 對(duì)被選元素進(jìn)行隱藏和顯示的切換 |
jQuery 文檔操作方法
這些方法對(duì)于 XML 文檔和 HTML 文檔均是適用的，除了：html()。
| addClass() | 向匹配的元素添加指定的類名。 |
| after() | 在匹配的元素之后插入內(nèi)容。 |
| append() | 向匹配元素集合中的每個(gè)元素結(jié)尾插入由參數(shù)指定的內(nèi)容。 |
| appendTo() | 向目標(biāo)結(jié)尾插入匹配元素集合中的每個(gè)元素。 |
| attr() | 設(shè)置或返回匹配元素的屬性和值。 |
| before() | 在每個(gè)匹配的元素之前插入內(nèi)容。 |
| clone() | 創(chuàng)建匹配元素集合的副本。 |
| detach() | 從 DOM 中移除匹配元素集合。 |
| empty() | 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容。 |
| insertAfter() | 把匹配的元素插入到另一個(gè)指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一個(gè)指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每個(gè)元素開頭插入由參數(shù)指定的內(nèi)容。 |
| prependTo() | 向目標(biāo)開頭插入匹配元素集合中的每個(gè)元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性。 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類。 |
| replaceAll() | 用匹配的元素替換所有匹配到的元素。 |
| replaceWith() | 用新內(nèi)容替換匹配的元素。 |
| text() | 設(shè)置或返回匹配元素的內(nèi)容。 |
| toggleClass() | 從匹配的元素中添加或刪除一個(gè)類。 |
| unwrap() | 移除并替換指定元素的父元素。 |
| val() | 設(shè)置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的內(nèi)容或元素包裹起來。 |
| wrapAll() | 把所有匹配的元素用指定的內(nèi)容或元素包裹起來。 |
| wrapinner() | 將每一個(gè)匹配的元素的子內(nèi)容用指定的內(nèi)容或元素包裹起來。 |
?
jQuery 屬性操作方法
下面列出的這些方法獲得或設(shè)置元素的 DOM 屬性。
這些方法對(duì)于 XML 文檔和 HTML 文檔均是適用的，除了：html()。
| addClass() | 向匹配的元素添加指定的類名。 |
| attr() | 設(shè)置或返回匹配元素的屬性和值。 |
| hasClass() | 檢查匹配的元素是否擁有指定的類。 |
| html() | 設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容。 |
| removeAttr() | 從所有匹配的元素中移除指定的屬性。 |
| removeClass() | 從所有匹配的元素中刪除全部或者指定的類。 |
| toggleClass() | 從匹配的元素中添加或刪除一個(gè)類。 |
| val() | 設(shè)置或返回匹配元素的值。 |
?實(shí)例：
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>主機(jī)IP</th> 40 <th>端口號(hào)</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 <!--遮罩層結(jié)束--> 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 <!--編輯框結(jié)束--> 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> 模態(tài)對(duì)話框?
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>主機(jī)IP</th> 40 <th>端口號(hào)</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 <!--遮罩層結(jié)束--> 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 <!--編輯框結(jié)束--> 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> 模態(tài)對(duì)話框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>主機(jī)IP</th> 40 <th>端口號(hào)</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 <!--遮罩層結(jié)束--> 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 <!--編輯框結(jié)束--> 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> 模態(tài)對(duì)話框4?
?
jQuery CSS 操作函數(shù)
下面列出的這些方法設(shè)置或返回元素的 CSS 相關(guān)屬性。
| css() | 設(shè)置或返回匹配元素的樣式屬性。 |
| height() | 設(shè)置或返回匹配元素的高度。（純高度） |
| innerHight（） | 設(shè)置或返回匹配元素的純高度+外邊距（margin） |
| outerHeight（） | 設(shè)置或返回匹配元素的純高度+外邊距（margin）+邊框（border） |
| outerHeight（true） | 設(shè)置或返回匹配元素的純高度+外邊距（margin）+邊框（border）+內(nèi)邊距（padding） |
| offset() | 返回第一個(gè)匹配元素相對(duì)于文檔的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一個(gè)匹配元素相對(duì)于父元素的位置。 |
| scrollLeft() | 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移。 |
| scrollTop() | 設(shè)置或返回匹配元素相對(duì)滾動(dòng)條頂部的偏移。 |
| width() | 設(shè)置或返回匹配元素的寬度。 |
?實(shí)例：
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>點(diǎn)贊</span> 23 </div> 24 </div> 25 <div class="content"> 26 <div class="item"> 27 <span>點(diǎn)贊</span> 28 </div> 29 </div> 30 <div class="content"> 31 <div class="item"> 32 <span>點(diǎn)贊</span> 33 </div> 34 </div> 35 <div class="content"> 36 <div class="item"> 37 <span>點(diǎn)贊</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> 點(diǎn)贊?
?
jQuery Ajax 操作函數(shù)
jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數(shù)和方法允許我們?cè)诓凰⑿聻g覽器的情況下從服務(wù)器加載數(shù)據(jù)。
| jQuery.ajax() | 執(zhí)行異步 HTTP (Ajax) 請(qǐng)求。 |
| .ajaxComplete() | 當(dāng) Ajax 請(qǐng)求完成時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。 |
| .ajaxError() | 當(dāng) Ajax 請(qǐng)求完成且出現(xiàn)錯(cuò)誤時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。 |
| .ajaxSend() | 在 Ajax 請(qǐng)求發(fā)送之前顯示一條消息。 |
| jQuery.ajaxSetup() | 設(shè)置將來的 Ajax 請(qǐng)求的默認(rèn)值。 |
| .ajaxStart() | 當(dāng)首個(gè) Ajax 請(qǐng)求完成開始時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。 |
| .ajaxStop() | 當(dāng)所有 Ajax 請(qǐng)求完成時(shí)注冊(cè)要調(diào)用的處理程序。這是一個(gè) Ajax 事件。 |
| .ajaxSuccess() | 當(dāng) Ajax 請(qǐng)求成功完成時(shí)顯示一條消息。 |
| jQuery.get() | 使用 HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。 |
| jQuery.getJSON() | 使用 HTTP GET 請(qǐng)求從服務(wù)器加載 JSON 編碼數(shù)據(jù)。 |
| jQuery.getScript() | 使用 HTTP GET 請(qǐng)求從服務(wù)器加載 JavaScript 文件，然后執(zhí)行該文件。 |
| .load() | 從服務(wù)器加載數(shù)據(jù)，然后把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎?#xff0c;適合在 URL 查詢字符串或 Ajax 請(qǐng)求中使用。 |
| jQuery.post() | 使用 HTTP POST 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。 |
| .serialize() | 將表單內(nèi)容序列化為字符串。 |
| .serializeArray() | 序列化表單元素，返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。 |
?
?
jQuery 遍歷函數(shù)
jQuery 遍歷函數(shù)包括了用于篩選、查找和串聯(lián)元素的方法。
| .add() | 將元素添加到匹配元素的集合中。 |
| .andSelf() | 把堆棧中之前的元素集添加到當(dāng)前集合中。 |
| .children() | 獲得匹配元素集合中每個(gè)元素的所有子元素。 |
| .closest() | 從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。 |
| .contents() | 獲得匹配元素集合中每個(gè)元素的子元素，包括文本和注釋節(jié)點(diǎn)。 |
| .each() | 對(duì) jQuery 對(duì)象進(jìn)行迭代，為每個(gè)匹配元素執(zhí)行函數(shù)。 |
| .end() | 結(jié)束當(dāng)前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態(tài)。 |
| .eq() | 將匹配元素集合縮減為位于指定索引的新元素。 |
| .filter() | 將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。 |
| .find() | 獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，由選擇器進(jìn)行篩選。 |
| .first() | 將匹配元素集合縮減為集合中的第一個(gè)元素。 |
| .has() | 將匹配元素集合縮減為包含特定元素的后代的集合。 |
| .is() | 根據(jù)選擇器檢查當(dāng)前匹配元素集合，如果存在至少一個(gè)匹配元素，則返回 true。 |
| .last() | 將匹配元素集合縮減為集合中的最后一個(gè)元素。 |
| .map() | 把當(dāng)前匹配集合中的每個(gè)元素傳遞給函數(shù)，產(chǎn)生包含返回值的新 jQuery 對(duì)象。 |
| .next() | 獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。 |
| .nextAll() | 獲得匹配元素集合中每個(gè)元素之后的所有同輩元素，由選擇器進(jìn)行篩選（可選）。 |
| .nextUntil() | 獲得每個(gè)元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .not() | 從匹配元素集合中刪除元素。 |
| .offsetParent() | 獲得用于定位的第一個(gè)父元素。 |
| .parent() | 獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素，由選擇器篩選（可選）。 |
| .parents() | 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，由選擇器篩選（可選）。 |
| .parentsUntil() | 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，直到遇到匹配選擇器的元素為止。 |
| .prev() | 獲得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素，由選擇器篩選（可選）。 |
| .prevAll() | 獲得匹配元素集合中每個(gè)元素之前的所有同輩元素，由選擇器進(jìn)行篩選（可選）。 |
| .prevUntil() | 獲得每個(gè)元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 |
| .siblings() | 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 |
| .slice() | 將匹配元素集合縮減為指定范圍的子集。 |
?
jQuery 數(shù)據(jù)操作函數(shù)
這些方法允許我們將指定的 DOM 元素與任意數(shù)據(jù)相關(guān)聯(lián)。
| .clearQueue() | 從隊(duì)列中刪除所有未運(yùn)行的項(xiàng)目。 |
| .data() | 存儲(chǔ)與匹配元素相關(guān)的任意數(shù)據(jù)。 |
| jQuery.data() | 存儲(chǔ)與指定元素相關(guān)的任意數(shù)據(jù)。 |
| .dequeue() | 從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù)，并執(zhí)行它。 |
| jQuery.dequeue() | 從隊(duì)列最前端移除一個(gè)隊(duì)列函數(shù)，并執(zhí)行它。 |
| jQuery.hasData() | 存儲(chǔ)與匹配元素相關(guān)的任意數(shù)據(jù)。 |
| .queue() | 顯示或操作匹配元素所執(zhí)行函數(shù)的隊(duì)列。 |
| jQuery.queue() | 顯示或操作匹配元素所執(zhí)行函數(shù)的隊(duì)列。 |
| .removeData() | 移除之前存放的數(shù)據(jù)。 |
| jQuery.removeData() | 移除之前存放的數(shù)據(jù)。 |
jQuery DOM 元素方法
| .get() | 獲得由選擇器指定的 DOM 元素。 |
| .index() | 返回指定元素相對(duì)于其他指定元素的 index 位置。 |
| .size() | 返回被 jQuery 選擇器匹配的元素的數(shù)量。 |
| .toArray() | 以數(shù)組的形式返回 jQuery 選擇器匹配的元素。 |
jQuery 核心函數(shù)
| jQuery() | 接受一個(gè)字符串，其中包含了用于匹配元素集合的 CSS 選擇器。 |
| jQuery.noConflict() | 運(yùn)行這個(gè)函數(shù)將變量 $ 的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫。 |
?
jQuery 屬性
下面列出的這些方法設(shè)置或返回元素的 CSS 相關(guān)屬性。
| context | 在版本 1.10 中被棄用。包含傳遞給 jQuery() 的原始上下文。 |
| jquery | 包含 jQuery 版本號(hào)。 |
| jQuery.fx.interval | 改變以毫秒計(jì)的動(dòng)畫速率。 |
| jQuery.fx.off | 全局禁用/啟用所有動(dòng)畫。 |
| jQuery.support | 表示不同瀏覽器特性或漏洞的屬性集合（用于 jQuery 內(nèi)部使用）。 |
| length | 包含 jQuery 對(duì)象中的元素?cái)?shù)目。 |
?
jQuery擴(kuò)展
?1.前面的jquery寫完是當(dāng)頁面全部加載完后，才執(zhí)行的，如果有頁面沒有加載完，那么就不會(huì)執(zhí)行下面的jquery；
所以? 當(dāng)頁面框架加載完畢后，自動(dòng)執(zhí)行的方法：
$(function(){$(...)})?2.設(shè)置自定義的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>?如果在設(shè)置自定義屬性時(shí)，有全局變量出現(xiàn)，為了避免和其他的自定義屬性的變量名一樣，那么就需要把變量放入自執(zhí)行函數(shù)里面
(function(){var status = 1;// 封裝變量})(jQuery)?實(shí)例：
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 ****************************************
?
轉(zhuǎn)載于:https://www.cnblogs.com/garrett0220/p/8631170.html
總結(jié)
以上是生活随笔為你收集整理的Python自动化开发学习的第十一周----WEB基础（jquery）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 逐行读取文件示例
- 下一篇： input获取焦点软键盘弹出影响定位