二、jquery对象的使用
- jquery对象是包含所有匹配的任意多个DOM元素的伪数组对象
(1)基本行为:
- size()/length:包含的DOM元素个
- [index]/get(index):得到对应位置的DOM 元素
- each():遍历包含的所有DOM元素
- index():得到在所在兄弟元素中的下标
- 代码实践
body部分:
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
// 需求:(1)统计一共多少个按钮
var $buttons=$('button');
console.log($buttons.size(),$buttons.length);
//* (2)取出第2个button的文本
console.log($buttons[1].innerHTML,$buttons.get(1).innerHTML);
//* (3)输出所有button标签的文本
$buttons.each(function (index,domEle) {
console.log(index,domEle.innerHTML,this);
})
$buttons.each(function () {//不需要index,简写如下:
console.log(this.innerHTML);
})
//* (4)输出测试三按钮是所有按钮中的第几个
console.log($('#btn3').index());
实现效果如下:
补充:
伪数组:必须是一个object对像
- 这个对象必须要有length属性且为number类型
- 具有数值下标属性
- 没有数组特别的方法: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);
}
console.log(weiArr.forEach,$buttons.forEach)//undefined,undefined
返回结果为undefined,undefined