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)
  }