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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
Java中Timer的用法详解
Oct 21 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
常见的浏览器Hack技巧整理
Jun 29 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Python中的index()方法使用教程
2015/05/18 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python列表操作方法详解
2020/02/09 Python
实例代码讲解Python 线程池
2020/08/24 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
python实现计算图形面积
2021/02/22 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
国际贸易个人求职信范文
2014/01/04 职场文书
小学生安全保证书
2014/02/01 职场文书
酒店端午节促销方案
2014/02/18 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
学校学雷锋活动总结
2014/06/26 职场文书