Jquery实用笔记
一, JQuery的用法?
?? 1. 首先要下載Jquery的js文件,并在需要使用JQuery的html文件的<head>標(biāo)簽加載該js文件 :?
??????? <script type="text/javascript" src="js/jquery.js"></script>?
??????? 并在下一行輸入JQuery代碼 : <script>JQuery代碼 </script>?
??? 2. JQuery代碼都要從如下代碼開始 :?
??????? 完整寫法 : $(document).ready(function(){ JQuery代碼 })?
??????? 簡(jiǎn)略寫法 : $(function(){ JQuery代碼 })?
??? 3. JQuery代碼中 "$" 符號(hào)的四種應(yīng)用?
??????? (1) $(function(){}) : JQuery代碼的開始?
??????? (2) $(selector) : 在html中查找標(biāo)簽和屬性(JQuery選擇器)?
??????? (3) $(dom element) : 將javascript中通過documentElementById()方法得到的DOM對(duì)象轉(zhuǎn)換成JQuery對(duì)象,?
??????????????????????????????????????? 這樣才能繼續(xù)使用JQuery的各種方法?
??????? (4) $(html) : 將html轉(zhuǎn)換成JQuery對(duì)象.? 例: $("<p>i love you</p>")?
??? 4. JQuery中最重要的用法 , $(selector).action() : 給查找到的html元素添加事件 .?
??????? (1) 其中的 selector 選擇器包括以下四大類內(nèi)容 :?
??????????? ①基本選擇器 :?
??????????????? a. 標(biāo)簽選擇器("div"): 選擇所有的div標(biāo)簽?
??????????????? b. id選擇器("#123"): 選擇屬性中 id的值等于123的標(biāo)簽?
??????????????? c. class選擇器(".123"): 選擇屬性中 class的值等于123的標(biāo)簽?
??????????????? d. 并集選擇器("p,div"): 選擇所有的p標(biāo)簽和div標(biāo)簽?
??????????????? e. 交集選擇器("div.123") : 選擇標(biāo)簽的class屬性等于123的div標(biāo)簽,??
??????????????? f.? 全局選擇器("*"), 選擇所有的標(biāo)簽?
??????????? ②層次選擇器 :?
??????????????? a. 后代選擇器("ul li"): 選擇ul下的所有l(wèi)i (包括指定標(biāo)簽下的所有標(biāo)簽,包括兒子和孫子等等)?
??????????????? b. 子選擇器("ul>li"): 選擇ul標(biāo)簽的兒子標(biāo)簽li(只包括指定標(biāo)簽的兒子層,不包括孫子等)?
??????????????? c. 相鄰選擇器("ul+p"): 選擇ul標(biāo)簽其后的相鄰的同輩p標(biāo)簽(必須是其后并緊挨相鄰的同輩標(biāo)簽)?
??????????????? d. 同輩選擇器("ul~p"): 選擇ul標(biāo)簽其后的所有同輩p標(biāo)簽(ul后面的所有同輩的p標(biāo)簽)?
??????????? ③屬性選擇器 ([ ]) :?
??????????????? a. 選取含有該屬性的標(biāo)簽("div[id]"): 選取包含id屬性的div標(biāo)簽?
??????????????? b. 選取屬性值等于給定值的標(biāo)簽("div[id='123']"): 選取屬性值等于123的div標(biāo)簽?
??????????????? c. 選取屬性值不等于給定值的標(biāo)簽("div[id!='123']"): 選取屬性值不等于123的div標(biāo)簽?
??????????????? d. 選取屬性值以給定值開頭的標(biāo)簽("div[id^='123']"): 選取屬性值以123開頭的div標(biāo)簽?
??????????????? e. 選取屬性值以給定值結(jié)尾的標(biāo)簽("div[id$='123']"): 選取屬性值以123結(jié)尾的div標(biāo)簽?
??????????????? f. 選取屬性值包含給定值的標(biāo)簽("div[id*='123']"):選取屬性值包含123的div標(biāo)簽?
??????????????? g. 選取多個(gè)屬性都符合給定值的標(biāo)簽("div[id][class='123']"): 選取包含id屬性并且class屬性等于123的div標(biāo)簽?
??????????? ④過濾選擇器 ( : ) :?
??????????????? a. 選取選擇的第一個(gè)標(biāo)簽("ul li:first"): 選取ul下的第一個(gè)li標(biāo)簽?
??????????????? b. 選取選擇的最后一個(gè)標(biāo)簽("ul li:last"): 選取ul下的最后一個(gè)li標(biāo)簽?
??????????????? c. 選取選擇的奇數(shù)標(biāo)簽("ul li:odd"): 選取ul下的所有奇數(shù)li標(biāo)簽(標(biāo)簽從零開始,所以第一個(gè)標(biāo)簽是偶數(shù))?
?????????????? d. 選取選擇的奇數(shù)標(biāo)簽("ul li:even"): 選取ul下的所有偶數(shù)li標(biāo)簽(標(biāo)簽從零開始,所以第一個(gè)標(biāo)簽是偶數(shù))?
??????????????? e: 反選標(biāo)簽("p:not(.a)"): 選取class屬性為a的p標(biāo)簽以外的其余p標(biāo)簽?
??????????????? f: 標(biāo)題標(biāo)簽(":header"): 選取所有的h1--h6的標(biāo)題標(biāo)簽?
??????????????? g: 選取獲得焦點(diǎn)的標(biāo)簽("input:focus"): 選取獲得焦點(diǎn)的所有input標(biāo)簽?
??????????????? h: 選取索引等于給定值的標(biāo)簽("ul li:eq(0)"): 選取ul標(biāo)簽下的索引為0的li標(biāo)簽,即第一個(gè)li標(biāo)簽?
??????????????? i: 選取索引大于給定值的標(biāo)簽("ul li:gt(1)"): 選取ul標(biāo)簽下的索引大于1的li標(biāo)簽, 即從第三個(gè)以后的li標(biāo)簽?
??????????????? j: 選取索引小于給定值的標(biāo)簽("ul li:lt(2)"): 選取ul標(biāo)簽下的索引小于1的li標(biāo)簽, 即前兩個(gè)li標(biāo)簽?
??????????????? k: 選取所有的隱藏標(biāo)簽(":hidden"): 選取所有的隱藏的標(biāo)簽 (即type="hidden")?
??????????????? l: 選取所有的可見的元素(":visible"): 選取所有可見的元素 (即沒有type="hidden")?
??????? (2)action中包含的內(nèi)容?
??????????? ①. 鼠標(biāo)事件?
??????????????? a. click(): 鼠標(biāo)的點(diǎn)擊事件?
??????????????? b. mouseover(): 鼠標(biāo)的滑過事件?
??????????????? c. mouseout(): 鼠標(biāo)的離開事件?
??????????????? d. hover(): mouseover和mouseout的復(fù)合事件, 這時(shí)會(huì)有兩個(gè)function(){}參數(shù)?
???????????? ②.鍵盤事件?
??????????????? a. keypress(): 會(huì)在敲擊按鍵時(shí)觸發(fā),我們可以理解為按下并抬起同一個(gè)按鍵?
??????????????? b. keydown(): 鍵盤按下時(shí)觸發(fā). (keyCode==13時(shí)代表按下 Enter 鍵)?
??????????????????? 例: $(document).keydown(function(event){?
??????????????????????????????? //判斷當(dāng)event.keyCode 為37時(shí)（即左方面鍵），執(zhí)行函數(shù)to_left();?
??????????????????????????????? //判斷當(dāng)event.keyCode 為39時(shí)（即右方面鍵），執(zhí)行函數(shù)to_right();?
??????????????????????????????? if(event.keyCode == 37){?
??????????????????????????????????? to_left();?
??????????????????????????????? }else if (event.keyCode == 39){?
??????????????????????????????????? to_right();?
??????????????????????????????? }?
????????????????????????? });?
??????????????? c. keyup(): 鍵盤釋放時(shí)觸發(fā)?
??????????? ③.動(dòng)畫事件?
??????????????? a. show(), hide() : 參數(shù)是響應(yīng)事件, 毫秒為單位?
??????????????? b. toogle(): 復(fù)合事件, show和hide的復(fù)合事件?
??????????????? b. fadein(), fadeout(): 參數(shù)是響應(yīng)事件, 毫秒為單位?
??????????????? c. slidedown(), slideup(): 參數(shù)是響應(yīng)事件, 毫秒為單位?
??????????? ④. DOM操作?
??????????????? a. val(), val("") : 不帶參數(shù)表示獲取標(biāo)簽的value屬性值, 帶參數(shù)表示設(shè)置該值?
??????????????? b. text(), text("") : 設(shè)置或獲取被選元素的文本內(nèi)容(innerText)?
??????????????? c. html(), html("") : 返回或設(shè)置被選元素的內(nèi)容(innerHTML)?
??????????????? d. css(""), css("", "") : 返回或者設(shè)置元素的樣式?
??????????????? e. addClass(""), removeClass(""), toogleClass("") : 添加樣式; 移除樣式; 復(fù)合操作(添加或移除)?
?????????????? f. append(), appendTo(), prepend(), prependTo() : 在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容(append,appendTo); 在被選元素的開頭(仍然在內(nèi)部)插入指定內(nèi)容(prepend, prependTo); 帶To和不帶To的區(qū)別: 如果是A append B 和 A appendTo B, 前者是B插入A內(nèi)部的尾部, 后者是A插入B內(nèi)部的尾部.?
??????????????? g. after(), insertafter(), before(), insertbefore() : A insertafter B 表示將A插入到B(selector)之后; A after B 表示將B插入A(selector)之后?
??????????????? h. replaceWith(), replaceAll() : A(selector) replaceWith B, B替換A; A replaceAll B(selector), A替換B?
??????????????? i. clone() : 生成被選元素的副本, 包括子節(jié)點(diǎn), 文本和屬性. 參數(shù)為boolean, 意思是是否復(fù)制事件?
??????????????? j. attr(""), attr("", "") : 獲取或者設(shè)置屬性的值.?
??????????????? k. empty() : 將指定元素中的所有內(nèi)容全部清除,包括文本和子元素?
?????????????? l. remove(), detach() : 都是刪除指定元素, 刪除之后開可以還原. 還原的內(nèi)容不同: remove()只能還原元素本身,不能還原JQuery數(shù)據(jù),事件和附加的數(shù)據(jù)等; detach()不但可以還原標(biāo)簽,還可以還原事件和附加的數(shù)據(jù)等?
???????????????? m. childern() : 只能查找兒子元素?
??????????????? n. find() : 能查找所有的后代元素?
??????????????? o. next(), nextAll(), nextUtil(4) : 同輩元素的查找, 下一個(gè), 后面的所有, 后面直到第4個(gè).?
??????????????? p. prev(), prevAll(), prevUtil(4) : 同輩元素的查找, 上一個(gè), 前面的所有, 前面直到第4個(gè).?
??????????????? q. parent() : 只能查找父親節(jié)點(diǎn)?
??????????????? r. parents() : 查找所有的前輩節(jié)點(diǎn)?
??? 5.使用JQuery完成異步請(qǐng)求 :?
??????? (1) 書寫形式 : $.ajax({ 參數(shù) })?
??????? (2) 詳細(xì)描述 : $.ajax({ 參數(shù) })是JQuery提供的一個(gè)函數(shù),這個(gè)函數(shù)實(shí)現(xiàn)了對(duì)ajax的請(qǐng)求,并且?guī)椭_發(fā)者完成了具體細(xì)節(jié)的工作, 比如瀏覽器的兼容性, post請(qǐng)求頭部的設(shè)置等. 開發(fā)者只需要把所有的參數(shù)組裝成一個(gè)對(duì)象當(dāng)做這個(gè)函數(shù)的一個(gè)參數(shù)傳入即可.?
??????? (3) 參數(shù) :?
??????????? a. type : get 或者 post?
??????????? b. url : 請(qǐng)求鏈接地址?
??????????? c. async : 是否異步?
??????????? d. success(function(data){}) : 請(qǐng)求成功后服務(wù)器給客戶端傳遞的數(shù)據(jù), 通過data變量傳遞.?
??????????? e. error : 出錯(cuò)后的處理方式?
??????????? f. data : post請(qǐng)求的時(shí)候才有, 是瀏覽器給服務(wù)器傳遞的參數(shù)?
??????????? g. beforesend : 發(fā)出請(qǐng)求之前執(zhí)行的內(nèi)容?
??????????? h. complete : 完成請(qǐng)求之后執(zhí)行的內(nèi)容?
??????? (4)注意 : 若發(fā)生ajax請(qǐng)求的資源和url指向的網(wǎng)絡(luò)資源不再同一個(gè)服務(wù)器中, 直接訪問, 請(qǐng)求能夠到達(dá),但是服務(wù)器的安全機(jī)制造成會(huì)在客戶端報(bào)錯(cuò),無法正常獲取數(shù)據(jù), 我們需要的服務(wù)器端設(shè)置兩個(gè)響應(yīng)頭:?
??????????????? response.setHeader("Access-Control-Allow-Origin", "*"); 表示其他域下的ajax請(qǐng)求都能訪問本服務(wù)器?
??????????????? response.setHeader("Access-Control-Allow-Methods", "POST, GET"); 允許的請(qǐng)求方式
總結(jié)
以上是生活随笔為你收集整理的Jquery实用笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 颜色搭配表
- 下一篇： express中res.json方法