jQuery入門_02-Basics.ppt

1、- 1 -,jQuery入門,2012/12/24,Basics,- 2 -,目錄,設(shè)計(jì)理念 Design Concept 基本語法 Basic Syntax 神奇的$() $(function(); jQuery對(duì)象和DOM對(duì)象 Getters $(expression, context) context參數(shù)默認(rèn)值為document context參數(shù)應(yīng)該是DOM對(duì)象，而不jQuery對(duì)象 $.func();,- 5 -,The Magic $() Function,jQuery() = $() window.jQuery = window.$ = jQuery; $(function) D

2、OM的Ready事件 $(document).ready(function); 的簡(jiǎn)寫 $(selector) 元素選擇器表達(dá)式 $(element) 直接指定元素 element為DOM對(duì)象時(shí)轉(zhuǎn)換成為jQuery對(duì)象 $(HTML) 創(chuàng)建HTML元素 $.function() 執(zhí)行一個(gè)jQuery函數(shù) $.fn.myfunc() 創(chuàng)建一個(gè)jQuery函數(shù),- 6 -,$(function();,自調(diào)用匿名函數(shù) self-invoking anonymous function 通過定義一個(gè)匿名函數(shù)，創(chuàng)建了一個(gè)“私有”的命名空間，該命名空間的變量和方法，不會(huì)破壞全局的命名空間。 (functio

3、n()(); (function()(); window.onload 必須等到頁面內(nèi)所有元素加載完畢后執(zhí)行,只能設(shè)置成一個(gè)函數(shù)。 等價(jià)于：$(window).load(function (); $(document).ready() DOM結(jié)構(gòu)繪制完后就執(zhí)行,可同時(shí)設(shè)置多個(gè)不會(huì)被覆蓋。 簡(jiǎn)寫為：$(function();,- 7 -,jQuery Object and DOM Object,獲取對(duì)象 （1）DOM對(duì)象 document.getElementById() （2）jQuery對(duì)象 $(選擇器) 對(duì)象轉(zhuǎn)換 （1）jQuery對(duì)象DOM對(duì)象 $jobj0 $jobj.get(0) （

4、2）DOM對(duì)象jQuery對(duì)象 $(domObj),- 8 -,Getters $(input:checkbox).val(opt1, opt2); Setter同時(shí)接受函數(shù)參數(shù) $(a).attr(target, function() if (this.host = location.host) return _self else return _blank; / off-site links in a new window );,- 9 -,Getters ,- 11 -,Chaining,Chain Breakers var html = $(.).html().addClass(hel

5、lo) / Breaking, html() returns a string. / addClass method is undefined on a string,- 12 -,Stack Architecture,$(body)/body .find(p)/ p, p, p body .find(a)/a, a p, p, p body .addClass(foo) .end()/p, p, p body .end()/body,- 13 -,Conflict,將$控制權(quán)交出，之后可以使用jQuery jQuery.noConflict(); 自定義jQuery快捷方式 var $j = jQuery.noConflict(); 之后可以使用$j 將jQuery控制權(quán)也交出 var $jj = jQuery.noConflict(true); (fu