[TOC] ## 前言 如果你對jq的基本語法還不清楚，和我一起來熟悉一下吧，本文只摘抄了部分jq1.12.1api部分常用語法，對于其他的可以自行查閱線上文檔。 ## 歷史 在jq出現之前，曾經出現了prototype,Dojo,YUI,ExtJs,MooTools等。有興趣的可以去了解下。 而14年開始之后，出現了前端基于js的前后端分離框架，ng,vue，react他們開始占據主流的前端框架市場，為前端產品中所使用。 另外，需要提醒的是如果你的產品需要支持ie8這樣的古董瀏覽器，建議使用2.0以下的版本，因為2.0版本開始去掉了去舊版本瀏覽器的支持代碼。 ## 語法 ### 核心 * 對象訪問 each,size,length這三個比較常用，一般是針對篩選出的是多個對象的數組進行分別處理時。 ~~~ var $li=$("li") //可以拿到數組對象的長度，是屬性不是方法 var len=$li.length var len2=$li.size() //分別代表其位置，當前循環元素 $li.each(function(index,domEle){ }) ~~~ * 插件機制 ~~~ //拓展插件,this會指向當前的元素 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); //基本使用 $("input[type=checkbox]").check(); $("input[type=radio]").uncheck(); ~~~ * data 設置元素內自定義data-屬性的值以及獲取 ~~~ $("div").data("blah"); // undefined $("div").data("blah", "hello"); // blah設置為hello ~~~ * 多庫共存 ~~~ var j = jQuery.noConflict(); // 基于 jQuery 的代碼 j("div p").hide(); // 基于其他庫的 $() 代碼 $("content").style.display = 'none'; ~~~ ### 屬性 * 屬性 .attr()記憶口訣：單個獲取，一對為賦值，賦值多個用對象 ~~~ .attr("attrName") .attr("attrName","attrValue") .attr({"attrName":"attrValue","attrName2":"attrValue2"}) ~~~ 屬性 prop(key[value])，prop與attr的區別就是有些屬性只能用prop判斷，比如選擇框checked屬性，判斷方法是：必須用prop，由于原生的樣式比較丑，其實現在很多已經不是用原生屬性去做判斷了。移除屬性 removeProp("attrName") ~~~ $(".checkbox").prop("checked") $(".checkbox").prop("checked", true); $(".checkbox").prop("checked", false); ~~~ * css類 備注其中class可以為定值也可以是一個方法，返回字符串即可 ~~~ addClass(class|fn) removeClass(class|fn) toggleClass(class|fn) //根據邏輯需要 返回需要切換的class,其中切換就是變成和當前狀態相反的。 $('div.foo').toggleClass(function() { if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; } }); ~~~ * html代碼 `html(),text(),val() `,需要注意的是針對ie8不要針對不合適的標簽設置獲取值，比如$("input").text('demo'),這樣可能會報錯。 ### css * css .css()記憶口訣：單個獲取，一對為賦值，賦值多個用對象 * 位置 ~~~ offset(),設置元素相對于當前文檔的坐標 position(),返回當前元素的left，top 很少用 scrollTop(val),可以設置某元素向上滾動多少 scrollLeft(val), ~~~ * 尺寸 width(),height()比較常用 ### 選擇器 這里僅提醒大家與css選擇器不同，jq的選擇器支持范圍更廣而且沒有兼容問題，可能存在的問題就是樣式可能會有二次渲染的問題。 * 基本選擇器以及層級選擇器 （省略） * 其他常用的，建議必須會的。 :first ,:even,:odd,:last,:eq(index),:has(selector),:hidden,[attr],:nth-child(3n+1),:checked,:selected,:enabled ### 文檔處理 友情提示：你的dom結構可能是固定字符串，也可以是某匿名方法返回的，我們一般用的是固定字符串或者調用申明方法。 ~~~ append(),prepend() 分別為元素內部尾部插入以及頭部插入元素，append用的尤其多 after().before() 分別為元素外部尾部插入以及頭部插入 wrap() 吧元素包裹起來 replaceWith() 替換元素 remove()刪除 empty() 清空元素 clone() 復制元素 ~~~ ### 元素過濾 這個是指在當前元素已經確定的情況下，繼續進行相關的選擇，常用的語法有： `.eq(index),.first(),.last(),.hasClass(''),.not(sel),.find(),.parent(),.next(),.prev(),.siblings().find()` ### 事件 ready(fn),簡便寫法：$(function(){}) on() .off() 綁定事件 ，前提是這個事件必須是已有的，推薦使用，其中針對沒有的dom元素綁定事件都是必須用這種的。 .bind() .unbind() 不推薦使用 hover() 可以同時支持移入以及離開對應的事件 其他的比較常見的是click,resize,blur ,keypress ### 效果 hide(),show(),fadeIn(),fadeOut() slideDown,slideUp可以加時間或者關鍵字 .animate 可以追加更加豐富的動畫，只不過現在都通過css3動畫實現，腳本不建議寫過多的樣式了 ### ajax請求 `.ajax,.get,.post,.getJson` 需要注意的是，如果你希望你的請求方法是同步的，用ajax 設置async為false ，那么同步寫的代碼就可生效，其默認是true 異步的；或者就需要你把方法寫到success回調里面了。 如果你希望對error進行處理，可以封裝錯誤處理類，進行統一的管理。 ### 工具 `.each,.extend,.parseJson,.trim,.fn.jq`其他的不常見，可以不掌握。 ### 事件對象 event.data（觸發事件的時候可以傳遞數據）, .currentTarget,事件源對象. pageX,.pageY,當時的鼠標坐標 .preventDefault,.stopPropagation(), 阻止默認事件以及冒泡事件 .which（獲取是哪個案件） .type 事件類型 ### 其他 雖然jq已經不是主流的前端框架了，但在部分常規的項目以及一些需要兼容性較強的項目中，還是用的jq，希望你多少對這部分是熟悉的而不需要查閱文檔。 ## 常見問題與技巧 ### window.onload與jq ready區別 | 對比項 | jq | onload | | --- | --- | --- | | 寫法 | $(function(){}) |window.onload | | 次數 | 可以寫多次 | 只能一次 | | 時機 | 元素加載完，但資源比如圖片等可能未加載渲染，時機較早 | 所有資源加載完 | | 便捷性 | 可以在任何需要的時候追加新的事件，會按照順序執行| 必須寫在同一個onload方法里 | **備注：** 某些特殊情況是需要在資源包括圖片等關聯資源加載完執行的，jq也提供了相關的方法，`$(window).load(function(){})=window.onload` ### jq對象與js原生對象不可混淆 jq對象與js原生對象的方法不可混淆使用，如果你需要的話可以方便的進行轉換， ~~~ //從jq對象轉為原生對象 var oriDom=$("sel")[0] var oriDom=$("sel").get(0) //從原生對象轉為jq對象 var oriDom=document.getElmentById("sel") var $dom=$(oriDom) ~~~ ### 針對未來dom綁定事件需要on 針對尚未生成的dom結構綁定事件，直接綁定是無法生效的，需要用到on寫法 `$(".par").on("click",".sub")` ### 特殊事件 * 冒泡事件 冒泡事件是指父元素與子元素綁定了同一個事件類型，當子元素觸發時，父元素也會觸發，而你不想觸發父元素的事件，這個本來的向上事件傳遞的特性叫冒泡。如果你想避免這個事件，可以用jq特定的方法阻止。 `event.stopPropagation()` * 默認事件 某些dom元素默認的有自己的事件行為，比如a標簽的跳轉，比如submit按鈕的提交等，如果你想避免原來的系統默認行為，可以用jq的阻止默認行為方法 `event.preventDefault()` * 同時阻止默認和冒泡事件 以上兩個同時寫或者return false ### 合成事件 * hover hover(enter,leave) 可以同時支持綁定兩個事件，分別對應鼠標的移入與移出 * toggle toogle(fn1.fn2,fn3,,,,) 按照次序 ，分別執行如下的函數，用于模擬鼠標的連續點擊事件 ### 模擬事件 `.trigger("click")`,可以通過關鍵字觸發特定的事件類型，包括用戶自定義的事件。也可以直接用簡化的寫法`.click()` * 定義自定義事件,自定義事件中可以傳遞參數根據需要 ~~~ $("btn").bind("myClick",function(event,message1,message2){ console.log(message1+message2) }) ~~~ * 觸發自定義事件 `$("btn").trigger("myClick",function(event,“my”,“event type”))` ### 綁定不同的事件類型 `bind("click hover")`可以同時綁定多個事件類型 ### 篩選多個原則的元素 `$("sel1,sel2")` ### 鏈式操作 jq針對獲取到的元素可以進行鏈式操作，也可以不間斷的進行相關的元素的查找。比如下面的代碼是允許也被建議的。 ~~~ //推薦 $(selector).css().attr().addClass('classA').parent().hide() //不推薦 $(selector).css() $(selector).attr() $(selector).parent().hide() ~~~ 另外針對鏈式操作建議如下： 針對同一元素三個以上操作的，寫在同一行，如果有多個操作的，每個操作單獨一行，注意縮進；建議針對不同關聯元素的操作進行換行顯示。 ~~~ //三個以內的操作 $(selector).css().attr().addClass('classA') //同元素三個以上的操作 $(selector).css() .attr() .addClass() .fadeOut() .hide() //關聯元素的寫法 $(selector).css().attr().end() .parent().show() ~~~ ### 代碼優化建議 * 選擇的dom元素如果被用到兩次以及以上，建議命名為變量，除非dom在此間發生了變化。 * 注意使用一些jq封裝的快捷方法，比如hide(),show(),animate(),trim()，height(),width()等 * ## 參考文檔 * [jq1.12.1API](http://hemin.cn/jq/)