jQuery- 基礎應用

簡化Javascript開發流程的重要幫手就是好用函式庫!!
jQuery 與 PropertyJS 是當下較走紅的Javascript Library
明確的架構、簡捷的語法，除了帶來驚人的成果外，效能的表現更是令人振奮!!
就連Google都選用jQuery的Library來做為網頁的開發輔助工具，
與其閉門造車，不如廣學武功，多在應用及整合功能上著墨。
以下簡單介紹jQuery幾個常用的基礎用法，還請不吝嗇指教。




Step1: 引用jQuery Library

外部引用jQuery-pack.js

只需要將jQuery的函式集插入就可以了。

.<script src="http://code.jquery.com/jquery-latest.js"></script>

Step2: 使用jQuery  Function

Selectors元素選擇器
元素選取功能，(元素)

$("div") 選取所有<div>標籤元素集合
$("#div") 如同 document.getElementById()一樣，取得id="div" 的 元素集合
$(".div") 選取所有class="div" 的元素集合

[ 再來是很方便的特徵選取方法 ]

$("div#div") 選取 標籤為<div id="div">的元素
<div id="div">
　內容
</div>

$(".div div") 選取class="div"下標籤為div的元素
( <xxx class="div"><div>...</div></xxx> )

$(".div .div") 選取class="div"下class="div" 的元素集合
( <xxx class="div"><yyy class="div"></yyy></xxx> )

$("div > div") 選取標籤為div下的div標籤元素集合
<div>
<div>Block...</div>
<a>Link...</a>
<div>Block...</div>
　<p>text...</p>
</div>

$("div:has(div)") 選取標籤為div下層含有標籤div的元素集合
<div>
　<div>Block...</div>
</div>

$("div#div,p.div,span#div") 選取任一條件吻合的元素集合
<div id="div">Block...</div>
<div>
<p>Text...</p>
<span id="div">Text...</span>
</div>

$("p + span") 選取緊連著標籤p的標籤span元素集合
<p>Text...</p>
<span>Text...<span>
<span>
<a>Link...</a>
<span>

$("#div ~ div") 選取id="div"之後的<div>元素集合
<div>Block1...</div>
<div id="div">Block2...</div>
<div>Block3...</div>
<span>
<div>Block4...</div>
</span>
<div>
　Block5...
　<div>
　　Block6...
　</div>
</div>
<div>內層(Block6)不會重覆選取( 此一例元素集合的length為3 )


Categories: ,