第二章 jQuery的两把利器

2.1 jQuery核心函数与jQuery对象的介绍

①jQuery核心函数介绍

简称: jQuery函数($/jQuery)

jQuery库向外直接暴露的就是$/jQuery，引入jQuery库后, 直接使用$即可

当函数用: $(xxx)

当对象用: $.xxx()

②jQuery对象介绍

简称: jQuery对象

得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

使用jQuery对象:$obj.xxx()

2.2 jQuery函数的使用

即: $ 或 jQuery，jQuery定义了这个全局的函数供我们调用

它既可作为一般函数调用, 且传递的参数类型不同/格式不同功能就完全不同，也可作为对象调用其定义好的方法, 此时$就是一个工具对象

①作为一般函数使用

1. 参数为函数 $(fun)

2. 参数为选择器(selector)字符串 $("#div1")

3. 参数为DOM对象 $(div1Ele)

4. 参数为html标签字符串 $("

")

②作为对象使用

发送ajax请求的方法:$.ajax()、$.get()、$.post()......

其它工具方法:$.each()、$.trim()、$.parseJSON()

......

测试

/*

需求:

需求1. 统计一共有多少个按钮

需求2. 取出第2个button的文本

需求3. 输出所有button标签的文本

需求4. 输出'测试三'按钮是所有按钮中的第几个

*/

$(function(){

var$btns = $('button')

console.log($btns)

//需求1. 统计一共有多少个按钮

/*size()/length:包含的DOM元素个数*/

console.log($btns.size(),$btns.length)

//需求2. 取出第2个button的文本

/*[index]/get(index):得到对应位置的DOM元素*/

console.log($btns[1].innerHTML,$btns.get(1).innerHTML)

//需求3. 输出所有button标签的文本

/*each():遍历包含的所有DOM元素*/

$btns.each(function(){

console.log(this.innerHTML)

})

//需求4. 输出'测试三'按钮是所有按钮中的第几个

/*index():得到在所在兄弟元素中的下标*/

console.log($('#btn3').index())

})