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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
解析yii数据库的增删查改
2013/06/20 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
Javascript 按位取反运算符 (~)
2014/02/04 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
老生常谈python中的重载
2018/11/11 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
实例详解Python装饰器与闭包
2019/07/29 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python 动态调用函数实例解析
2019/10/21 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
项目经理的岗位职责
2013/11/23 职场文书
大专生的学习自我评价
2013/12/04 职场文书
节能宣传周活动总结
2014/05/08 职场文书
给学校的建议书范文
2014/05/15 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
nginx访问报403错误的几种情况详解
2022/07/23 Servers