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>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.
程式碼:
效果: