文档结构图:
- 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后,执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
举例说明:
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
具体实现:
//1).参数为函数 : 当DOM加载完成后,执行其中的函数 回调函数
$(function () {
//2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
var $btn = $("#btn")
$btn.click(function () {
//显示按钮的文本
//this就是发生事件的dom元素对象(也就是button)
//3). 参数为DOM对象: 将dom对象封装成jQuery对象
好处:可以使用jQuery对象的方法
var text = $(this).html()
alert(text)
//显示一个新的输入框
//4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3" /><br />').appendTo('div')
})
})
- 作为对象使用:
.xxx()1).
.
x
x
x
(
)
1
)
.
.each() : 隐式遍历数组
需求2. 遍历输出数组中所有元素值
具体实现:
var arr = [123, 'atguigu', true]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log('第' + (index + 1) + '个元素的值为' + item)
})
2). $.trim() : 去除两端的空格
需求3. 去掉” my atguigu “两端的空格
具体实现:
var str = " my atguigu "
console.log(str.trim() === 'my atguigu')
console.log($.trim(str) === 'my atguigu') //true