通过检索匹配jQuery对象得到对应的DOM元素。

.get( [index ] )

  • index
    类型: Integer
    从0开始计数，用来确定获取哪个元素。

.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。 如果index的值超出范围 - 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回undefined。 假设我们页面上有一个简单的无序列表：

<ul>

  <li id="foo">foo</li>

  <li id="bar">bar</li>

</ul>

如果指定了 index 参数， .get() 则会获取单个元素：

console.log( $( "li" ).get( 0 ) );

由于索引 index 是以 0 开始计数的，所以上面代码返回了第一个列表项：

<li id="foo">

每个 jQuery 对象也被当成一个数组，所以我们也可以直接用数组的取值运算符来获得列表项：

console.log( $( "li" )[0] );

然而，这种语法缺少某些 .get() 所具有的附加功能，比如可以指定索引值为负值：

console.log( $( "li" ).get(-1) );

负的索引值表示从匹配的集合中从末尾开始倒数，所以上面这个例子将会返回列表中最后一项：

<li id="bar">

Example: 给出点中元素的标签名。

<!DOCTYPE html>

<html>

<head>

  <style>

  span { color:red; }

  div { background:yellow; }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

  <span>&nbsp;</span>

  <p>In this paragraph is an <span>important</span> section</p>

  <div><input type="text" /></div>

<script>

$("*", document.body).click(function (e) {

  e.stopPropagation();

  var domEl = $(this).get(0);

  $("span:first").text("Clicked on - " + domEl.tagName);

});

</script>

</body>

</html>

Description: 通过检索匹配jQuery对象得到对应的DOM元素。

  • version added: 1.0.get()

  • 这个方法不接收任何参数

假设我们页面上有一个简单的无序列表：

<ul>

    <li id="foo">foo</li>

    <li id="bar">bar</li>

  </ul>

如果不带参数， .get() 会返回所有的元素：

console.log( $( "li" ).get() );

调用这个方法将会返回所有匹配的DOM节点，这些节点包含在一个标准的数组中：

[<li id="foo">, <li id="bar">]

Example:

选择文档中的所有div，并且作为一个数组返回。然后使用浏览器原生的 reverse 方法将数组翻转。

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>get demo</title>

  <style>

    span { color:red; }

        </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>

  Reversed - <span></span>

    <div>One</div>

    <div>Two</div>

    <div>Three</div>

<script>

  function disp(divs) {

    var a = [];

    for ( var i = 0; i < divs.length; i++) {

      a.push( divs[i].innerHTML );

    }

    $( "span" ).text( a.join(" ") );

  }

  disp( $( "div" ).get().reverse() );

  </script>

</body>

</html>

jquery的get()方法的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  3. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

  4. jQuery的extend方法

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩 ...

  5. jQuery中eq()方法用法实例

    本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...

  6. HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...

  7. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  8. [转]jQuery的each方法的几种常用的用法

    下面提一下jQuery的each方法的几种常用的用法 复制代码 代码如下:  var arr = [ "one", "two", "three&quo ...

  9. jquery中$.ajax方法提交表单

    function postdata(){                        //提交数据函数 $.ajax({                                //调用jqu ...

  10. JS,JQuery的扩展方法

    转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            ...

随机推荐

  1. Android 从上层到底层-----jni层

    CPU:RK3288 系统:Android 5.1 功能:上层 app 控制 led 亮灭 开发板:Firefly RK3288 led_jni.h path:hardware/rockchip/fi ...

  2. NanoPiM1开箱测试

    等了快一周了,终于那M1与那外壳一起给我寄过来了. 上午收到,开箱图就不亮了,来一上好电的图! 一同购买来的MSD卡里什么也没有,上电测试时只看到绿色的灯微微亮(这是一个BUG吗!!!!哈哈). 所以 ...

  3. 软件设计----LisKov替换原则（LSP）

    LisKov替换原则的定义:一个软件实体如果使用的是一个基类的话,一定适用于其子类,而且根本不能觉察出基类对象和子类对象的区别. 1)怎么理解上面的概念?就是我们程序设计的子类型能够完全替换父类型,而 ...

  4. FPGA的CNN加速，你怎么看？

    网上对于FPGACNN加速的研究已经很多了,神经网络的硬件加速似乎已经满大街都是了,这里我们暂且不讨论谁做的好谁做的不好,我们只是根据许许多多的经验来总结一下实现硬件加速,需要哪些知识,考虑哪些因素. ...

  5. (转)Inno Setup入门（五）——添加readme文件

    本文转载自:http://blog.csdn.net/yushanddddfenghailin/article/details/17250771 这个实现起来很简单,就是在[files]段中的某个预先 ...

  6. STM32=LWIP

    https://blog.csdn.net/zouw96/article/details/8443141

  7. [Java.web][eclipse]经验集

    自动提示部分内容来自:http://www.cnblogs.com/mashuangying2016/p/6549991.html 使用 Eclipse 调试 Tomcat 的设置: Window - ...

  8. Resource interpreted as Document but transferred with MIME type application/json laravel异常请求返回警告

    一般情况下,laravel在方法里可以向前端返回数组格式 return [], 框架可以自动将数组转成JSON字符串返回,但浏览器会报MIME类型警告, 如是做APP接口可以忽视该警告: 但在前端aj ...

  9. 安装FreePBX的ISO版本

    下载地址:http://schmoozecom.com/distro-download.php 这个相当于系统了,第一步:安装程序会提示选择你想安装Asterisk的版本:现在出现了11版本,这个根据 ...

  10. oracle 索引使用小结

    1. 普通索引 create index my_index on test (col_1); 可创建合并两列或多列的索引,最多可将32列合并在一个索引中(位图索引最多可合并30列) create in ...