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知识巩固相关推荐

  1. jQuery知识重构

    jQuery知识重构 目录: 一.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery ...

  2. [jQuery知识]jQuery之知识十一-Ajax初级

    前言 1.Ajax 概述 2.load()方法 3..get()和.get()和.post() Ajax 全称为:"Asynchronous JavaScript and XML" ...

  3. JQUERY知识总结

    1, 让页面上某一个已存在的SELECT被选中的JQuery写法  $("#test").find("option[value='3']").prop(&quo ...

  4. Jquery知识小点备注

    jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索. 实例演示:点击某个li标签后将其设置为红色,而其所有同胞元素去除红色样式 创建Html ...

  5. jQuery知识汇总

    jQuery 选择器 选择器                  实例                                   选取 *                          $ ...

  6. jQuery知识简介

    1.jQuery简介 ①.jQuery是一个兼容多浏览器的.轻量级的JavaScript库 ②.jQuery是继prototype之后又一个优秀的JavaScript库,如今,jQuery已经成为最流 ...

  7. jQuery知识(转)

    jQuery输入格式控制插件Masked Input Plugin linzheng 2010-11-25 22:58 阅读:239 评论:0 jQuery表单插件ingrid.js linzheng ...

  8. jQuery 知识总结

    1.什么是jQuery jQuery 是一个 JavaScript 函数库.jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库jQuery 库包含以下功能: ...

  9. jQuery知识梳理总结

    文章目录 jQuery 1.jQuery 介绍 2.jQuery 的初体验 3. jQuery 核心函数 4.区分 jQuery 对象和 dom 对象 4.1.什么是 jQuery 对象,什么是 do ...

最新文章

  1. DataWorks V2使用PyUdf
  2. python使用imbalanced-learn的SMOTEN方法进行上采样处理数据不平衡问题
  3. iOS多线程中performSelector: 和dispatch_time的不同
  4. C语言博客作业--嵌套循环
  5. 最聪明女生集结清华,挑战人工智能
  6. linux文本分析工具awk解读
  7. docker查询占用端口号服务命令
  8. python安装与开发环境搭建实验总结_python实验一:python环境配置
  9. springboot 禁用 cookie / chrome 禁用 cookie
  10. 设计模式之Adapter
  11. 按键精灵--VS挤房器
  12. 复变函数在计算机科学的应用,[2018年最新整理]MATLAB在复变函数与积分变换的应用.doc...
  13. IDEA主题分享与代码颜色设置
  14. 关于华为pad(鸿蒙系统)连接wedo 2.0 集线器问题
  15. 转行做数据分析的心路历程
  16. 电脑用计算机软件一直闪退,电脑软件打开后闪退或崩溃怎么办
  17. 计算机系统要素--第六章,01-HACK汇编编译器模块介绍
  18. 检验身份证的正确性(Golang版本)
  19. 软件测试基础面试常问问题(三)
  20. cfa的pv怎么用计算机算,怎么用金融计算器算pv(金融计算器怎么用)

热门文章

  1. OpenOffice java api UNO 设置属性总结
  2. 用一个按钮做主窗口,可以吗?
  3. 探讨ASP.NET 2.0中的Web控件改进技术(2)
  4. xxx is already defined as object xxx+intellij新建一个scala的maven项目+找不到或无法载入主要类别hello问题解决
  5. python2.7下面字节数组(ByteArray)和16进制字符串(HexString)转化
  6. bocketmq 多个消费者同时_菜鸟开建“海南跨境物流枢纽”让自贸港消费者海购最快当日达...
  7. java 将依赖打包进lib_maven把依赖包拷贝到lib下
  8. java 开源 网络流量统计_jpcap java流量监控
  9. 两个sql交集_如何使用性能分析工具定位SQL执行慢的原因?
  10. 对计算机课评价,信息技术课教学效果评价