jquery知识巩固

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 five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出:1 4 7

var 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