Python開發【前端】：jQuery，python前端jquery
jQuery簡介 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版本和使用
jQuery有1.x、2.x、3.x三個大的版本，推薦使用1.x的最新版本（相容性更換），本次使用的版本為jquery-1.12.4.js
引用：
<script src="jquery-1.12.4.js"></script>
-》》jquery-1.12.4.js、jquery-1.12.4.min.js
Dom和jQuery對象相互轉換
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="i1">James</div> <script src="jquery-1.12.4.js"></script></body></html>s1.html
jQuery轉換為Dom:
> $('#i1')< [<div id="i1">James</div>]> document.getElementById('i1')< <div id="i1">James</div>>$('#i1')[0]< <div id="i1">James</div>
Dom轉換為jQuery:
> $('#i1')< [<div id="i1">James</div>]> d1 = document.getElementById('i1')< <div id="i1">James</div>> $(d1)< [<div id="i1">James</div>]
jQuery選取器
一、基本選取器
① id選取器
<div id="id">James</div>$('#id')
② clss選取器
<div class="c1">James</div>$('.c1')
③ 標籤選取器
尋找所有的a標籤：<div id="id">James</div><div class="c1"> <a>f</a></div><div class="c1"> <a>f</a> <a>f</a></div>$('a')
④ *表示所有
$('*')
⑤ 多查詢（selector1,selector2,selectorN）
<div id="id">James</div><div class="c1"> <a>f</a></div><div class="c1"> <a>f</a> <a>f</a></div>$('#id,.c1,a')
二、層級選取器
① ancestor descendant(尋找包含的所有)
<div id="i1" class="c1"> <div> <a>a</a> </div> <a>b</a> <a>c</a></div>> $('#i1 a')< [<a>a</a>, <a>b</a>, <a>c</a>]
② parent > child(只尋找下一級所有)
<div id="i1" class="c1"> <div> <a>a</a> </div> <a>b</a> <a>c</a></div>> $('#i1 > a')< [<a>b</a>, <a>c</a>]
③ prev + next(尋找同級相鄰的一個)
<div id="i1" class="c1"> <div> <input name="name"/> <a>a</a> </div> <a>b</a> <input name="name"/> <a>c</a> <a>d</a></div>> $('input + a')< [<a>a</a>, <a>c</a>]
④ prev ~ siblings(尋找同級下面所有)
<div id="i1" class="c1"> <div> <input name="name"/> <a>a</a> </div> <a>b</a> <input name="name"/> <a>c</a> <a>d</a></div>> $('input ~ a')< [<a>a</a>, <a>c</a>, <a>d</a>]
三、基本篩選器
操作html檔案：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
① :first（擷取匹配的第一個元素）
> $('ul li:first')< [<li>list item 1</li>]
② :last（擷取匹配的最後一個元素）
> $('ul li:last')< [<li>list item 5</li>]
③ :eq（匹配一個給定索引值的元素）
> $('ul li:eq(1)')< [<li>list item 2</li>]
④ :gt（匹配所有大於給定索引值的元素）
> $('ul li:gt(2)')< [<li>list item 4</li>, <li>list item 5</li>]
⑤ :lt （匹配所有小於給定索引值的元素）
> $('ul li:lt(2)')< [<li>list item 1</li>, <li>list item 2</li>]
⑥ 其他
:not(selector) 去除所有與給定選取器匹配的元素:even 匹配所有索引值為偶數的元素，從 0 開始計:odd 匹配所有索引值為奇數的元素，從 0 開始計數:lang(language) 選擇指定語言的所有元素:header 匹配如 h1, h2, h3之類的標題元素:animated 匹配所有正在執行動畫效果的元素:focus 匹配當前擷取焦點的元素:root 選擇該文檔的根項目:targe 選擇由文檔URI的格式化識別碼錶示的目標元素更多...
四、屬性選取器
① [attribute]（匹配包含給定屬性的元素）
<div class="c1"> <div James="123">123</div> <div James="456">456</div></div>> $('div[James]')< [<div james="123">123</div>, <div james="456">456</div>]
② [attribute=value]（匹配給定的屬性是某個特定值的元素）
<div class="c1"> <div James="123">123</div> <div James="456">456</div></div>> $('div[James="456"]')< [<div james="456">456</div>]
③ 其他
[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素[attribute^=value] 匹配給定的屬性是以某些值開始的元素[attribute$=value] 匹配給定的屬性是以某些值結尾的元素[attribute*=value] 匹配給定的屬性是以包含某些值的元素[selector1][selector2][selectorN] 複合屬性選取器，需要同時滿足多個條件時使用更多...
五、表單選取器
操作html檔案：
<form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button></form>form.html
① :input（匹配所有 input, textarea, select 和 button 元素）
> $(':input')< [<input type="text">, <input type="checkbox">, <input type="radio">, <input type="image">, <input type="file">, <input type="submit">, <input type="reset">, <input type="password">, <input type="button">, <select>…</select>, <textarea></textarea>, <button></button>]
② :text（匹配所有的單行文字框）
> $(':text')< [<input type="text">]
③ :password（匹配所有密碼框）
> $(':password')< [<input type="password">]
④ :radio（匹配所有選項按鈕）
> $(':radio')< [<input type="radio">]
⑤ :checkbox（匹配所有複選框）
> $(':checkbox')< [<input type="checkbox">]
⑥ :submit（匹配所有提交按鈕）
> (':submit')< [<input type="submit">, <button></button>]
⑦ :image（匹配所有映像域）
> $(':image')< [<input type="image">]
⑧ :reset（匹配所有重設按鈕）
> $(':reset')< [<input type="reset">]
⑨ :button（匹配所有按鈕）
(':button')[<input type="button">, <button></button>]
⑩ :file（匹配所有檔案域）
> $(':file')< [<input type="file">]
六、表單對象屬性
① :enabled（匹配所有可編輯元素）
<form> <input name="email" disabled="disabled" /> <input name="id" /></form>> $("input:enabled")< [<input name="id" />]
② :disabled（匹配所有不可編輯元素）
<form> <input name="email" disabled="disabled" /> <input name="id" /></form>> $("input:disabled")< [<input name="email" disabled="disabled" />]
③ :checked（匹配所有選中的被選中元素）
<form> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /></form>> $("input:checked")< [<input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]
④ :selected（匹配所有選中的option元素）
<select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option></select>> $("select option:selected")< [<option value="2" selected="selected">Gardens</option>]
jQuery練習
參考文檔-》》jQuery API 中文線上手冊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
