jQuery从入门到熟练(4)

2、jQuery 核心对象

简称：jQuery 对象得到 jQuery 对象: 执行 jQuery 函数返回的就是 jQuery 对象使用 jQuery 对象: $obj.xxx()
<script type="text/javascript" src="js/jquery-1.12.3.js"></script><script type="text/javascript"> //2. jQuery对象: 执行jQuery函数得到它 console.log($() instanceof Object) // true</script>

理解
即执行 jQuery 核心函数返回的对象jQuery 对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）jQuery 对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
属性/方法
基本行为
size()/length
[index]/get(index)
each()
index()属性：操作内部标签的属性或值CSS：操作标签的样式文档：对标签进行增删改操作筛选：根据指定的规则过滤内部的标签事件：处理事件监听相关效果：实现一些动画效果
<button>测试一</button><button>测试二</button><button>测试三</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>