浅谈jQuery中的eq()与DOM中element.[]的区别


Posted in Javascript onOctober 28, 2016

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

  <a class="a">#1</a>
  <a class="a">#2</a>
  <a class="a">#3</a>
  <script src="js/jq.js"></script>

  <script>
    var a = $('.a') ;
    var b = $('.a').eq(1) ;
    var c = $('.a')[1];
    var d = $('.a').eq(1)[0];
    var f = $('.a')[0].eq(1);

  </script>
</body>
</html>

$('.a')  // 选择了3个a,都是jq对象(可以用jq的属性、方法)

$('.a').eq(1) // 选择了第二个a,是jq对象(不可以使用dom属性方法,可以用jq的属性、方法)

$('.a')[1]  // 选择了第二个a,是dom对象(可以使用dom属性,方法,不可以使用jq属性方法)

$('.a').eq(1)[0]  // 选择了第二个a,并且转化成都是dom对象(可以使用dom属性,方法,不可以使用jq属性方法)

-----由此可见,jquery将js的又包装了一层,jq属性可以剥开包装调用dom属性,而dom则无法调用jq的属性方法。

$('.a')[0].eq(1) // 错误,因为dom对象用不了jq方法,eq()是jq方法。

以上就是小编为大家带来的浅谈jQuery中的eq()与DOM中element.[]的区别全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 #Javascript
Javascript+CSS3实现进度条效果
Oct 28 #Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 #Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 #Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 #Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 #Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 #Javascript
You might like
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
php使用session二维数组实例
2014/11/06 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python 实现多维数组转向量
2019/11/30 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
高考自主招生自荐信
2013/10/20 职场文书
说明书范文
2014/05/07 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2015年政协委员工作总结
2015/05/20 职场文书