jQuery入門 構(gòu)造函數(shù)
JQuery優(yōu)點(diǎn)
◦體積小(v1.2.3 15kb)
◦豐富的DOM選擇器(CSS1-3 + XPath) ◦跨瀏覽器(IE6,FF,Safari,Opera)
◦鏈?zhǔn)酱a
◦強(qiáng)大的事件、樣式支持
◦強(qiáng)大的AJAX功能
◦易于擴(kuò)展,插件豐富
jQuery的構(gòu)造函數(shù)接收四種類型的參數(shù):
jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)
第一種根據(jù)表達(dá)式(ID,DOM元素名,CSS表達(dá)式,XPath表達(dá)式)找出文檔中的元素,并組裝成一個(gè)jQuery對(duì)象返回。
DEMO:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
將以下jQuery代碼加入文末的腳本塊中:
jQuery("ul>li:first").addClass("selected");
頁面運(yùn)行效果如下:

其中jQuery()可替換為快捷方式$(),如果$被其它對(duì)象占用,可使用jQuery.noConflict()函數(shù)取消快捷方式。
"ul>li:first" 中ul>li表示所有位于ul下的li元素(為CSS表達(dá)式,XPath方式可用ul/li),:first表示其中的第一個(gè)。 addClass()為jQuery對(duì)象用來添加CSS樣式類的函數(shù),相反的函數(shù)為removeClass()。
再加入以下代碼:
$('ul').append($('<li>new item</li>'));
運(yùn)行效果如下:

其中$('<li>new item</li>')將其中的字符串轉(zhuǎn)換為DOM對(duì)象,然后通過append()函數(shù)加入ul對(duì)象的最后。
接下來:
$(document).ready(function(){
$('ul').css('color','red');
});
則效果如:

jQuery構(gòu)造函數(shù)中還可以真接傳入DOM對(duì)象,如document,或jQuery對(duì)象(當(dāng)然就沒什么意義)。ready()函數(shù)為document添加事件處理函數(shù),將ul的顏色設(shè)為紅色。
$(document).ready()由于應(yīng)用場景眾多,所以可以直接用$(fn)來代替,fn表示處理函數(shù)。(ready處理函數(shù)貌似在文檔內(nèi)容載入完成后執(zhí)行,無需等待相關(guān)其它圖片等資源載入完成,所以比load事件要更早執(zhí)行,對(duì)于這點(diǎn),沒有具體證實(shí))
$(function(){
alert('welcome to jQuery');
});
以上代碼的效果是頁面一載入,就彈出一個(gè)對(duì)話框。
reference:
http://docs.jquery.com/Core
http://docs.jquery.com/Selectors
相關(guān)文章
jQuery animate(滑塊滑動(dòng)效果代碼)
jQuery animate 滑塊滑動(dòng)效果,學(xué)習(xí)jquery的朋友可以看下。2010-01-01jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?function,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-11-11jquery實(shí)現(xiàn)煙花效果(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了jquery面向?qū)ο髮?shí)現(xiàn)煙花效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本2009-07-07jQuery獲取radio選中項(xiàng)的值實(shí)例
本文主要介紹jQuery獲取radio選中項(xiàng)的值的方法,希望能幫到大家,有需要的朋友可以參考一下。2016-06-06jqPaginator結(jié)合express實(shí)現(xiàn)分頁展示內(nèi)容效果
這篇文章主要為大家詳細(xì)介紹了jqPaginator結(jié)合express實(shí)現(xiàn)分頁展示內(nèi)容效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)刪除LI的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05