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 相关文章推荐
取得传值的函数
Oct 27 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
js与applet相互调用的方法
Jun 22 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
深入理解React高阶组件
Sep 28 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
php fread函数使用方法总结
2019/05/28 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
简单学习vue指令directive
2016/11/03 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Node.js学习入门
2017/01/03 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python类中super()和__init__()的区别
2016/10/18 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python字符串的一些操作方法总结
2019/06/10 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
使用python turtle画高达
2020/01/19 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
大学生自我鉴定范文模板
2014/01/21 职场文书
初中生期末评语大全
2014/04/24 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
股东授权委托书范文
2014/09/13 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
助学感谢信范文
2015/01/21 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang