jQuery核心函数
1.接收一个函数
2.接收一个字符串
2.1接收一个字符串选择器
返回一个jQuery对象, 对象中保存了找到的DOM元素
2.2接收一个字符串代码片段
返回一个jQuery对象, 对象中保存了创建的DOM元素
3.接收一个DOM元素
会被包装成一个jQuery对象返回给我们
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-jQuery核心函数</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
// $();/jQuery原理();就代表调用jQuery的核心函数
// 1.接收一个函数
$(function () {
alert("hello lnj");
// 2.接收一个字符串
// 2.1接收一个字符串选择器
// 返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);
// 2.2接收一个字符串代码片段
// 返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
console.log($p);
$box1.append($p);
// 3.接收一个DOM元素
// 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
});
</script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
</html>jQuery对象
1.什么是jQuery对象
jQuery对象是一个伪数组
2.什么是伪数组?
1，具有length属性
2，按索引方式存储数据
3，不具有数组的push,pop等方法
静态方法和实例方法
类和对象（class）是两种以计算机为载体的计算机语言的合称。对象是对客观事物的抽象，类是对对象的抽象。类是一种抽象的数据类型。
它们的关系是，对象是类的实例，类是对象的模板。对象是通过new className产生的，用来调用类的方法;类的构造方法
// 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方法
实例如下：
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};原生的forEach方法只能遍历数组, 不能遍历伪数组
/*
第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引
*/
arr.forEach(function (value, index) {
console.log(index, value);
});
obj.forEach(function (value, index) {
console.log(index, value); //出错
});jQuery的each方法是可以遍历伪数组的
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
*/
$.each(arr, function (index, value) {
console.log(index, value);
});
$.each(obj, function (index, value) {
console.log(index, value);
});静态方法map方法
实例如下：
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};和原生的forEach一样,不能遍历的伪数组
/*
第一个参数: 当前遍历到的元素
第二个参数: 当前遍历到的索引
第三个参数: 当前被遍历的数组
*/
arr.map(function (value, index, array) {
console.log(index, value, array);
});
obj.map(function (value, index, array) {
console.log(index, value, array);//报错
});和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
/*
第一个参数: 要遍历的数组
第二个参数: 每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数: 遍历到的元素
第二个参数: 遍历到的索引
*/
$.map(arr, function (value, index) {
console.log(index, value);
});var res = $.map(obj, function (value, index) {
console.log(index, value);
return value + index;//[1, 4, 7, 10, 13]
});
var res2 = $.each(obj, function (index, value) {
console.log(index, value);
return value + index;//{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}
});jQuery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组
不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return 对遍历的数组进行处理, 然后 生成一个新的数组返回
静态方法holdReady方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-静态方法holdReady方法</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>其他静态方法
$.trim();
作用: 去除字符串两端的空格
参数: 需要去除空格的字符串
返回值: 去除空格之后的字符串
var str = " lnj ";
var res = $.trim(str);
console.log("---"+str+"---"); //--- lnj ---
console.log("---"+res+"---") ;//---lnj---// 真数组
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; $.isWindow();
作用: 判断传入的对象是否是window对象
返回值: true/false
var res = $.isWindow(w);
console.log(res); $.isArray();
作用: 判断传入的对象是否是真数组
返回值: true/false
var res = $.isArray(w);
console.log(res); $.isFunction();
作用: 判断传入的对象是否是一个函数
返回值: true/false
注意点:
jQuery框架本质上是一个函数
(function( window, undefined ) {
})( window );
var res = $.isFunction(jQuery);
console.log(res);//true
