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 表单验证常见正则
Sep 28 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 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中的cookie
2006/11/26 PHP
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
JavaScript 调试器简介
2009/02/21 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
pandas string转dataframe的方法
2018/04/11 Python
python中的常量和变量代码详解
2018/07/25 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
幼儿发展评估方案
2014/06/11 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
python flask框架快速入门
2021/05/14 Python