zoukankan      html  css  js  c++  java
  • jQuery对象的使用 安静点

    1 jQuery对象是一个包含所有匹配的任意多个DOM元素的伪数组对象。 

    2 基本行为

      size()/length:包含的DOM元素的个数

      [index]/get(index):得到对应位置的元素

      each():遍历包含的所有DOM元素

      index():得到所在兄弟元素中的下标

     通过下面的例子来展示上面的用法: 

    <!DOCTYPE html>
    <html>  
    <body>
    <button>测试一</button>
    <button>测试二</button>
    <button id="btn3">测试三</button>
    <button>测试四</button> 
    </body>
    </html>
       需求1. 统计一共有多少个按钮
       需求2. 取出第2个button的文本
       需求3. 输出所有button标签的文本
       需求4. 输出'测试三'按钮是所有按钮中的第几个
    <script type="text/javascript"> 
      /*
       需求:
       需求1. 统计一共有多少个按钮
       需求2. 取出第2个button的文本
       需求3. 输出所有button标签的文本
       需求4. 输出'测试三'按钮是所有按钮中的第几个
       */
      //需求1. 统计一共有多少个按钮
      // $('button')得到的是包含button标签的所有DOM元素
      //注意$buttons就是一个伪数组
      var $buttons = $('button')
      /*size()/length: 包含的DOM元素个数*/
      console.log($buttons.size(), $buttons.length)
    
      //需求2. 取出第2个button的文本
      /*[index]/get(index): 得到对应位置的DOM元素*/
      console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
    
      //需求3. 输出所有button标签的文本
      /*each(): 遍历包含的所有DOM元素*/
      /*$buttons.each(function (index, domEle) {
        console.log(index, domEle.innerHTML, this)
      })*/
      $buttons.each(function () {
        console.log(this.innerHTML)
      })
      
      //需求4. 输出'测试三'按钮是所有按钮中的第几个
      /*index(): 得到在所在兄弟元素中的下标*/
      console.log($('#btn3').index())  //2 
    </script>

    伪数组

        * Object对象
        * length属性
        * 数值下标属性
        * 没有数组特别的方法,比如: forEach(), push(), pop(), splice()
       下面自定义一个伪数组
    // 自定义一个伪数组
      var weiArr = {}
      weiArr.length = 0
      weiArr[0] = 'atguigu'
      weiArr.length = 1
      weiArr[1] = 123
      weiArr.length = 2
      for (var i = 0; i < weiArr.length; i++) {
        var obj = weiArr[i]
        console.log(i, obj)
      }

      

  • 相关阅读:
    配置和兼容性测试的区别是什么?
    7 天内免登陆,测试要怎么去测试?
    在测试“支付网关”过程中的5个要点
    Hibernate入门与简谈
    jQuery专题
    Java反射机制专题
    Java IO流
    EL和JSTL专题
    泛型(Generic)
    Java异常处理
  • 原文地址:https://www.cnblogs.com/anjingdian/p/15550395.html
Copyright © 2011-2022 走看看