jquery相關筆記（一）

1.當瀏覽別人的頁面時，若是看見關不掉的廣告，能夠打開開發者工具，清除廣告的行內樣式、改廣告的標籤名、改廣告的類名id或者選中廣告標籤按delete鍵均可以達到清除廣告的目的。 2.雖然jqery很強大，可是很臃腫，須要本身封裝一個jquery，要用到jqery中哪些方法，就把原來jquery中的方法拿出來。 3.jquery有兩大特色：鏈式編程、隱式迭代（遍歷）。 4.原生js的入口函數與jquery的入口函數 ◆原生js的入口函數：【  window.onload = function () {} 是頁面文檔和頁面資源都加載完畢以後開始執行函數裏面的代碼，document.onready =function () {}是頁面文檔加載完畢以後開始執行函數裏面的代碼(可是這個原生的js的入口函數是jquery腳本庫擴展出來的事件，只有在引入了jquery腳本庫的時候纔可以使用document.onready，沒有引入腳本庫的時候document對象是沒有這個事件的)，document.onready 比 window.onload要快一點，由於圖片資源尚未顯示，document.onready裏的代碼就執行了，window.onload是頁面全部資源都加載完畢才執行的，window對象沒有onready。 】 ◆jquery的入口函數：【  $(document).ready(function () {})、 $(function () {})、 $(window).ready(function () {}) 這三種方式都和document.onready同樣，都是頁面文檔加載完畢以後 就進入JQuery的入口函數開始執行函數裏面的代碼， $(window).load(function () {});這種方式和window.onload同樣，都是頁面文檔和頁面資源都加載完畢以後開始執行函數裏面的代碼。 】 5.jQuery與$的區別：其實它們是同樣的，都是一個函數名，而且它們徹底相等，jQuery===$。 6.jQuery中的dom對象與原生js中的dom對象的區別： ◆jQuery的dom對象是對js的dom對象的封裝 ◆jQuery不管是經過什麼方式獲取的dom對象都是僞數組，數組中裝的成員就是原生js的dom對象。 ◆不光是將原生js的dom對象封裝到數組中，而且還給這個數組增長了不少功能方法，也就是給原來的js的dom對象穿上了一層帶有功能的皮膚，雖然原生的js的dom對象也能夠本身封裝這些功能方法，可是兼容性沒有jQuery的那麼好。 ★模擬jQuery對象操做css樣式的功能方法【  Object.prototype.css = function (json) {         var cssArr = [];         for (var key in json) {             cssArr.push(key + ":" + json[key]);         }         this.style.cssText = cssArr.join(";");     }     box.css({width: "200px", height: "200px", "background-color": "#f00"}); 】 7.原生的js的dom對象能夠和jQuery的dom對象相互轉換 ◆js的dom對象轉換爲jQuery的dom對象：$(js的dom對象)或jQuery(js的dom對象)。 ◆jQuery的dom對象轉換爲js的dom對象：jQuery的dom對象[index]或jQuery的dom對象.get(index)，就能夠獲取jQuery的dom對象的僞數組中的一個dom對象，可是若是get方法中不寫索引就能夠獲取jQuery的dom對象的僞數組中的全部的dom對象，jQuery的dom對象.get()獲取一個正常的原生js的dom對象的數組，再也不是假裝數組。 8.jQuery中的僞數組是怎麼實現的，清空本來數組中的原型（全部功能方法），添加本身新增的功能方法，添加索引爲字符串的成員context，以下【 //模擬jquery的dom對象的封裝 ，jquery的dom對象就是這樣的僞數組     var arr = [];     arr[0] = 0;     arr[1] = 1;     arr[2] = 2;     arr[3] = 3;     arr[4] = 4;     arr["5"] = 5;     //js的數組[]裏面不光是索引 還能夠是字符串     arr["context"] = document;      //清空數組的原型  沒有數組的方法了      arr["__proto__"] = null;     console.log(arr);//打印僞數組     //這樣只能遍歷索引爲數字的   或者索引爲字符串的數字的     for (var i = 0; i < arr.length; i++) {         console.log(i + "   " + arr[i]);     }     //這樣既能夠遍歷索引爲數字的也能夠遍歷索引爲字符串的     for (var key in arr) {         console.log(key + "  " + arr[key]);     } 】 9.jQuery的基本選擇器，不管什麼選擇器，返回的都是封裝着原生的dom對象的僞數組，$(id選擇器)，$(element選擇器)，$(class選擇器)，$(*通配符選擇器)，$(選擇器1，選擇器2，選擇器3，選擇器4)....$(css選擇器)，其實在css中使用的選擇器，均可以放到$()中做爲選擇器【 $("li") $(".li") $("*") $("li,.li,#li,*") 】。 10.jQuery的層級選擇器，$(祖 子)後代選擇器，$(父>子)子代選擇器，$(前+緊接着的後)後兄弟選擇器，$(前~全部的後)後同輩選擇器，其實在css中使用的選擇器，均可以放到$()中做爲選擇器【 $("ul li") $("ul>li") $("#prv+ol")  $("#prv~li") 】。 11.基本過濾選擇器：在基本選擇器的基礎上進行過濾操做，:first過濾第一個、:not(selector)過濾不包含selector的、:even過濾索引爲偶數的、:odd過濾索引爲奇數的、:eq(index)過濾索引等於index的、:gt(index)過濾索引大於index的、:last過濾最後一個、:lt(index)過濾索引小於index的、:header過濾h1-h六、:animated過濾正在執行動畫的、:focus過濾已經獲取焦點。 12.篩選選擇器【 篩選查找選擇器 //    children([expr]) //找子代 //    closest(e | o | e)1.7 * //    find(e | o | e)//從jquery對象的後代中查找必須制定參數，若是不指定獲取不到元素 //    next([expr])//下一個 //    nextall([expr])//下面的所有 //    nextUntil([e | e][, f]) //    offsetParent() //帶有定位的父節點 //    parent([expr]) //父節點 //    parents([expr]) //    parentsUntil([e | e][, f]) //    prev([expr]) //上一個 //    prevall([expr]) //上面的所有 //    prevUntil([e | e][, f]) //    siblings([expr]) //全部兄弟 除了本身 // //    篩選過濾選擇器 //    eq(index | -index) //等於索引的元素 //    first() //第一個元素 //    last() //最後一個元素 //    hasClass(class) //是否包含類 //    filter(expr | obj | ele | fn) //    is(expr | obj | ele | fn) //    map(callback) //    has(expr | ele) //    not(expr | ele | fn) 是否不包含 //    slice(start, [end]) 】