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 相关文章推荐
网页防止tab键的使用快速解决方法
Nov 07 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
JS获取时间的方法
Jan 21 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
基于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压缩方法(zlib.output_compression)
2013/04/13 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python实现的knn算法示例
2018/06/14 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
渔夫的故事教学反思
2014/02/14 职场文书
销售员试用期自我评价
2014/09/15 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书