• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • get()

    通过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">

    例子

    给出点中元素的标签名。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      span { color:red; }
      div { background:yellow; }
      </style>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
    

    get()

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

    .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="//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>
    
    Reversed -
    One
    Two
    Three

    上篇:pushStack()

    下篇:index()