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