核心函数
核心函数
调用jQuery的核心函数
- $()
- jQuery
传递一个函数
$(function () {
alert("hello lnj")
}
接受一个字符串选择器
返回一个jQuery对象, 对象中保存了找到的DOM元素
$(function () {
var $box1 = $(".box1")
var $box2 = $("#box2")
console.log($box1)
console.log($box2)
}
接收一个字符串代码片段
返回一个jQuery对象, 对象中保存了创建的DOM元素
$(function () {
var $box1 = $(".box1")
var $p = $("<p>我是段落</p>")
console.log($p)
$box1.append($p)
}
接收一个DOM元素
会被包装成一个jQuery对象返回给我们
$(function () {
var span = document.getElementsByTagName("span")[0]
console.log(span)
var $span = $(span)
console.log($span)
}
jQuery 对象
jQuery对象是一个伪数组(有0到length-1的属性, 并且有length属性)
$(function () {
var $div = $("div")
console.log($div)
var arr = [1, 3, 5]
console.log(arr)
})
静态方法
静态方法和实例方法
- 静态方法通过类名调用
// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个静态方法 - 直接添加给类的就是静态方法
AClass.staticMethod = function () {
alert("staticMethod")
}
// 静态方法通过类名调用
AClass.staticMethod()
- 实例方法通过类的实例调用(对象)
//3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod")
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass()
// 通过实例调用实例方法
a.instanceMethod()
each()
原生的forEach方法
只能遍历数组, 不能遍历伪数组
- 第一个参数: 遍历到的元素
- 第二个参数: 当前遍历到的索引
var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
arr.forEach(function (value, index) {
console.log(index, value)
})
obj.forEach(function (value, index) {
console.log(index, value)
})
jQuery的each方法
可以遍历伪数组的
- 第一个参数: 当前遍历到的索引
- 第二个参数: 遍历到的元素
var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
$.each(arr, function (index, value) {
console.log(index, value)
});
$.each(obj, function (index, value) {
console.log(index, value)
})
map()
原生的map方法
- 第一个参数: 当前遍历到的元素
- 第二个参数: 当前遍历到的索引
- 第三个参数: 当前被遍历的数组
var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
arr.map(function (value, index, array) {
console.log(index, value, array)
})
obj.map(function (value, index, array) {
console.log(index, value, array)
)
jQuery的map方法
- 第一个参数: 遍历到的元素
- 第二个参数: 遍历到的索引
var arr = [1, 3, 5, 7, 9]//数组
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5//伪数组
var res = $.map(obj, function (value, index) {
console.log(index, value)
return value + index
})
var res2 = $.each(obj, function (index, value) {
console.log(index, value)
return value + index
})
console.log(res)
console.log(res2)
jQuery中的each静态方法和map静态方法的区别
区别一:
- each静态方法默认的返回值就是, 遍历谁就返回谁
- map静态方法默认的返回值是一个空数组
区别二:
- each静态方法不支持在回调函数中对遍历的数组进行处理
- map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
trim(str)
- 作用:去除字符串两端的空格
- 参数:需要去除空格的字符串
- 返回值:去除空格之后的字符串
// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window
var str = " lnj "
var res = $.trim(str);
console.log("---"+str+"---")
console.log("---"+res+"---")
isArray(obj)
- 作用: 判断传入的对象是否是真数组
- 返回值: true/false
// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window
var res = $.isArray(arr)
console.log(res)//true
isFunction(obj)
- 作用: 判断传入的对象是否是一个函数
- 返回值: true/false
// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window
var res = $.isFunction(jQuery)//(fn)
console.log(res)//true
isWindow(obj)
- 作用: 判断传入的对象是否是window对象
- 返回值: true/false
// 真数组
var arr = [1, 3, 5, 7, 9]
// 伪数组
var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 对象
var obj = {"name":"lnj", age:"33"}
// 函数
var fn = function(){}
// window对象
var w = window
var res = $.isWindow(w)
console.log(res)//true
holdReady(thold)
- 作用: 暂停ready执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
// $.holdReady(true) 作用: 暂停ready执行
$.holdReady(true)
$(document).ready(function () {
alert("ready")
});
</script>
</head>
<body>
<button>回复ready事件</button>
<script>
var btn = document.getElementsByTagName("button")[0]
btn.onclick = function () {
$.holdReady(false)
}
</script>
</body>
</html>