zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Asp.net MVC3
    ASP.NET 路由实现页面静态化(附在线Demo和Source)
    ASP.NET MVC中Unobtrusive Ajax的妙用
    ASP.NET MVC Controller激活系统详解:IoC的应用[上篇]
    探讨大数据量处理
    提高ASP.NET性能与可伸缩性的几个个常用方法剖析
    Winform 应用
    C#利用QrCode.Net生成二维码
    MS SQL删除大数据
    由浅入深:自己动手开发模板引擎——置换型模板引擎1
  • 原文地址:https://www.cnblogs.com/qdlhj/p/9138496.html
Copyright © 2011-2022 走看看