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中实现块作用域的方法
Apr 01 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
利用JavaScript的Map提升性能的方法详解
Aug 14 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 高手之路(二)
2006/10/09 PHP
php adodb分页实现代码
2009/03/19 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
event.srcElement+表格应用
2006/08/29 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python模块搜索路径代码详解
2018/01/29 Python
Python最小二乘法矩阵
2019/01/02 Python
django基础学习之send_mail功能
2019/08/07 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
初二政治教学反思
2014/01/12 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
淘宝客服工作职责
2014/07/11 职场文书
妇女工作先进事迹
2014/08/17 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
个人职业及收入证明
2014/10/13 职场文书
2014年技术部工作总结
2014/12/12 职场文书
放假通知怎么写
2015/08/18 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android