jquery相關筆記（三）

1.一些前端網站：http://f2er.club/ 醉牛前端-前端人的俱樂部， https://www.awesomes.cn/ 使人驚歎的前端開發資源庫， https://code.jquery.com/jquery/#jquery-all-1.x  jQuery的核心–全部版本。 2.jQuery屬性操做： ◆設置屬性：當前節點.attr(屬性名,屬性值); ◆獲取屬性：當前節點.attr(屬性名); ◆移除屬性：當前節點.removeAttr(屬性名); ★使用attr對象對bool類型值得屬性賦值時，其實並不會賦值true或者false，若是賦值爲false則是undefined，若是是true則是非udefined，因此這樣很差，可能會出現屢次賦值後失靈無效，由於這種方式不適合操做bool類型值的屬性的，因而一個新的專門針對true和false改進的方法誕生，是prop，操做方式和attr如出一轍，可是是針對bool類型值得屬性賦值的。 ◆設置屬性：當前節點.prop(屬性名,屬性值); ◆獲取屬性：當前節點.prop(屬性名); ◆移除屬性：當前節點.removeProp(屬性名); 3.表單選擇器與表單對象屬性選擇器 ◆表單選擇器【 :input  :text  :password  :radio  :checkbox  :submit  :image  :reset  :button  :file  :hidden  】 ◆表單對象屬性選擇器【 :enabled  :disabled  :checked  :selected  】 4.三種獲取設置值的方法 val()、text()、html() ◆val()：主要是用來獲取 標籤中容許擁有value的屬性的值，幾乎全部表單標籤都有value屬性值。 ◆text()：主要用來獲取標籤對中的文本內容，其實就是原生js中的innerText和textContent的兼容。 ◆html()：主要用來獲取標籤對中的文本內容或html標籤文本，很像是原生js中的innerHTML。 ★方法中不寫參數就是獲取值，方法中寫參數就是設置值。 5.獲取和設置寬高的方法 height()和width() ◆height()：只是單純的獲取css樣式中的height屬性值，與padding和border以及margin無關。 ◆width()：只是單純的獲取css樣式中的width屬性值，與padding和border以及margin無關。 ★方法中不寫參數就是獲取值（獲取的值爲純數字），方法中寫參數就是設置值，設置值的方式能夠是純數字，參數爲純數字時默認像素爲單位，參數也能夠是字符串。 6.獲取定位的距離 ◆offset().top：表示距離瀏覽器起始點（0，0）點的y軸的距離，和不管有沒有定位（maring的屬性值也算），而且offset().top獲取的都是針對瀏覽器起始點，與js原生屬性offsetTop不同，因爲不管有沒有定位都是針對瀏覽器的起始點。 ◆offset().left：表示距離瀏覽器起始點（0，0）點的x軸的距離，和不管有沒有定位（maring的屬性值也算），而且offset().left獲取的都是針對瀏覽器起始點，與js原生屬性offsetLeft不同。 ★offset()還能夠賦值，如offset({left:200,top:200})，賦值的時候其實就是設置定位時的left和top屬性值;，可是實際上它會和當前的位置上的座標值進行計算（和margin的屬性值進行減法運算），從而獲得真正的定位座標屬性left和top值，而後再進行設置。 ◆position().top：表示距離父級非靜態定位的盒子的y軸距離，這個方法其實就是獲取定位時設置的top屬性值而已與其它屬性值無關。 ◆position().left：表示距離父級非靜態定位的盒子的x軸距離，這個方法其實就是獲取定位時設置的left屬性值而已與其它屬性值無關，可能會與父容器的margin-left值相關聯。 ◆scrollTop()：表示距離元素被捲去的距離，用法$(document).scrollTop()，至關於以前封裝的scroll方法同樣scroll().scrollTop()，若是你像獲取元素被捲去的距離，可讓元素產生滾動條，這樣就可以獲取了，使用overflow:auto;獲取overflow:scroll;來產生滾動條，前提條件是，子容器要大於父容器。 ◆scrollLeft()：表示距離元素被捲去的距離，用法$(document).scrollLeft()，至關於以前封裝的scroll方法同樣scroll().scrollLeft()，若是你像獲取元素被捲去的距離，可讓元素產生滾動條，這樣就可以獲取了，使用overflow:auto;獲取overflow:scroll;來產生滾動條，前提條件是，子容器要大於父容器。 ★scrollTop()方法與scrollLeft()方法其實不光能夠獲取而且還能夠設置，內部調用了window.moveTo(x,y)的方法，不光能夠$(document).scrollLeft()，也能夠是$(window).scrollLeft()，是同樣的，由於本身封裝scroll()時就是這樣子的【 function scroll(){ return {             scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,             scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop         } } 】。 7.jQuery事件機制 ◆jQuery的事件機制，指的是：jQuery對javascript操做dom事件的封裝，包括了：事件綁定、事件解綁、事件觸發。 ◆jQuery事件的發展歷程：簡單事件綁定-->bind事件綁定-->delegate事件綁定-->on事件綁定（on最優秀，由於bind、delegate內部就是使用的on，因此on是最好的） 8.事件綁定的四種方式（其實只有兩種方式  一種非事件委託的方式、一種事件委託的方式  ） ◆簡單事件綁定【 ◇ $(".box").click(function(){}); //這種放式最爲簡單了，能夠屢次綁定，不會被後面綁定的相同的事件層疊掉，一次只可以綁定一個事件，而且沒法以指定父容器的方式給子元素綁定事件，也就是說不會進行事件委託了。 】 ◆bind事件綁定【 ◇$(".box").bind("click dbclick",function(){});//這種方式要比簡單事件綁定複雜一點，可是在jQuery1.7版本後再也不使用了，不只有簡單事件綁定的全部優勢，而且至此多事件綁定，可是依舊不能進行事件委託，由於事件委託的方式僅僅是須要依賴父容器的。 】 ◆delegate事件綁定【 ◇$(".box").delegate(null,"click dbclick",function(){});//這種方式與bind事件綁定同樣的，實際上不管是bind仍是delegate內部使用的都是on事件綁定。 ◇$(document).delegate(".box","click dbclick",function(){});//這種方式屬於事件委託的方式綁定事件 】 ◆on事件綁定 【 ◇$(".box").on("click dbclick",{age:20},function(){});//非事件委託的方式綁定事件，bind與delegate還有on都是同樣的，只不過參數有點區別而已。 ◇$(document).on("click dbclick",".box",{age:20},function(){});//事件委託的方式綁定事件，推薦使用這種，最好用了，{age:20}表示事件綁定時傳遞一個數據進去，而後事件觸發後，能夠在內部獲取這個數據，可是綁定的時候function(event){}，方法的參數裏面要加一個event或者其它形參，而後在方法內部可使用 event.data的方式獲取你傳遞進去的數據。 】 8.事件解綁的兩種方式 （非事件委託的方式與事件委託的方式） ◆事件綁定的方式有四種 分別是 簡單事件綁定、bind事件綁定、delegate事件綁定（支持事件委託）、on事件綁定(支持事件委託) ◆因爲這幾種方式綁定事件都不會被層疊掉，非指定父容器給子容器（非事件委託）的簡單事件綁定、bind事件綁定、delegate、on事件綁定可使用 對象.unbind()、對象.undelegate()、對象.off()來解綁【 ◇ $("div").unbind(); ◇$("div").undelegate(); ◇$("div").off(); 】，若是指定父容器給子容器（事件委託）的delegate和on事件綁定可使用相應的undelegate()和off()方式來解綁【 ◇$(document).undelegate("div","click dbclick");//解綁指定的元素的指定事件 ◇$(document).off("click dbclick","div");//解綁指定的元素的指定事件 ◇$(document).off("","div"); //解除指定元素的所有事件 】。 ◆事件解綁不只僅能夠解綁所有事件，也能夠針對性的解綁某一個事件，獲取某一個事件中的某一個方法，可是你綁定事件的時候，方法不能是匿名函數，否則找不到指針地址，當不解綁所有事件時，怎麼綁定的就怎麼解綁，參數差很少，如【 //綁定 $(document).delegate(".box","click blur keydown",function(e){ //事件驅動程序 }) //解綁 $(document).undelegate(".box","click"); 】 ★使用bind綁定事件會存在bug，例如雙擊事件的綁定是沒法解除的，必須使用所有解綁的方式 【 ◇ $("div").unbind(); 】纔可以解綁。 9.事件觸發的三種方式 ◆事件觸發的第一種方式其實就是 簡單事件綁定時方法不要參數，如【 $(".box").click(); $(".box").dbclick(); 】，這種方式會觸發瀏覽器的默認行爲，例如文本框獲取焦點後會有樣式的變化之類的表現。 ◆事件觸發的第二種方式使用$(".box").trigger("click dbclick");，能夠同時觸發多個事件，其實也能夠傳遞叫data的數據進去，可是不經常使用，由於on綁定事件的方式已經傳遞了data，這種方式會觸發瀏覽器的默認行爲，如超連接的點擊事件會進行默認跳轉。 ◆事件觸發的第三種方式使用$(".box").triggerHandler("click dbclick");，其實和第二種觸發方式相比只有一個區別，就是這種方式不會觸發瀏覽器的默認行爲，至關於執行完了事件中的方法後會取消默認的行爲好比return false之類的，而後超連接不跳轉了，文本框不會顯示獲取焦點後的樣式變化的表現，有一個缺點， 就是不支持事件委託的方式綁定的事件。 10.jQuery事件對象的經常使用屬性 ◆event.data：傳遞事件處理程序的額外數據 ◆event.currentTarget：等同與this，當前的dom對象 ◆event.pageX：鼠標相對與頁面文檔x軸的座標值 ◆event.pageY：鼠標相對與頁面文檔y軸的座標值 ◆event.target：觸發事件源，不必定絕對等於this，由於可能會是事件委託 ◆event.stopPropagation()：阻止事件冒泡 ◆event.preventDefault()：阻止默認行爲 ◆event.type：事件類型：click，dbclick... ◆event.which：鼠標的按鍵類型：左邊1 中間2 右邊3 ◆event.keyCode：鍵盤按鍵代碼 11.按回車就讓文本框的焦點移動到下一個文本框中，使用的是文本框的keydown事件，判斷event.keyCode碼，若是是回車鍵的碼，那麼就將焦點移動到下一個文本框中，使用的是focus()，或者select方法也行，focus只是讓下一個文本框得到焦點，而select方法會讓下一個文本框獲取焦點的同時選中下一個文本框中的內容。 12.鏈式編程的原理是，最後都會return this，可是一般狀況下，只有設置的操做才能把鏈式編程延續下去。由於獲取操做的時候，或返回獲取到的值，因此沒法返回this，因而乎，可使用end()，找到當前鏈最近的一次斷鏈以前的對象，也就是說，若是沒有返回以前那個this，能夠經過end()方法獲取到以前獲取到的那個this。 13.隱式遍歷是由於內部對jQuery對象進行了循環操做，實際上jQuery對象都是一個僞數組對象，jQuery中有顯式遍歷的方式，each和map方法，遍歷的操做方式和數組的forEach與map方法相似，內部獲取到的每個元素也是原生js的dom對象。 14.解決多庫共存方法 ◆當引入jQuery的多個版本庫時，不管使用$仍是jQuery，其實都是在使用最後一個引入的jQuery版本庫，能夠經過打印jQuery的版本號來肯定（console.log($.fn.jquery);console.log(jQuery.fn.jquery);） ◆若是你想放棄$的使用權而後將$符號使用權轉交給上一個引入的jQuery版本庫的話，可使用$.noConflict()，而後你就能夠經過調用$符號使用上一個jQuery版本庫了，而當前這一個版本庫你可使用jQuery單詞來調用 ◆若是你想放棄$符號與jQuery單詞的使用權而改用其它自定義的單詞時，可使用var customer=$.noConflict(true);，而後當前這個jQuery版本庫就可以經過調用customer單詞來使用了，而$符號與jQuery單詞的使用權歸上一個引入的jQuery版本庫使用了，可是能夠經過連續的這種方式，實現真正的n個版本的jQuery版本庫共存。 ◆jQuery版本庫的多版本庫的引入都是從低到高的引入，不推薦從高到低的引入。 15.原生js使用原型的方式是：object.prototype.functionName=function(){}，jQuery使用原型的方式是：$.fn.functionName=function(){}，其實都差很少，只不過前者是給對象擴展方法，後者是給僞數組擴展方法。 16.jquery的1.xx版本是支持IE678等低版本的瀏覽器的，而jquery的2.xx版本是不支持IE678等低版本的瀏覽器的