jQuery初識，常用的選取器、Ajax

jQuery是一個快速、簡潔的JavaScript架構。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝

JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，最佳化HTML文檔操作、事件處理、動畫設計和Ajax互動。jQuery的核心特性為：

具有獨特的鏈式文法和短小清晰的多功能介面；具有高效靈活的可擴充的css選取器；擁有便捷的外掛程式擴充機制和豐富的外掛程式。

本文主要記錄幾大css選取器和其他常用的選取器以及ajax。

首先要匯入jQuery資料包,並在<script></script>標籤中引用

eg.

1.#id:

根據給定的ID匹配一個元素。

使用任何的元字元作為名稱的文本部分， 它必須被兩個反斜線轉義。

eg1.

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

$("#myDiv");

結果;[ <div id="myDiv">id="myDiv"</div> ]

eg2.

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

#foo\\[bar\\]

結果：[ <span id="foo[bar]"></span>]

2.element

根據給定的元素標籤名匹配所有元素

eg.

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

$("div");

結果：[ <div>DIV1</div>, <div>DIV2</div> ]

3..class

根據給定的css類名匹配元素。

eg.

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

$(".myClass");

結果：[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4.*

匹配所有元素

eg.

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

$("*");

結果：[<div>DIV</div><span>SPAN</span><p>P</p>]

5. selector1,selector2,selectorN

將每一個選取器匹配到的元素合并後一起返回。可以指定任意多個選取器，並將匹配到的元素合并到一個結果內。

eg.

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
$("div,span,p.myClass");

結果;[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

6.ancestor descendant

在給定的祖先元素下匹配所有的後代元素(子子孫孫)。

eg.

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
  </fieldset>
</form>
<input name="none" />

$("form input");

結果：[ <input name="name" />, <input name="newsletter" /> ]

7.parent > child

在給定的父元素下匹配所有的子項目（非子子孫孫，僅下一級子項目）。

eg.

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
  </fieldset>
</form>
<input name="none" />

$("form > input");

結果:[ <input name="name" /> ]

8.prev + next

匹配所有緊接在 prev 元素後的 next 元素.(注意前面的不能被檢出)。

eg.

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
  </fieldset>
</form>
<input name="none" />

$("form + input");

結果;[ <input name="name" />, <input name="newsletter" /> ]

9. prev ~ siblings

匹配 prev 元素之後的所有 siblings 元素.

eg.

form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
  </fieldset>
</form>
<input name="none" />

$("form ~ input");

結果;[ <input name="name" />]

Ajax:

非同步JavaScript 及XML（英文：Asynchronous JavaScript And XML 縮寫Ajax）。AJAX 是與伺服器交換資料的藝術，它在不重載全部頁面

的情況下，實現了對部分網頁的更新是一種基於 JavaScript和HTTP請求（HTTP requests），廣泛應用在瀏覽器的網頁開發技術。Ajax是多項技術的綜合應用。

eg.

代碼:

效果：