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游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
VUE中使用MUI方法
Feb 12 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js 提交和设置表单的值
2008/12/19 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
大学生工作推荐信范文
2013/12/02 职场文书
学生励志演讲稿
2014/01/06 职场文书
后进生转化工作制度
2014/01/17 职场文书
消防安全检查制度
2014/02/04 职场文书
协议书与合同的区别
2014/04/18 职场文书
初三学生评语大全
2014/04/24 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
幼儿园见习总结
2015/06/23 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
Go语言应该什么情况使用指针
2021/07/25 Golang
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL