資源描述:
《jquery入門教程2011》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、jQuery入門[1]-構(gòu)造函數(shù)jQuery優(yōu)點(diǎn)?體積?。╲1.2.315kb)?豐富的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:DOCTYPEhtmlPUBLIC"-//W
2、3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">jQuerybasictitle>.selected{background-color:Yellow;}style>3、>script>head>
jQuery構(gòu)造函數(shù)h3>- jQuery(expression,context)li>
- jQuery(html)li>
- jQuery(elements)li>
- jQuery(fn)li>ul>script>body>html>將以下jQuery代碼加入文末的腳本塊中:jQuery("ul>li:first").addClass("selected");頁(yè)面運(yùn)行效果如下:其中jQuery()可替換為快捷方式$(),如果$被其它對(duì)象占用,可使用jQuery.n
4、oConflict()函數(shù)取消快捷方式。"ul>li:first"中ul>li表示所有位于ul下的li元素(為CSS表達(dá)式,XPath方式可用ul/li),:first表示其中的第一個(gè)。addClass()為jQuery對(duì)象用來(lái)添加CSS樣式類的函數(shù),相反的函數(shù)為removeClass()。再加入以下代碼:$('ul').append($('newitem'));運(yùn)行效果如下:其中$('newitem')將其中的字符串轉(zhuǎn)換為DOM對(duì)象,然后通過(guò)append()函數(shù)加入ul對(duì)象的最后。接下來(lái):$(document).ready(function(){$('ul').css('color','r
5、ed');});則效果如:jQuery構(gòu)造函數(shù)中還可以真接傳入DOM對(duì)象,如document,或jQuery對(duì)象(當(dāng)然就沒(méi)什么意義)。ready()函數(shù)為document添加事件處理函數(shù),將ul的顏色設(shè)為紅色。$(document).ready()由于應(yīng)用場(chǎng)景眾多,所以可以直接用$(fn)來(lái)代替,fn表示處理函數(shù)。(ready處理函數(shù)貌似在文檔內(nèi)容載入完成后執(zhí)行,無(wú)需等待相關(guān)其它圖片等資源載入完成,所以比load事件要更早執(zhí)行,對(duì)于這點(diǎn),沒(méi)有具體證實(shí))$(function(){alert('welcometojQuery');});以上代碼的效果是頁(yè)面一載入,就彈出一個(gè)對(duì)話框。jQuery1
6、.2選擇器jQuery1.2選擇器以下的文檔根據(jù)官網(wǎng)1.2選擇器漢化,并做相應(yīng)的調(diào)整及加入了部份示例。由于實(shí)際使用中選擇器在IE和非IE下會(huì)有不同的效果,請(qǐng)參照紅色的字樣。如有錯(cuò)誤請(qǐng)及時(shí)聯(lián)系我。緋雨漢化:http://feiyu.asgard.cn基本選擇器#myid返回:對(duì)象>匹配一個(gè)id為myid的元素。element返回:對(duì)象>數(shù)組匹配所有的element元素.myclass返回:對(duì)象>數(shù)組匹配所有class為myclass的元素*返回:對(duì)象>數(shù)組匹配所有元素。該選擇器會(huì)選擇文檔中所有的元素,包括html,head,bodyselector1,selector2,selectorN返回
7、:對(duì)象>數(shù)組匹配所有滿足selector1或selector2或selectorN的元素層次選擇elementParentelementChild返回:對(duì)象>數(shù)組匹配elementParent下的所有子元素elementChild。例如:$("divp")選擇所有div下的p元素elementParent>elementChild返回:對(duì)象>數(shù)組匹配elementParent下的子元素elementChild