jquery eq 与 get使用方法

$("p:eq(1)")亲自试一试
定义和用法
:eq() 选择器选取带有指定 index 值的元素。

index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。

经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素(如上面的例子)。

语法
$(":eq(index)")参数 描述
index 必需。规定元素的 index 值。

<!doctype html>  <html>  <head>    <style>  
 div { width:60px; height:60px; margin:10px; float:left;        
 border:2px solid blue; }   
.blue { background:blue; }   
</style>   
<script src="http://code.jquery.com/jquery-1.5.js"></script> 
</head>
 <body>  
 <div></div>   
<div></div>   
<div></div>     
<div></div>   
<div></div>   
<div></div> 
<script>       
$("body").find("div").eq(2).addclass("blue");  </script>    </body> 
</html>

效果图

<p style="color:yellow">绯雨</p>使用eq来获得第一个p标签的color值:
$("p").eq(0).css教程("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个p标签的color值:

jquery get

$("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="网页特效" 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>

时间: 2016-04-14

jquery eq 与 get使用方法的相关文章

jQuery实现冻结表头的方法

 这篇文章主要介绍了jQuery实现冻结表头的方法,实例分析了jQuery扩展方法的实现技巧及固定表格样式的方法,需要的朋友可以参考下     本文实例讲述了jQuery实现冻结表头的方法.分享给大家供大家参考.具体如下: 前段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也找过相应的脚本,但是不怎么理想所以就自己写了,但是目前由于项目仅仅用到了表头的冻结,而不需要指定列冻结所以目前只能算个不完整的脚本,不过一般的仅仅需要表头冻

jquery日历控件实现方法分享

 这篇文章主要介绍了jquery日历控件实现方法,网上有好多这样的插件,下面是自己实现的一个方法,需要的朋友可以参考下 注释掉的是默认的css样式,你可以修改成自己的样式实现另一个风格,大家参考使用吧    代码如下: /**  * jQuery Calendar Plugin  */ (function($, window) {       'use strict';     $.fn.calendar = function(options) {         //check is sele

JQuery删除DOM节点的方法_jquery

本文实例讲述了JQuery删除DOM节点的方法.分享给大家供大家参考.具体分析如下: 如果文档中某一个元素多余,那么应将其删除.JQuery提供了两种删除节点的方法,即remove()和empty(). HTML DOM结构如下: <p class="nm_p" title="欢迎访问" >欢迎访问</p> <ul class="nm_ul"> <li title='PHP编程'>简单易懂的PHP编

JQuery插入DOM节点的方法_jquery

本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class

JQuery查找DOM节点的方法_jquery

本文实例讲述了JQuery查找DOM节点的方法.分享给大家供大家参考.具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下.先来最简单的查找节点操作. 为了能全面地讲解DOM操作,首先需要构建一个网页.因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.HTML代码如下: <p class="nm_p" title="欢迎访问" >欢迎访问</p> <ul class

jQuery原型属性和原型方法详解_jquery

首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? 首先是constructor属性  相信熟悉js面向对象部分的开发人员都熟悉,就是用来返回对象属性创建的函数,举个简单的例子: function Person(){}; var person=new Person(); alert(person.constructor); //function Person(){} 我们写继承的时候喜欢把所有的原型属性和方法放在一个单独的对象字面量中,这样就会导致constructor属性与"实际

Jquery遍历Json数据的方法

  这篇文章主要介绍了Jquery遍历Json数据的方法,涉及jQuery遍历json格式数据的相关技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了Jquery遍历Json数据的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 4

jquery单击事件执行后台方法提前执行的问题

问题描述 jquery单击事件执行后台方法提前执行的问题 我在主页末尾添加javascript代码如下: $(function(){ $(".fouct1:first").click(function(){ var a=<%=ServerIpAdd()%>; //执行一个后台方法 }); }); 可是,每次刷新页面就执行了ServerIpAdd()方法,而不是单击事件后执行ServerIpAdd()方法(记录单击特定链接的次数),请高手提供一个好的方法,实现单击某个链接以后

JQuery自动触发事件的方法

 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使用下面的代码来触发id为btn的按钮的click事件. $('#btn').trigger("click"); 这样,当页面加载完毕后,就会立刻输出想要的效果.也可以直接简写click(),来达到同样的效果: $('#btn').click(); 触发自定义事件 trigger()方法不

jQuery取消ajax请求的方法

 本文实例讲述了jQuery取消ajax请求的方法.分享给大家供大家参考.具体分析如下: 这里需要注意的是,在ajax请求未响应之前可以用xhr.abort()取消,但如果请求已经到达了服务器端,这样做的结果仅仅是让浏览器不再监听这个请求的响应,但服务器端仍然会进行处理 1 2 3 4 5 6 7 8 9 10 11 var xhr = $.ajax({ type: "POST", url: "test.php", data: "name=test&quo