首页 > 代码库 > jquery的get()方法

jquery的get()方法

2024-10-30 03:27:02   211人阅读

通过检索匹配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()方法


联系
我们