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实现的页内搜索代码
May 23 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
JavaScript 继承的实现
Jul 09 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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中开启gzip压缩的2种方法
2015/01/31 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
永不消失的title提示代码
2007/02/15 Javascript
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
python中property和setter装饰器用法
2019/12/19 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
python实现三种随机请求头方式
2021/01/05 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
就业自荐书
2013/12/05 职场文书
教师研修随笔感言
2014/01/23 职场文书
小松树教学反思
2014/02/11 职场文书
党风廉政承诺书
2014/03/27 职场文书
学校教师安全责任书
2014/07/23 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
趣味运动会广播稿
2015/08/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang