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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
javascript白色简洁计算器
May 04 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
如何使JavaScript休眠或等待
Apr 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
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
光声世纪笔试题目
2012/08/25 面试题
Linux文件系统类型
2012/02/15 面试题
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
python中print格式化输出的问题
2021/04/16 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python