資源描述:
《jquery快速入門總結(jié)很給力的》由會員上傳分享,免費在線閱讀,更多相關內(nèi)容在行業(yè)資料-天天文庫。
1、且確實可以很輕松地做出許多復雜的效果。雖然jQuery上手簡單,比其他庫容易學會,但是要全面掌握,卻不輕松。因為它涉及到網(wǎng)頁開發(fā)的方方面面,提供的各種方法和內(nèi)部變化有上千種之多。初學者常常感到,入門很方便,提高很困難。目前,互聯(lián)網(wǎng)上最好的jQuery入門教材,是RebeccaMurphey寫的《jQuery基礎》(jQueryFundamentals)。在Google里搜索"jQuery培訓",此書排在第一位。jQuery官方團隊已經(jīng)同意,把此書作為官方教程的基礎。這本書雖然是入門教材,但也足足有100多頁。我對它做了一個詳細的筆記,
2、試圖理清jQuery的設計思想,找出學習的脈絡。我的目標是全面掌握jQuery,遇到問題的時候,心里有底,基本知道使用它的哪一個功能,然后可以迅速從手冊中找到具體的寫法。下面就是我的筆記,它應該是目前網(wǎng)上不多的jQuery中文教程之一。你只需要一點javascript語言的基本知識,就能看懂它,在最短的時間里,掌握jQuery的所有主要方面(除了ajax和插件開發(fā))。===========================================jQuery設計思想原文網(wǎng)址:http://jqfundamentals.com/b
3、ook/阮一峰翻譯整理【目錄】 一、選擇網(wǎng)頁元素 二、改變結(jié)果集 三、鏈式操作 四、元素的操作:取值和賦值 五、元素的操作:移動 六、元素的操作:復制、刪除和創(chuàng)建 七、工具方法 八、事件操作 九、特殊效果【正文】一、選擇網(wǎng)頁元素jQuery的基本設計和主要用法,就是"選擇某個網(wǎng)頁元素,然后對其進行某種操作"。這是它區(qū)別于其他函數(shù)庫的根本特點。使用jQuery的第一步,往往就是將一個選擇表達式,放進構(gòu)造函數(shù)jQuery()(簡寫為$),然后得到被選中的元素。選擇表達式可以是CSS選擇器: $(document)//選
4、擇整個文檔對象 $('#myId')//選擇ID為myId的網(wǎng)頁元素 $('div.myClass')//選擇class為myClass的div元素 $('input[name=first]')//選擇name屬性等于first的input元素也可以是jQuery特有的表達式: $('a:first')//選擇網(wǎng)頁中第一個a元素 $('tr:odd')//選擇表格的奇數(shù)行 $('#myForm:input')//選擇表單中的input元素 $('div:visible')//選擇可見的div元素 $('div:gt(2
5、)')//選擇所有的div元素,除了前三個 $('div:animated')//選擇當前處于動畫狀態(tài)的div元素二、改變結(jié)果集如果選中多個元素,jQuery提供過濾器,可以縮小結(jié)果集: $('div').has('p');//選擇包含p元素的div元素 $('div').not('.myClass');//選擇class不等于myClass的div元素 $('div').filter('.myClass');//選擇class等于myClass的div元素 $('div').first();//選擇第1個div元素 $(
6、'div').eq(5);//選擇第6個div元素有時候,我們需要從結(jié)果集出發(fā),移動到附近的相關元素,jQuery也提供了在DOM樹上的移動方法: $('div').next('p');//選擇div元素后面的第一個p元素 $('div').parent();//選擇div元素的父元素 $('div').closest('form');//選擇離div最近的那個form父元素 $('div').children();//選擇div的所有子元素 $('div').siblings();//選擇div的同級元素三、鏈式操作選中網(wǎng)
7、頁元素以后,就可以對它進行某種操作。jQuery允許將所有操作連接在一起,以鏈條的形式寫出來,比如: $('div').find('h3').eq(2).html('Hello');分解開來,就是下面這樣: $('div')//找到div元素 .find('h3')//選擇其中的h3元素 .eq(2)//選擇第3個h3元素 .html('Hello');//將它的內(nèi)容改為Hello這是jQuery最令人稱道、最方便的特點。它的原理在于每一步的jQuery操作,返回的都是一個jQuery對象,所以不同操作可以連在一起。j
8、Query還提供了.end()方法,使得結(jié)果集可以后退一步: $('div') .find('h3') .eq(2) .html('Hello') .end()//退回到選中所有的h3元素的那一步