1. 程式人生 > >jQuery初識,常用的選擇器、Ajax

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 是與伺服器交換資料的藝術,它在不過載全部頁面

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

eg.

程式碼:



效果: