核心函數(shù)
$();//jQuery原理();就代表調(diào)用jQuery的核心函數(shù)
1.接收一個(gè)函數(shù)
$(function(){
alert("hi")
});
2.1接收一個(gè)字符串選擇器 返回一個(gè)jQuery對(duì)象, 對(duì)象中保存了找到的DOM元素
$(function () {
var $p = $("<p>我是段落</p>");
console.log($p);
});
2.2接收一個(gè)代碼片段 返回一個(gè)jQuery對(duì)象, 對(duì)象中保存了創(chuàng)建的DOM元素
$(function () {
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);
});
3.接收一個(gè)DOM元素 會(huì)被包裝成一個(gè)jQuery對(duì)象返回給我們
$(function () {
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
});
jQuery對(duì)象
jQuery對(duì)象是一個(gè)偽數(shù)組
(偽數(shù)組 有0到length-1的屬性,并且有l(wèi)ength屬性)
靜態(tài)方法 實(shí)例方法
// 1.定義一個(gè)類(lèi)
function AClass() {
}
// 2.給這個(gè)類(lèi)添加一個(gè)靜態(tài)方法
// 直接添加給類(lèi)的就是靜態(tài)方法
AClass.staticMethod = function () {
alert("staticMethod");
}
// 靜態(tài)方法通過(guò)類(lèi)名調(diào)用
AClass.staticMethod();
// 3.給這個(gè)類(lèi)添加一個(gè)實(shí)例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 實(shí)例方法通過(guò)類(lèi)的實(shí)例調(diào)用
// 創(chuàng)建一個(gè)實(shí)例(創(chuàng)建一個(gè)對(duì)象)
var a = new AClass();
// 通過(guò)實(shí)例調(diào)用實(shí)例方法
a.instanceMethod();
靜態(tài)方法
靜態(tài)方法each方法
原生js
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);
}); //報(bào)錯(cuò)
value 第一個(gè)參數(shù): 遍歷到的元素
index 第二個(gè)參數(shù): 當(dāng)前遍歷到的索引
注意點(diǎn):
原生的forEach方法只能遍歷數(shù)組, 不能遍歷偽數(shù)組
利用jQuery的each靜態(tài)方法遍歷數(shù)組
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);
});
value 第一個(gè)參數(shù): 當(dāng)前遍歷到的索引
index 第二個(gè)參數(shù): 遍歷到的元素
注意點(diǎn):
jQuery的each方法是可以遍歷偽數(shù)組的
靜態(tài)方法map方法
原生js
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);
});
value 第一個(gè)參數(shù): 當(dāng)前遍歷到的元素
index 第二個(gè)參數(shù): 當(dāng)前遍歷到的索引
array 第三個(gè)參數(shù): 當(dāng)前被遍歷的數(shù)組
注意點(diǎn):
和原生的forEach一樣,不能遍歷的偽數(shù)組
map
$.map(arr, function (value, index) {
console.log(index, value);
});
value 第一個(gè)參數(shù): 要遍歷的數(shù)組
index 第二個(gè)參數(shù): 每遍歷一個(gè)元素之后執(zhí)行的回調(diào)函數(shù)
回調(diào)函數(shù)的參數(shù):
value 第一個(gè)參數(shù): 遍歷到的元素
index 第二個(gè)參數(shù): 遍歷到的索引
注意點(diǎn):
和jQuery中的each靜態(tài)方法一樣, map靜態(tài)方法也可以遍歷偽數(shù)組
jQuery中的each靜態(tài)方法和map靜態(tài)方法的區(qū)別:
each靜態(tài)方法默認(rèn)的返回值就是, 遍歷誰(shuí)就返回誰(shuí)
map靜態(tài)方法默認(rèn)的返回值是一個(gè)空數(shù)組
each靜態(tài)方法不支持在回調(diào)函數(shù)中對(duì)遍歷的數(shù)組進(jìn)行處理
map靜態(tài)方法可以在回調(diào)函數(shù)中通過(guò)return對(duì)遍歷的數(shù)組進(jìn)行處理, 然后生成一個(gè)新的數(shù)組返回
