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())
})
领取专属 10元无门槛券
私享最新 技术干货