2012播客jquery課程-第一天第一課輕松學(xué)習(xí)

目一．jquery簡(jiǎn)二．javascript與jquery之間的關(guān)三．jQuery基礎(chǔ)語四．jQuery選擇器、操作頁面文檔元JQuery–就是1個(gè)js ess,DoMore。寫得少，做得多瀏覽器差異跨瀏覽器兼容性好（IE6.0FF2+SafariOpera9.0+,（在jQuery之前也是一種類庫(kù)）后者是jQuery。菜譜里面都集JQuery在做所有事情之前,我們要讓jQuery和處理文檔的DOM,必 在這里寫你的代碼

$(function()在這里寫你的代碼 alert(" 當(dāng)頁面Dom$(function()alert("和onload類似，但是onload只 的 JQuery的ready和Dom的onload的區(qū)別(*)：onload是所有Dom元素創(chuàng)建完畢、圖什么是jQueryjQuery對(duì)象就是通過jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象jQuery對(duì)象jQuery獨(dú)有的如果一個(gè)對(duì)象jQuery對(duì)象么它就可以使用jQuery里的方法:比如st.htm() 意思是指：獲取ID為test的元素內(nèi)的m代碼。m()是jQr里的方法這段代碼等同于用DOM實(shí)現(xiàn)代碼 雖然jQu對(duì)象是包裝OM對(duì)象后產(chǎn)生的，但是jQu無法使用OM對(duì)象的任何方法，同理M對(duì)象也不能使用ju里的方法亂使用會(huì)報(bào)錯(cuò)約定：如果獲取的是jQuery對(duì)象,那么要在變量前面加上var$variablejQuery對(duì)varvariableDOM對(duì)DOM對(duì)象轉(zhuǎn)成jQueryO對(duì)象，只需要用)把O對(duì)象包裝起來，就可jQr對(duì)象了。DOM對(duì)象)jQueryjQuery對(duì)象轉(zhuǎn)成DOM對(duì)(1)jQuery對(duì)象是一個(gè)數(shù)組對(duì)象，可以通過[index]的方法，來得到應(yīng)的DOM對(duì)(2)jQuery本身提供，通過.get(index)方法，得到相應(yīng)的DOM對(duì) 等價(jià) jQuery選擇器是jQuery的根基jQuery中對(duì)事件處理DOMAjax操作都依賴于選擇jQuery選擇器的優(yōu)點(diǎn)簡(jiǎn)潔的寫完善的事件處理機(jī)jQuery//若網(wǎng)頁中沒有id=value的元素,瀏覽器會(huì) //需要判 ementById("username")是否存 var alert("沒有該id元素}//使用JQUERYvaralert("^^^//注意:在javaScript中函數(shù)返回值為空,表示JQuery選擇器用于查找滿足條件的元素基本選擇器是JQuery中最常用的選擇器,也是最簡(jiǎn)單的選擇器,元素id,class和tagName來查找dom元1.$("#id"):id選擇器 3.$(".myClass"):類選擇器,返回所有class="myClass"的元4.$("*"):返回所有元素,多用于結(jié)合上下文5.$("div,span,p.myClass"):多條件選擇器,返回所有查到的元idoneclassmini<div改變所有的<span>idtwo如果想通過DOM 間的層次關(guān)系來獲取特定元素,例如后代元素,子元素相鄰元素兄弟元素等則需要使用層次選擇器1、ancestor用法:$(”forminput”) 返回值集合元說明:在給定的祖先元素下匹配所有后代元素.這個(gè)要與下面講的”parent2、parent用法:$(”form>input”) 返回值集合元說明:在給定的父元素下匹配所有子元素.注意:要區(qū)分好后代元素與子元3、prev用法:$(”label+input”); 返回值集合元素說明:匹配所有緊接在prev元素后的next元素4、prev~用法:$(”form~input”) 返回值集合元說明:匹配prev 后的所有siblings元素.注意:是匹配之后的元idone的下一<div的背景色為改變idtwo的元素后面的所有兄弟<div>的元素的背景色為緊接相鄰選擇器prev+next可以使用next()方法替后面相鄰兄弟選擇器prev~siblings可以使用nextAll()方法替選擇前后相鄰兄弟可以使用siblings()方過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的DOM元素,該選擇器:”開頭按照不同的過濾規(guī)則過濾選擇器可以分為基本過濾內(nèi)容過濾,可見性過濾屬性過濾子元素過濾和表單對(duì)象屬性過濾選擇器.1、用法:$(”tr:first”) 返回值單個(gè)元素的組成的集說明:2、用法: 返回值集合元說明:匹配找到的最后一個(gè)元素.與:first相對(duì)應(yīng)3、用法$(”input:not(:checked)”)說明:去除所有與給定選擇器匹配的元素.有點(diǎn)類似于”非”,意思是沒有被選中的input(input的4、用法: 返回值集合元說明:0開始計(jì)數(shù).js的數(shù)組都是從0開始計(jì)數(shù)的.選擇table中的行,因?yàn)槭菑?開始計(jì)數(shù),所以table中的第一個(gè)tr就為偶數(shù)5、用法$(”tr:odd返回值集合元素說明:匹配所有索引值為奇數(shù)的元素,和:even對(duì)應(yīng),0開始計(jì)數(shù)6、用法: 返回值集合元說明:匹配一個(gè)給定索引值的元素.eq(0)就是獲取第一個(gè)tr元素.括號(hào)里面的是索引值,不是7、用法: 返回值集合元說明:匹配所有大于給定索引值的元素8、用法: 返回值集合元說明:匹配所有小于給定索引值的元素9、:header(固定寫法用法:$(”:header”).css(”background”, 返回值集合元說明h1,h2,h3之類的標(biāo)題元素.這個(gè)是專門用來獲取h1,h2這樣的標(biāo)題元素10、:animated(固定寫法 返回值集合元說明:divdiv改變classonedivdivdiv3div3div3divfunctionfunctioncartoon(){//}內(nèi)容過濾選擇器的過濾規(guī)則主要1、用法: 返回值集合元說明:匹配包含給定文本的元素.這個(gè)選擇器比較有用，當(dāng)我們要選擇的不是 2、用法: 返回值集合元說明:3、用法: 返回值集合元說明:匹配含有選擇器所匹配的元素的元素.這個(gè)解釋需要好好琢磨,使用的例子就完全清楚了:給所有包含p元素的 加上4、用法: 返回值集合元說明:匹配含有子元素或者文本的元素.注意:這里是”:parent”,哦!感覺與上面講的”:empty”形成反義詞改變含有文本di’div元素的背景色為改變不包含子元素(或者文本元素)的div空元素的背景色改變含有classmini元素的div元素的背景色為改變含有子元素(或者文本元素)的div元素的背景色為可見性過濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來選1、用法$(”tr:hidden”)返回值集合元說明匹配所有的不可見元素，inputtype屬性為“hidden”的話也會(huì)被匹配到.css中display:none的都會(huì)2、用法$(”tr:visible”)返回值集合元說明:匹配所有的可見元素改變所有可見的div元素的背景色為選取所有不可見的元素利用jQuery中的show方法將它們顯示出來,并設(shè)置其背景色為#0000FF選取所有的文本隱藏域,并打印它們的1、用法$(”div[id說明:匹配包含給定屬性的元素.例子中是選取了所有帶”id”屬性的 2、 返回值集合元說明:匹配給定的屬性是某個(gè)特定值的元素.例子中選取了所有namenewsletterinput元素3、 返回值集合元說明:匹配所有不含有指定的屬性，或者屬性不等于特定值的元素.此選擇器等價(jià)[attr]:not([attr=value]).:not派上了用場(chǎng).4、用法$(”input[name^=‘news’]“)說明:匹配給定的屬性是以某些值開始的元素5、用法$(”input[name$=‘letter’]“)返回值集合元素說明:匹配給定的屬性是以某些值結(jié)尾的元素6、用法: 返回值集合元說明:匹配給定的屬性是以包含某些值的元素7、用法$(”input[id][name$=‘man’]“)說明:復(fù)合屬性選擇器,需要同時(shí)滿足多個(gè)條件時(shí)使用.又是一個(gè)組合,這種情況我們實(shí)際使用的時(shí)候很常用.這個(gè)例子中選擇的是所有含有id屬性,并且它的name屬性是man結(jié)尾的元素.選取下列元素,改變其背景色為含有屬性title的div元素屬性title值等于"test"的div元素屬性title值不等于"test"的div元素(沒有屬性title的也將被選中屬性title值以"te"開始的div元素屬性title值以"est"結(jié)束的div元素屬性title值含有"es"的div元素選取有屬性id的div元素，然后在結(jié)果中選取屬性title值含有“es”div元素1、:nth-用法:$(”ulli:nth- 返回值集合元說明:匹配其父元素下的第N個(gè)子或奇偶元素.的eq()有些類似,不同的地方就是前者是從0開始,后者是從1開始用法:$(”ulli:first- 返回值集合元說明:匹配第一個(gè)子元素.’:first’只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹 用法:$(”ulli:last- 返回值集合元說明:匹配最后一個(gè)子元素.’:last’只匹配一個(gè)元素,而此選擇符將為每個(gè)父元素匹4、only-用法:$(”ulli:only- 返回值集合元說明:如果某個(gè)元素是父元素中唯一的子元素,那將會(huì)被匹配.其他元素,那將不會(huì)被匹配.意思就是:只有一個(gè)子元素的才會(huì)被匹配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(3n1能選取每個(gè)父元素下的索引值3n1的元選取下列元素,改變其背景色為每個(gè)class為one的div父元素下的第2個(gè)子元素每個(gè)class為one的div父元素下的第一個(gè)子元每個(gè)class為one的div父元素下的最后一個(gè)子元如果css為的父元素下的僅僅只有一個(gè)子元素，那么選中這個(gè)子元素此選擇器主要對(duì)所選擇的表單元素進(jìn)行過1、用法: 返回值集合元說明匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”2、用法: 返回值集合元說明:匹配所有不可用元素.與上面的那個(gè)是相對(duì)應(yīng)的3、用法: 返回值集合元說明:匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中option).這話說起來有些繞口4、用法:$(”select 返回值集合元說明:匹配所有選中的option元素利用jQuery對(duì)象val()方法改變表單內(nèi)可用<input>元素的利用jQuery對(duì)象的val()方法改變表單內(nèi)不可用<input>元素值利用jQuery對(duì)象的length屬性獲取多選框選中的個(gè)利用jQuery對(duì)象的text()方法獲取下拉框選中的內(nèi)$("select$("select1、用法:$(”:input”) 返回值集合元說明:匹配所input,textareaselectbutton元<inputtype="text"<inputtype="text"<inputtype="radio"<inputtype="password"<inputtype="button"<scriptalert($(":button").length);//得到所有的buttonalert($("button").length);//得到<button/>按照元 alert($("input[type='button']").length);//得<inputtype="button"用法$(”:text說明:匹配所有的單行文本框3、用法:$(”:password返回值集合元素說明:匹配所 框4、用法:$(”:radio返回值集合元素說明:匹配所有單選按鈕5、用法$(”:checkbox返回值集合元素說明:匹配所有復(fù)選6、用法:$(”:submit”) 返回值集合元說明:匹配所有提交按鈕7、用法: 返回值集合元說明:匹配所有圖像域8、用法$(”:reset返回值集合元素說明:匹配所有重置按鈕9、用法$(”:bu