jquery中eq和get的区别与使用方法


Posted in Javascript onApril 14, 2011

举个例子:
<p style="color:yellow">绯雨</p>使用eq来获得第一个p标签的color值:
$("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个p标签的color值:
$("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。当然,你也可以get(num)后把对象转为jq的对象再进行操作:
$($("p").get(0)).css("color")--------------------------------------------------------------------------
more eq
see:
http://api.jquery.com/eq/
--------------------------------------------------------------------------
more get:
see:
http://api.jquery.com/get/
eq:返回是一个 jquery对象 作用是 将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0,而集合长度变成1
get:是一个html 对象数组作用是取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

如:html代码

<ul> 
<li>li-1</li> 
<li>li-2</li> 
</ul>

比如我们通过jquery选择器 $("li")那么我们将会有两个li元素我如何只想选择其中一个呢?

$("li:eq(0)").html() 或者 $("li").eq(0).html() 就是第一个li 这里我们将获得 li-1
$("li:eq(1)").html() 或者 $("li").eq(1).html() 就是第二个li 这里我们将获得 li-2

下面我们看看 get因为get返回是html对象所以我们这里
$("li").get(0).style.color='red'
只有这样用或者将 get返回对象转换成jquery对象在操作
$($("li").get(0)).css("color",'red')即可

完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></script> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
$("document").ready(function(){ 
alert($("li:eq(1)").html());//显示 li-2 alert($("li:eq(0)").html()) 
$("li").get(0).style.color='red'; 
$($("li").get(1)).css("color",'red') 
}) 
//--> 
</SCRIPT> 
</HEAD> 
<BODY> 
<ul> 
<li>li-1</li> 
<li>li-2</li> 
</ul> 
</BODY> 
</HTML>
Javascript 相关文章推荐
javascript tips提示框组件实现代码
Nov 19 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 #Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 #Javascript
让textarea自动调整大小的js代码
Apr 12 #Javascript
javascript算法学习(直接插入排序)
Apr 12 #Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 #Javascript
jquery监控数据是否变化(修正版)
Apr 12 #Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 #Javascript
You might like
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
市级三好生竞选稿
2015/11/21 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书