Created by Jerry Wang on Sep 02, 2014
<html>
<script>
function myprint() {
console.log("hello world");
}
</script>
<script src="./jquery_1.7.1.js">
</script>
<script>
function register_event() {
var acollections = $("a");
console.log("number of a: " + acollections.length);
acollections.click(function(){
console.log("function registered via Jquery is called");
});
}
</script>
<body onload = "register_event();">
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" >jQuery</a>
</body>
</html> case1: 為tag a注冊click 事件處理函數
點選tag a後輸出如下:
若source code改為如下，則點選tag a時不會觸發console.log，因為在匿名函數執行時body page尚未完成render，$("a")傳回為空，是以click事件的注冊實際上沒有進行。
注冊事件處理函數可加上參數source: ```JavaScript acollections.click(function(source){ console.log("function registered via Jquery is called on: " + source.currentTarget.id); } ``` 則click事件發生的element id也能列印出來:
case2: 列印某tag inner html source code 在case1的html中加入如下code:
Hello world
!
在register_event函數末尾加入如下code: ```JavaScript console.log($("div>span").html()); ``` 輸出div tag内的子節點span的全部html
source code:
另一種用法: find method前可加限制條件（從指定的dom node開始查找) console.log("searching span node in whole page: " + $(document).find("div>span").html()); 注：$('div>ul')和$('div ul')是有差別的: $('div>ul')是
的直接後代裡找
; 而$('div ul')是在
的所有後代裡找
。 ```JavaScript var noClass = $('body p:not(.c_three)'); // 傳回body node下所有類型為p的子節點，這些子節點不包含class c_three. ``` ```JavaScript var withTitle = $('a[title]'); // 傳回所有擁有title屬性的a tag. ``` ```JavaScript var child = $('a[title^="tit"]') // 傳回所有title屬性為tit開頭的a tag. ``` ```JavaScript var child = $('a[title$="e"]') // 傳回所有title屬性為e結尾的a tag. ``` ```JavaScript $('td:contains("Henry")').prev()——内容包含有"Henry"的的上一個節點 $('td:contains("Henry")').next()——内容包含有"Henry"的的下一個節點 $('td:contains("Henry")').siblings()——内容包含有"Henry"的的所有兄弟節點 ``` case3: 動态添加dom node $("
Hello").appendTo("body");
jquery selector 預設傳回的結果集是array，如果想獲得dom element，需要使用get method: