關(guān)于JQuery設(shè)計(jì)思想

申請免費(fèi)試用、咨詢電話：400-8352-114

jQuery是當(dāng)前運(yùn)用最普遍的javascript函數(shù)庫。

　　據(jù)計(jì)算，全世界排名前100萬的網(wǎng)站，有46%運(yùn)用jQuery，遠(yuǎn)遠(yuǎn)超越其他庫。微軟公司甚至把jQuery作為他們的官方庫。

　　關(guān)于網(wǎng)頁開拓者來說，學(xué)會jQuery是需要的。由于它讓你調(diào)查業(yè)界最通用的技能，為未來進(jìn)修更高級的庫打下根底，而且的確可以很輕松地做出很多復(fù)雜的結(jié)果。

　　固然jQuery上手翰單，比其他庫輕易學(xué)會，然則要具體把握，卻不輕松。由于它觸及到網(wǎng)頁開拓的方方面面，供應(yīng)的各類辦法和內(nèi)部轉(zhuǎn)變有上千種之多。初學(xué)者經(jīng)常感應(yīng)，入門很便利，進(jìn)步很堅(jiān)苦。

　　當(dāng)前，互聯(lián)網(wǎng)上最好的jQuery入門教材，是Rebecca Murphey寫的《jQuery根底》(jQuery Fundamentals)。在Google里查找"jQuery 培訓(xùn)"，此書排在第一位。jQuery官方團(tuán)隊(duì)曾經(jīng)贊同，把此書作為官方教程的根底。

　　這本書固然是入門教材，但也足足有100多頁。我對它做了一個(gè)具體的筆記，試圖理清jQuery的設(shè)計(jì)思維，找出進(jìn)修的頭緒。我的目的是具體把握jQuery，碰到問題的時(shí)分，心里有底，根本曉得運(yùn)用它的哪一個(gè)功用，然后可以敏捷從手冊中找到詳細(xì)的寫法。

　　下面就是我的筆記，它應(yīng)該是當(dāng)前網(wǎng)上不多的jQuery中文教程之一。你只需求一點(diǎn)javascript言語的根本常識，就能看懂它，在最短的工夫里，把握jQuery的一切首要方面(除了ajax和插件開拓)。

　　===========================================

　　jQuery設(shè)計(jì)思維

　　原文網(wǎng)址：http://jqfundamentals.com/book/

　　阮一峰 翻譯整頓

　　【目次】

　　一、選擇網(wǎng)頁元素

　　二、改動后果集

　　三、鏈?zhǔn)讲僮?/p>

　　四、元素的操作：取值和賦值

　　五、元素的操作：挪動

　　六、元素的操作：復(fù)制、刪除和創(chuàng)立

　　七、東西辦法

　　八、事情操作

　　九、非凡結(jié)果

　　【正文】

　　一、選擇網(wǎng)頁元素

　　jQuery的根本設(shè)計(jì)和首要用法，就是"選擇某個(gè)網(wǎng)頁元素，然后對其進(jìn)行某種操作"。這是它區(qū)別于其他函數(shù)庫的基本特點(diǎn)。

　　運(yùn)用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)結(jié)構(gòu)函數(shù)jQuery()(簡寫為$)，然后獲得被選中的元素。

　　選擇表達(dá)式可所以CSS選擇器：

<table style="BORDER-BOTTOM: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-RIGHT: #cccccc 1px dotted" border="0" cellspacing="0" cellpadding="6" width="95%" align="center">

 $(document) //選擇整個(gè)文檔對象

<span style="COLOR: #000000">$('#myId') //選擇ID為myId的網(wǎng)頁元素

<span style="COLOR: #000000">$('div.myClass') // 選擇class為myClass的div元素

<span style="COLOR: #000000">$('input[name=first]') // 選擇name屬性等于first的input元素

　　也可所以jQuery特有的表達(dá)式：

<table style="BORDER-BOTTOM: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-RIGHT: #cccccc 1px dotted" border="0" cellspacing="0" cellpadding="6" width="95%" align="center">

 <span style="COLOR: #000000">$('a:first') //選擇網(wǎng)頁中第一個(gè)a元素

<span style="COLOR: #000000">$('tr:odd') //選擇表格的奇數(shù)行

<span style="COLOR: #000000">$('#myForm :input') // 選擇表單中的input元素

<span style="COLOR: #000000">$('div:visible') //選擇可見的div元素

<span style="COLOR: #000000">$('div:gt(2)') // 選擇一切的div元素，除了前三個(gè)

<span style="COLOR: #000000">$('div:animated') // 選擇當(dāng)時(shí)處于動畫形態(tài)的div元素