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 学习之二 属性相关
Nov 23 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
Vue快速实现通用表单验证功能
Dec 05 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
javascript对象3个属性特征
Nov 17 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转换IP地址到真实地址的方法详解
2013/06/09 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
初中女生自我鉴定
2013/12/19 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
诉讼授权委托书
2014/10/15 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
nginx 配置缓存
2022/05/11 Servers