傳智網(wǎng)絡(luò)營(yíng)銷-第十二天jqueryjquery第一課

輕松學(xué)習(xí)jquery第一課

jquery快速入門主講：張鵬

郵箱：目標(biāo)jquery簡(jiǎn)介javascript與jquery之間的關(guān)系jQuery基礎(chǔ)語(yǔ)法jQuery選擇器、操作頁(yè)面文檔元素JQuery簡(jiǎn)介–

就是1個(gè)js文件Jquery由美國(guó)人JohnResig創(chuàng)建。是繼prototype之后又一個(gè)優(yōu)秀的JavaScript框架。JQuery能做什么？

JQuery能做的普通的Dom能做，普通Dom能做的JQuery也能做。JQuery的優(yōu)點(diǎn)：輕量級(jí)的js庫(kù)(壓縮后幾十kb左右)，兼容css3使用簡(jiǎn)單方便–宗旨：WriteLess,DoMore。寫得少，做得多。吃得少干得多鏈?zhǔn)骄幊?("#div1").show().css("color":"red")隱式迭代(自動(dòng)對(duì)于多個(gè)元素進(jìn)行迭代方法調(diào)用)屏蔽瀏覽器差異跨瀏覽器兼容性好（IE6.0+,FF2+,Safari3.0+,Opera9.0+,Chrome）插件豐富、開源、免費(fèi)。jQuery與JavaScript有什么關(guān)系？jQuery是使用JavaScript編寫的，也就是說(shuō)JavaScript可以任意調(diào)用，其他程序并不能很輕易的調(diào)用。就好比JavaScript是雞，jQuery是雞蛋，雞只能生雞蛋。再說(shuō)的明白些，jQuery是使用JavaScript編寫的，就好比雞蛋是雞生的。如果你還不明白再看看另一個(gè)例子：我們可以把JavaScript比喻成文字，假如使用文字寫了兩本菜譜《西餐菜譜大全》和《中餐菜譜大全》，前者是prototype（在jQuery之前也是一種類庫(kù)）后者是jQuery。菜譜里面都集合了很多做菜的方法也可以叫做菜的類庫(kù)。在程序里面呢就叫做類庫(kù)，方法庫(kù)，函數(shù)庫(kù)對(duì)比dom方式和JQuery方式根據(jù)id獲得界面元素JQuery入門2.JQuery是怎么工作? 在做所有事情之前,我們要讓jQuery讀取和處理文檔的DOM,必須盡可能快地在DOM載入后開始執(zhí)行事件。所以,我們用一個(gè)ready事件作為處理HTML文檔的開始.$(document).ready(function(){ //在這里寫你的代碼...});

這是一種最普遍也是一種最基本的方式。 如果你熟悉了JQuery之后，你可以采用一些其他的簡(jiǎn)寫的方式，最常用如：

$(function(){ //在這里寫你的代碼... });簡(jiǎn)單的JQuery$(document).ready(function(){alert("加載完畢！");});//注冊(cè)事件的函數(shù)，和普通的dom不一樣，不需要在元素上標(biāo)記on**這樣的事件。當(dāng)頁(yè)面Dom元素加載完畢時(shí)執(zhí)行代碼，可以簡(jiǎn)寫為：

$(function(){alert("加載完畢！");});和onload類似，但是onload只能注冊(cè)一次(window.onload=function...),后注冊(cè)的取代先注冊(cè)的，而ready則可以多次注冊(cè)都會(huì)被執(zhí)行。JQuery的ready和Dom的onload的區(qū)別(*)：onload是所有Dom元素創(chuàng)建完畢、圖片、Css等都加載完畢后才被觸發(fā)，而ready則是Dom元素創(chuàng)建完畢后就被觸發(fā)，這樣可以提高網(wǎng)頁(yè)的響應(yīng)速度。在jQuery中也可以用$(window).load()來(lái)實(shí)現(xiàn)onload那種事件調(diào)用的時(shí)機(jī)。什么是jQuery對(duì)象？jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery獨(dú)有的.如果一個(gè)對(duì)象是jQuery對(duì)象,那么它就可以使用jQuery里的方法:$(“#test”).html();

比如：

$("#test").html()

意思是指：獲取ID為test的元素內(nèi)的html代碼。其中html()是jQuery里的方法這段代碼等同于用DOM實(shí)現(xiàn)代碼：

document.getElementById("id").innerHTML;

雖然jQuery對(duì)象是包裝DOM對(duì)象后產(chǎn)生的，但是jQuery無(wú)法使用DOM對(duì)象的任何方法，同理DOM對(duì)象也不能使用jQuery里的方法.亂使用會(huì)報(bào)錯(cuò)約定：如果獲取的是jQuery對(duì)象,那么要在變量前面加上$. var$variable=jQuery對(duì)象varvariable=DOM對(duì)象DOM對(duì)象轉(zhuǎn)成jQuery對(duì)象對(duì)于已經(jīng)是一個(gè)DOM對(duì)象，只需要用$()把DOM對(duì)象包裝起來(lái)，就可以獲得一個(gè)jQuery對(duì)象了。$(DOM對(duì)象)

轉(zhuǎn)換后就可以使用jQuery中的方法了jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象

兩種轉(zhuǎn)換方式將一個(gè)jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象：[index]和.get(index);

(1)jQuery對(duì)象是一個(gè)數(shù)組對(duì)象，可以通過(guò)[index]的方法，來(lái)得到相應(yīng)的DOM對(duì)象(2)jQuery本身提供，通過(guò).get(index)方法，得到相應(yīng)的DOM對(duì)象

jQuery選擇器選擇器是jQuery的根基,在jQuery中,對(duì)事件處理,遍歷DOM和Ajax操作都依賴于選擇器jQuery選擇器的優(yōu)點(diǎn):簡(jiǎn)潔的寫法完善的事件處理機(jī)制

$(“#id”)等價(jià)于document.getElementById("id");$(“tagName”)等價(jià)于document.getElementsByTagName("tagName");jQuery選擇器//若網(wǎng)頁(yè)中沒(méi)有id=value的元素,瀏覽器會(huì)報(bào)錯(cuò)

document.getElementById("username").value;

//需要判斷document.getElementById("username")是否存在

if(document.getElementById("username")){

varusername=document.getElementById("username");alert(username.value);}else{alert("沒(méi)有該id元素");}

//使用JQUERY處理即使不存在也不會(huì)報(bào)錯(cuò)

var$username=$("#username");alert("^^^"+$username.val());//注意:在javaScript中函數(shù)返回值為空,表示false基本選擇器JQuery選擇器用于查找滿足條件的元素?；具x擇器是JQuery中最常用的選擇器,也是最簡(jiǎn)單的選擇器,它通過(guò)元素id,class和tagName來(lái)查找dom元素1.$("#id"):id選擇器,document.getElementById("id");2.$("div"):元素選擇器document.getElementsByTagName("div");3.$(".myClass"):類選擇器,返回所有class="myClass"的元素4.$("*"):返回所有元素,多用于結(jié)合上下文搜索5.$("div,span,p.myClass"):多條件選擇器,返回所有查到的元素基本選擇器練習(xí)改變id為one的元素的背景色為#0000FF改變class為mini的所有元素的背景色為#FF0033改變?cè)孛麨?lt;div>的所有元素的背景色為#00FFFF改變所有元素的背景色為#00FF33改變所有的<span>元素和id為two的元素的背景色為#3399FF層次選擇器如果想通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取特定元素,例如后代元素,子元素,相鄰元素,兄弟元素等,則需要使用層次選擇器.1、ancestordescendant

用法:$(”forminput”);返回值集合元素

說(shuō)明:在給定的祖先元素下匹配所有后代元素.這個(gè)要與下面講的”parent>child”區(qū)分開.2、parent>child

用法:$(”form>input”);返回值集合元素

說(shuō)明:在給定的父元素下匹配所有子元素.注意:要區(qū)分好后代元素與子元素3、prev+next

用法:$(”label+input”);返回值集合元素說(shuō)明:匹配所有緊接在prev元素后的next元素4、prev~siblings

用法:$(”form~input”);返回值集合元素說(shuō)明:匹配prev元素之后的所有siblings元素.注意:是匹配之后的元素

層次選擇器練習(xí)改變<body>內(nèi)所有

<div>的背景色為#0000FF改變<body>內(nèi)子

<div>的背景色為#FF0033改變id為one的下一個(gè)

<div>的背景色為#0000FF改變id為two的元素后面的所有兄弟<div>的元素的背景色為##0000FF緊接相鄰選擇器prev+next可以使用next()方法替代后面相鄰兄弟選擇器prev~siblings可以使用nextAll()方法替代選擇前后相鄰兄弟可以使用siblings()方法過(guò)濾選擇器過(guò)濾選擇器主要是通過(guò)特定的過(guò)濾規(guī)則來(lái)篩選出所需的DOM元素,該選擇器都以“:”開頭按照不同的過(guò)濾規(guī)則,過(guò)濾選擇器可以分為基本過(guò)濾,內(nèi)容過(guò)濾,可見性過(guò)濾,屬性過(guò)濾,子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器.基礎(chǔ)過(guò)濾選擇器1、:first

用法:$(”tr:first”);返回值單個(gè)元素的組成的集合說(shuō)明:匹配找到的第一個(gè)元素2、:last

用法:$(”tr:last”)返回值集合元素說(shuō)明:匹配找到的最后一個(gè)元素.與:first相對(duì)應(yīng).3、:not(selector)

用法:$(”input:not(:checked)”)返回值集合元素說(shuō)明:去除所有與給定選擇器匹配的元素.有點(diǎn)類似于”非”,意思是沒(méi)有被選中的input(當(dāng)input的type=”checkbox”).4、:even

用法:$(”tr:even”)返回值集合元素

說(shuō)明:匹配所有索引值為偶數(shù)的元素，從0開始計(jì)數(shù).js的數(shù)組都是從0開始計(jì)數(shù)的.例如要選擇table中的行,因?yàn)槭菑?開始計(jì)數(shù),所以table中的第一個(gè)tr就為偶數(shù)0.5、:odd

用法:$(”tr:odd”)返回值集合元素

說(shuō)明:匹配所有索引值為奇數(shù)的元素,和:even對(duì)應(yīng),從0開始計(jì)數(shù).基礎(chǔ)過(guò)濾選擇器6、:eq(index)

用法:$(”tr:eq(0)”)返回值集合元素說(shuō)明:匹配一個(gè)給定索引值的元素.eq(0)就是獲取第一個(gè)tr元素.括號(hào)里面的是索引值,不是元素排列數(shù).7、:gt(index)

用法:$(”tr:gt(0)”)返回值集合元素說(shuō)明:匹配所有大于給定索引值的元素.8、:lt(index)

用法:$(”tr:lt(2)”)返回值集合元素說(shuō)明:匹配所有小于給定索引值的元素.9、:header(固定寫法)

用法:$(”:header”).css(”background”,“#EEE”)返回值集合元素說(shuō)明:匹配如h1,h2,h3之類的標(biāo)題元素.這個(gè)是專門用來(lái)獲取h1,h2這樣的標(biāo)題元素.10、:animated(固定寫法)

返回值集合元素說(shuō)明:匹配所有正在執(zhí)行動(dòng)畫效果的元素

基礎(chǔ)過(guò)濾選擇器練習(xí)改變第一個(gè)div元素的背景色為#0000FF改變最后一個(gè)div元素的背景色為#0000FF改變class不為one的所有div元素的背景色為#0000FF改變索引值為偶數(shù)的div元素的背景色為#0000FF改變索引值為奇數(shù)的div元素的背景色為#0000FF改變索引值為大于3的div元素的背景色為#0000FF改變索引值為等于3的div元素的背景色為#0000FF改變索引值為小于3的div元素的背景色為#0000FF改變所有的標(biāo)題元素的背景色為#0000FF改變當(dāng)前正在執(zhí)行動(dòng)畫的所有元素的背景色為#0000FFfunctioncartoon(){//執(zhí)行動(dòng)畫的方法

$("#mover").slideToggle("normal",cartoon);}cartoon();內(nèi)容過(guò)濾選擇器內(nèi)容過(guò)濾選擇器的過(guò)濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上1、:contains(text)

用法:$(”div:contains(’John’)”)返回值集合元素說(shuō)明:匹配包含給定文本的元素.這個(gè)選擇器比較有用，當(dāng)我們要選擇的不是dom標(biāo)簽元素時(shí),它就派上了用場(chǎng)了,它的作用是查找被標(biāo)簽”圍”起來(lái)的文本內(nèi)容是否符合指定的內(nèi)容的.2、:empty

用法:$(”td:empty”)返回值集合元素說(shuō)明:匹配所有不包含子元素或者文本的空元素3、:has(selector)

用法:$(”div:has(p)”).addClass(”test”)返回值集合元素說(shuō)明:匹配含有選擇器所匹配的元素的元素.這個(gè)解釋需要好好琢磨,但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標(biāo)簽加上class=”test”.4、:parent

用法:$(”td:parent”)返回值集合元素說(shuō)明:匹配含有子元素或者文本的元素.注意:這里是”:parent”,可不是”.parent”哦!感覺(jué)與上面講的”:empty”形成反義詞.內(nèi)容過(guò)濾選擇器練習(xí)改變含有文本‘di’的div元素的背景色為#0000FF改變不包含子元素(或者文本元素)的div空元素的背景色為#0000FF改變含有class為mini元素的div元素的背景色為#0000FF改變含有子元素(或者文本元素)的div元素的背景色為#0000FF改變不含有文本di;的div元素的背景色$("div:not(:contains('di'))").css("background","#FF0033");可見性過(guò)濾選擇器可見性過(guò)濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來(lái)選擇相應(yīng)的元素1、:hidden

用法:$(”tr:hidden”)返回值集合元素說(shuō)明:匹配所有的不可見元素，input元素的type屬性為“hidden”的話也會(huì)被匹配到.

css中display:none的都會(huì)被匹配到.

2、:visible

用法:$(”tr:visible”)返回值集合元素說(shuō)明:匹配所有的可見元素.可見性過(guò)濾選擇器練習(xí)改變所有可見的div元素的背景色為#0000FF選取所有不可見的元素,利用jQuery中的show()方法將它們顯示出來(lái),并設(shè)置其背景色為#0000FF選取所有的文本隱藏域,并打印它們的值屬性過(guò)濾選擇器屬性過(guò)濾選擇器的過(guò)濾規(guī)則是通過(guò)元素的屬性來(lái)獲取相應(yīng)的元素1、[attribute]

用法:$(”div[id]“);返回值集合元素說(shuō)明:匹配包含給定屬性的元素.例子中是選取了所有帶”id”屬性的div標(biāo)簽.2、[attribute=value]

用法:$(”input[name='newsletter']“).attr(”checked”,true);返回值集合元素說(shuō)明:匹配給定的屬性是某個(gè)特定值的元素.例子中選取了所有name屬性是newsletter的input元素.3、[attribute!=value]

用法:$(”input[name!='newsletter']“).attr(”checked”,true);返回值集合元素說(shuō)明:匹配所有不含有指定的屬性，或者屬性不等于特定值的元素.此選擇器等價(jià)于:not([attr=value]),要匹配含有特定屬性但不等于特定值的元素,請(qǐng)使用[attr]:not([attr=value]).之前看到的:not派上了用場(chǎng).4、[attribute^=value]

用法:$(”input[name^=‘news’]“)返回值集合元素說(shuō)明:匹配給定的屬性是以某些值開始的元素.屬性過(guò)濾選擇器5、[attribute$=value]

用法:$(”input[name$=‘letter’]“)返回值集合元素

說(shuō)明:匹配給定的屬性是以某些值結(jié)尾的元素.6、[attribute*=value]

用法:$(”input[name*=‘man’]“)返回值集合元素說(shuō)明:匹配給定的屬性是以包含某些值的元素.7、[attributeFilter1][attributeFilter2][attributeFilterN]

用法:$(”input[id][name$=‘man’]“)返回值集合元素說(shuō)明:復(fù)合屬性選擇器,需要同時(shí)滿足多個(gè)條件時(shí)使用.又是一個(gè)組合,這種情況我們實(shí)際使用的時(shí)候很常用.這個(gè)例子中選擇的是所有含有id屬性,并且它的name屬性是以man結(jié)尾的元素.屬性過(guò)濾選擇器練習(xí)選取下列元素,改變其背景色為#0000FF含有屬性title的div元素.屬性title值等于"test"的div元素.屬性title值不等于"test"的div元素(沒(méi)有屬性title的也將被選中).屬性title值以"te"開始的div元素.屬性title值以"est"結(jié)束的div元素.屬性title值含有"es"的div元素.選取有屬性id的div元素，然后在結(jié)果中選取屬性title值含有“es”的div元素.子元素過(guò)濾選擇器1、:nth-child(index/even/odd)

用法:$(”ulli:nth-child(2)”)返回值集合元素

說(shuō)明:匹配其父元素下的第N個(gè)子或奇偶元素.這個(gè)選擇器和之前說(shuō)的基礎(chǔ)過(guò)濾中的eq()有些類似,不同的地方就是前者是從0開始,后者是從1開始.2、:first-child

用法:$(”ulli:first-child”)返回值集合元素

說(shuō)明:匹配第一個(gè)子元素.’:first’只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹配一個(gè)子元素.這里需要特別點(diǎn)的記憶下區(qū)別.3、:last-child

用法:$(”ulli:last-child”)返回值集合元素

說(shuō)明:匹配最后一個(gè)子元素.’:last’只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹配一個(gè)子元素.4、:only-child

用法:$(”ulli:only-child”)返回值集合元素

說(shuō)明:如果某個(gè)元素是父元素中唯一的子元素,那將會(huì)被匹配.如果父元素中含有其他元素,那將不會(huì)被匹配.意思就是:只有一個(gè)子元素的才會(huì)被匹配!子元素過(guò)濾選擇器nth-child()選擇器詳解如下：(1):nth-child(even/odd):能選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素(2):nth-child(2):能選取每個(gè)父元素下的索引值為2的元素(3):nth-child(3n):能選取每個(gè)父元素下的索引值是3的倍數(shù)的元素(3):nth-child(3n+1):能選取每個(gè)父元素下的索引值是3n+1的元素子元素過(guò)濾選擇器練習(xí)選取下列元素,改變其背景色為#0000FF每個(gè)class為one的div父元素下的第2個(gè)子元素.每個(gè)class為one的div父元素下的第一個(gè)子元素每個(gè)class為one的div父元素下的最后一個(gè)子元素如果class為one的div父元素下的僅僅只有一個(gè)子元素，那么選中這個(gè)子元素表單對(duì)象屬性過(guò)濾選擇器此選擇器主要對(duì)所選擇的表單元素進(jìn)行過(guò)濾1、:enabled

用法:$(”input:enabled”)返回值集合元素

說(shuō)明:匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不為disabled,當(dāng)然就為enabled啦.2、:disabled

用法:$(”input:disabled”)返回值集合元素

說(shuō)明:匹配所有不可用元素.與上面的那個(gè)是相對(duì)應(yīng)的.3、:checked

用法:$(”input:checked”)返回值集合元素說(shuō)明:匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option).這話說(shuō)起來(lái)有些繞口.4、:selected

用法:$(”selectoption:selected”)返回值集合元素

說(shuō)明:匹配所有選中的option元素.表單對(duì)象屬性過(guò)濾選擇器練習(xí)利用jQuery對(duì)象的val()方法改變表單內(nèi)可用<input>元素的值利用jQuery對(duì)象的val()方法改變表單內(nèi)不可用<input>元素的值利用jQuery對(duì)象的length屬性獲取多選框選中的個(gè)數(shù)利用jQuery對(duì)象的text()方法獲取下拉框選中的內(nèi)容

$("selectoption:selected").each(function(){alert($(this).text());});表單選擇器1、:input

用法:$(”:input”);返回值集合元素說(shuō)明:匹配所有input,textarea,select和button元素

2、:text

用法:$(”:text”);返回值集合元素

說(shuō)明:匹配所有的單行文本框.3、:password

用法:$(”:password”);返回值集合元素說(shuō)明:匹配所有密碼框.4、:radio

用法:$(”:radio”);返回值集合元素說(shuō)明:匹配所有單選按鈕.5、:checkbox

用法:$(”:checkbox”);返回值集合元素

說(shuō)明:匹配所有復(fù)選框6、:submit

用法:$(”:submit”);返回值集合元素說(shuō)明: