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 相关文章推荐
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
基于jquery编写分页插件
Mar 07 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vue-cli3配置favicon.ico和title的流程
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
PHP新手上路(四)
2006/10/09 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
javascript拖拽效果延伸学习
2016/04/04 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
React Native预设占位placeholder的使用
2017/09/28 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
vscode 远程调试python的方法
2017/12/01 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python软件都是免费的吗
2020/06/18 Python
django中cookiecutter的使用教程
2020/12/03 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
银行实习自我鉴定
2013/10/12 职场文书
视光学专业毕业生推荐信
2013/10/28 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
个人先进事迹总结
2015/02/26 职场文书
寒假安全保证书
2015/02/28 职场文书
培训班开班主持词
2015/07/02 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server