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 提交和设置表单的值
Dec 19 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 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
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
javascript的函数作用域
2014/11/12 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Nodejs实现用户注册功能
2019/04/14 NodeJs
JS实现长图上下滚动效果
2020/03/19 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
软件测试笔试题
2012/10/25 面试题
党课学习思想汇报
2014/01/02 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
导游词开场白
2015/01/31 职场文书
导游词之临安白水涧
2019/11/05 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers