JQuery優點
◦體積小(v1.2.3 15kb)
◦豐富的DOM選擇器(CSS1-3 + XPath) ◦跨浏覽器(IE6,FF,Safari,Opera)
◦鏈式代碼
◦強大的事件、樣式支持
◦強大的AJAX功能
◦易於擴展,插件豐富
jQuery的構造函數接收四種類型的參數:
jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)
第一種根據表達式(ID,DOM元素名,CSS表達式,XPath表達式)找出文檔中的元素,並組裝成一個jQuery對象返回。
DEMO:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
將以下jQuery代碼加入文末的腳本塊中:
jQuery("ul>li:first").addClass("selected");
頁面運行效果如下:
其中jQuery()可替換為快捷方式$(),如果$被其它對象占用,可使用jQuery.noConflict()函數取消快捷方式。
"ul>li:first" 中ul>li表示所有位於ul下的li元素(為CSS表達式,XPath方式可用ul/li),:first表示其中的第一個。 addClass()為jQuery對象用來添加CSS樣式類的函數,相反的函數為removeClass()。
再加入以下代碼:
$('ul').append($('<li>new item</li>'));
運行效果如下:
其中$('<li>new item</li>')將其中的字符串轉換為DOM對象,然後通過append()函數加入ul對象的最後。
接下來:
$(document).ready(function(){
$('ul').css('color','red');
});
則效果如:
jQuery構造函數中還可以真接傳入DOM對象,如document,或jQuery對象(當然就沒什麼意義)。ready()函數為document添加事件處理函數,將ul的顏色設為紅色。
$(document).ready()由於應用場景眾多,所以可以直接用$(fn)來代替,fn表示處理函數。(ready處理函數貌似在文檔內容載入完成後執行,無需等待相關其它圖片等資源載入完成,所以比load事件要更早執行,對於這點,沒有具體證實)
$(function(){
alert('welcome to jQuery');
});
以上代碼的效果是頁面一載入,就彈出一個對話框。
reference:
http://docs.jquery.com/Core
http://docs.jquery.com/Selectors