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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
详解React 元素渲染
Jul 07 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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(1)
2006/10/09 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
Python类的专用方法实例分析
2015/01/09 Python
Python中的迭代器漫谈
2015/02/03 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python中垃圾回收和del语句详解
2018/11/15 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python里 super类的工作原理详解
2019/06/19 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python3跳出一个循环的实例操作
2020/08/18 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
考察现实表现材料
2014/05/19 职场文书
校园绿化美化方案
2014/06/08 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js