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