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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
基于jQuery的自动完成插件
2011/02/03 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Django models文件模型变更错误解决
2020/05/11 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
甜点店创业计划书
2014/01/27 职场文书
小学运动会班级口号
2014/06/09 职场文书
优秀员工事迹材料
2014/12/20 职场文书
学校施工安全责任书
2015/01/29 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
小学运动会宣传稿
2015/07/23 职场文书
详解php中流行的rpc框架
2021/05/29 PHP