1.jquery中的index方法和eq方法

index()方法：index()獲取的索引值是相對同兄弟元素，即同一個父元素，，所以首先要確認一下這個元素的兄弟是誰，例如：

?

當遇到以上的情況很容易就覺得要在img元素上綁定事件，不行，因為img的兄弟元素其實只有他自己，所以要在li上面綁定，這樣子綁定的每一次的index()才都不同。所有遇到這種情況，綁定img的父元素li，然后再分別查找相應的img元素

eq()方法：eq(index)選擇器只匹配一個元素，并且是所有匹配到的元素中的第index + 1個元素(索引index從0開始算起)；例如：

$("img").eq(2)=====>>指向的是img3這個元素

index()方法和eq()方法的區別，

index()方法是相對同一個父元素的兄弟元素，而eq()選擇所有匹配到的元素，而:nth-child(n)選擇器也是相對于同一個父元素！！！

2、事件委托

具體來說，事件委托就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素（document）。當要為DOM中的很多元素綁定相同事件或者要為DOM中尚不存在的元素綁定事件時，使用事件委托！！！

?當html（）中的元素是動態添加時，需要注意的是，如果這時候要調用元素的點擊事件時，直接查找該元素進行點擊元素事件綁定，這時候點擊事件會失效，解決方法有兩種

第一種直接在動態html里面調用click（）事件，并傳this。

第二種就是事件委托通過父級來查找相應的點擊元素，新版本的事件委托統一使用on（）來進行事件綁定跟委托

?示例：$("ancestor").on( "click", "selector" [, data ], handler );

// 這里的選擇器selector用于指定可以觸發事件的元素
// 這里的選擇器ancestor應是selector的祖輩元素，selector觸發的事件可以被其祖輩元素在事件流中捕獲，從而以"代理"的形式觸發事件。

3、jQuery.extend和jQuery.fn.extend的區別

第一種：jQuery.extend，首先我們把jQuery當做人類，jQuery.extend()，是擴展的jQuery這個類。比如人類會吃飯睡覺，現在用這個擴展方法給人類增加一個會唱歌的技能。

jQuery可以用$符號代替，$.liu();這樣就能打印出來”liu“這個字符串，這說明.liu()變成了jQuery這個類本身的方法（object）。但是，這個能力啊，只有代表全人類的 jQuery 這個類本身，才能用啊。像$("div").liu()就會用不了報錯！！

jQuery.extend的兩種寫法如下！！

?

第二種：jQuery.fn.extend()

jQuery.fn.extend拓展的是jQuery對象（原型的）的方法啊！對象是啥？就是類的實例化嘛，例如$("#abc")?這個玩意就是一個實例化的jQuery對象

$('selector').xyz();

?你要是這么用$.xyz()；是會出錯誤！！！。

區別

jQuery.extend()這個方法，主要是用來拓展個全局函數啦，例如$.ajax()這種，要不就是拓展個選擇器啦，例如$.fn.each()，當選擇器用。

大部分插件都是用jQuery.fn.extend()。

?

4、$().each()和$.each()的區別

在jq中經常用這兩個方法來進行數組跟對象的遍歷

第一個：$().each 在dom處理上面用的較多。如果頁面有多個input標簽類型為checkbox，對于這時用$().each來處理多個checkbook。例子如下：

$(“input[name=’ch’]”).each(function(i){if($(this).attr(‘checked’)==true){//一些操作代碼}
})
回調函數是可以傳遞參數，i就為遍歷的索引。

第二個：遍歷一個數組或者對象通常用$.each()來處理 ?例如：

$.each([{name:"limeng",email:"xfjylimeng"},{name:"hehe",email:"xfjylimeng"}],function(i,n) { alert("索引:"+i+"對應值為："+n.name); });參數i為遍歷索引值，n為當前的遍歷對象.var arr1 = [ "one", "two", "three", "four", "five" ]; $.each(arr1, function(){ alert(this); }); 輸出：one two three four fivevar arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]] $.each(arr2, function(i, item){ alert(item[0]); }); 輸出：1 4 7var obj = { one:1, two:2, three:3, four:4, five:5 }; $.each(obj, function(key, val) { alert(obj[key]); }); 輸出：1 2 3 4 5

?

轉載于:https://www.cnblogs.com/qdlhj/p/9138496.html

總結

以上是生活随笔為你收集整理的jquery知识巩固的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。