Python開發【前端】：jQuery_ZenDei技術網路在線

jQuery簡介 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用 ...

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>

target.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>

ul.html

① :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的格式化識別碼表示的目標元素

更多...

四、屬性選擇器

① [ ]（匹配包含給定屬性的元素）

<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>]

匹配自定義屬性

② [a="b"]（匹配給定的屬性是某個特定值的元素）

<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" />]

匹配選中的input框

④ :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>]

匹配選中的select下拉框

jQuery篩選器

一、查找

① next（緊鄰的同級下一個元素）

<p>Hello</p>
<span>Hello Again</span>
<div>
    <span>And Again</span>
</div>

> $("p").next()
< [<span>Hello Again</span>]

同級下一個

② prev（緊鄰的同級上一個元素）

<p>Hello</p>
<span>Hello Again</span>
<div>
    <span>And Again</span>
</div>

> $("div").prev()
< [<span>Hello Again</span>]

同級上一個

③ parent（匹配元素的唯一父元素）　

<div>
    <p>Hello</p>
    <p>Hello</p>
</div>

> $("p").parent()
< [<div><p>Hello</p><p>Hello</p></div>]

上一級父元素

④ children（匹配元素所有子元素的元素集合）

<div>
    <p>Hello</p>
    <span>
         <p>Hello</p>
    </span>
</div>

> $("div").children()
< [<p>Hello</p>, <span><p>Hello</p></span>]

所有子元素集合

⑤ siblings（匹配元素所有同級元素的元素集合）

<div>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>Hello</p>
</div>

> $("span").siblings()
< [<p>Hello</p>, <p>Hello</p>]

同級所有

⑥ find（搜索所有與指定表達式匹配的元素）

<div>
    <p>Hello</p>
    <span>Hello Again</span>
    <p>Hello</p>
</div>

> ("div").find('span')
< [<span>Hello Again</span>]

集合中檢索指定元素

⑦ 其他

closest    從元素本身開始，逐級向上級元素匹配，並返回最先匹配的元素
nextAll    查找當前元素之後所有的同輩元素
nextUntil    查找當前元素之後所有的同輩元素，直到遇到匹配的那個元素為止
offsetParent    返回第一個匹配元素用於定位的父節點
parents    取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選
parentsUntil    查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止
prevAll    查找當前元素之前所有的同輩元素
prevUntil    查找當前元素之前所有的同輩元素，直到遇到匹配的那個元素為止
siblings    取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選

更多...

二、過濾

① hasClass（檢查當前的元素是否含有某個特定的類，如果有，則返回true）

# 給包含有某個類的元素進行一個動畫

<div class="protected"></div><div></div>

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
})

判斷是否有特定的類

② 其他

eq        獲取當前鏈式操作中第N個jQuery對象，返回jQuery對象
first        獲取第一個元素
last        獲取最後個元素
filter        篩選出與指定表達式匹配的元素集合
is        根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true
map