jQuery 之 jQuery 对象

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>04_jQuery对象</title>
</head>

<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

    /*
     需求:
     需求1. 统计一共有多少个按钮
     需求2. 取出第2个button的文本
     需求3. 输出所有button标签的文本
     需求4. 输出'测试三'按钮是所有按钮中的第几个
     */
    //需求1. 统计一共有多少个按钮
    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

    /*
    1. 伪数组
      * Object对象
      * length属性
      * 数值下标属性
      * 没有数组特别的方法: forEach(), push(), pop(), splice()
     */
    console.log($buttons instanceof Array) // false
    // 自定义一个伪数组
    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)
    }
    console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined

</script>
</body>
</html>
jQuery 之 jQuery 对象

猜你喜欢
