溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JavaScript下jquery的使用方法”，在日常操作中，相信很多人在JavaScript下jquery的使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript下jquery的使用方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
本文粗燥的實現jquery的ready、each、bind、``$.fn.extend、$.extend
初始化$
(function (win) {
var _$ = function (selector, context) {
/**
* 通常咱們定義一個 函數 var Fun = function(){}
* 然后定義一個 Fun.prototype.init = function(){}
* 那么咱們調用init 的時候 得先要實例化對象 var f = new Fun()
* 然后f.init()
* 這里就省去了 var $ = new $()
*/
return new _$.prototype.Init(selector, context);
};
_$.prototype = {
//初始化$
Init: function (selector, context) {
this.elements = [];
/**
* 傳入的類型是function 就執行ready事件，如果是document 就將document對象插入到this.elements
* 主要就是判斷$(document).ready 和 $(function(){}) 這兩種的ready事件的寫法
*/
if (typeof selector === "function") {
this.elements.push(document);
this.ready(selector);
} else {
var context = context || document;
var isDocument = (ele) =>
Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
"[object Document]";
if (isDocument(selector)) {
this.elements.push(selector);
} else {
/**
* 如果是字符串的話就查詢該節點 $('.class') | $('#id')
*/
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
}
}
},
//實現each
each: function (callback) {},
//實現ready
ready: function (callback) {},
//實現bind
bind: function (type, callback) {},
};
/**
* 讓兩個作用域不一樣的對象共享一個方法，讓他們的原型指向一致，即Init.prototype = _$.prototype
* 那么原型一致之后 就可以共享this.elements 屬性了。
*/
_$.prototype.Init.prototype = _$.prototype;
window.$ = _$;
})(window || global);ready
//實現ready
ready: function (callback) {
var isDocument = (ele) => Object.prototype.toString.call(ele) == '[object HTMLDocument]' || '[object Document]'
//如果已經取得了節點
if (isDocument(this.elements[0])) {
if (document.addEventListener) { //判斷火狐、谷歌
/**
* DOM樹構建完成的時候就會執行DOMContentLoaded
* 頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了，才會觸發window.onload
* 這也就是$(document).ready() 比 window.onload 執行早的原因
*
* arguments.callee 博客里面有一篇文章 [js-遞歸] 里面專門講到了，這里不再解釋了
*/
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false)
callback()
}, false)
} else if (document.attachEvent) { //判斷IE
document.attachEvent('onreadystatechange', function () {
if (document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
callback()
}
})
} else if (document.lastChild == document.body) { //body已經加載完了，就直接回調了
callback()
}
}
},each
//實現each
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, this.elements[i], i);
}
}
},bind
//實現bind
bind: function (type, callback) {
if (document.addEventListener) { //判斷火狐、谷歌
this.each(function (item, i) {
item.addEventListener(type, callback, false)
})
} else if (document.attachEvent) { //判斷IE
this.each(function (item, i) {
item.attachEvent('on' + type, callback)
})
} else {
this.each(function (item, i) { //其他瀏覽器 egg: item.onclick = function(){}
item['on' + type] = callback
})
}
}$.fn.extend/$.extend
$.fn.extend是為查詢的節點對象擴展方法，是基于$的原型擴展的方法
$.extend是擴展常規方法，是$的靜態方法
官方給出解釋：
jQuery.extend(): Merge the contents of two or more objects together into the first object.（把兩個或者更多的對象合并到第一個當中）
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.（把對象掛載到jQuery的prototype屬性，來擴展一個新的jQuery實例方法）
$.fn.extend方法的初衷是我們擴展之后可以用$("").newMetod()這樣訪問，實際上就是給$原型加一個extend方法。這中間的fn其實類似于命名空間的作用，沒什么實際的意義。為的是和$.extend作區分
$.fn.extend
; (function (win) {
...
_$.prototype.Init.prototype = _$.prototype;
_$.fn = _$.prototype; //把對象掛載到jQuery的prototype屬性
var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj //注意這里的this指向是 $.prototype
}
}
}$.extend
var isObj = (o) => Object.prototype.toString().call(o) === '[object Object]';
...
_$.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i]; //注意這里的this指向是 $
}
}
}這倆看上去一模一樣啊，沒啥區別，注釋里面已經說了，this指向不同。咱們來看個例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery.extend()與jQuery.fn.extend()區別</title>
<meta charset="utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<!-- 開始擴展 -->
<script type="text/javascript">
(function ($) {
$.extend({
sayHello: function () {
console.log("Hello");
},
});
$.fn.extend({
sayHello: function () {
console.log("Hello");
},
});
})(jQuery);
</script>
<!-- 調用 -->
<script type="text/javascript">
$(document).ready(function () {
//$.extend擴展調用
$.sayHello();
//$.fn.extend擴展調用
$("#test").sayHello();
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>這樣以來就看的很明白了。jQuery.extend(object); 為擴展jQuery類本身，為自身添加新的方法。$.xxx()
jQuery.fn.extend(object);給jQuery對象添加方法$('#test').xxx()
$.extend常見用法
//在jquery全局對象中擴展一個net命名空間。
$.extend({ net: {} });
//方法擴展到之前擴展的Jquery的net命名空間中去。
$.extend($.net, {
sayHello: function () {
console.log("Hello");
},
});
//extend方法還有一個重載原型
//extend(boolean,dest,src1,src2,src3...),第一個參數boolean代表是否進行深度拷貝
var a = { protocol: "http", hash: { a: 1, b: 2 } };
var b = { host: "chuchur.com", hash: { b: 1, c: 2 } };
var result = $.extend(true, {}, a, b);
console.log(result); //{ protocol: 'http',host: 'chuchur.com', hash: { a: 1, b: 1,c:2 } }
var result = $.extend(false, {}, a, b);
console.log(result); //{ protocol: 'http',host: 'chuchur.com', hash: { b: 1, c:2 } }完整代碼
(function (win) {
var _$ = function (selector, context) {
/**
* 通常咱們定義一個 函數 var Fun = function(){}
* 然后定義一個 Fun.prototype.init = function(){}
* 那么咱們調用init 的時候 得先要實例化對象 var f = new Fun()
* 然后f.init()
* 這里就省去了 var $ = new $()
*/
return new _$.prototype.Init(selector, context);
};
_$.prototype = {
//初始化$
Init: function (selector, context) {
this.elements = [];
/**
* 傳入的類型是function 就執行ready事件，如果是document 就將document對象插入到this.elements
* 主要就是判斷$(document).ready 和 $(function(){}) 這兩種的ready事件的寫法
*/
if (typeof selector === "function") {
this.elements.push(document);
this.ready(selector);
} else {
var context = context || document;
var isDocument = (ele) =>
Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
"[object Document]";
if (isDocument(selector)) {
this.elements.push(selector);
} else {
/**
* 如果是字符串的話就查詢該節點 $('.class') | $('#id')
*/
if (context.querySelectorAll) {
var arr = context.querySelectorAll(selector);
for (var i = 0; i < arr.length; i++) {
this.elements.push(arr[i]);
}
}
}
}
},
//實現each
each: function (callback) {
if (this.elements.length > 0) {
for (var i = 0; i < this.elements.length; i++) {
callback.call(this, this.elements[i], i);
}
}
},
//實現ready
ready: function (callback) {
var isDocument = (ele) =>
Object.prototype.toString.call(ele) == "[object HTMLDocument]" ||
"[object Document]";
//如果已經取得了節點
if (isDocument(this.elements[0])) {
if (document.addEventListener) {
//判斷火狐、谷歌
/**
* DOM樹構建完成的時候就會執行DOMContentLoaded
* 頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了，才會觸發window.onload
* 這也就是$(document).ready() 比 window.onload 執行早的原因
*
* arguments.callee 博客里面有一篇文章 js-遞歸里面專門講到了，這里不再解釋了
*/
document.addEventListener(
"DOMContentLoaded",
function () {
document.removeEventListener(
"DOMContentLoaded",
arguments.callee,
false
);
callback();
},
false
);
} else if (document.attachEvent) {
//判斷IE
document.attachEvent("onreadystatechange", function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
});
} else if (document.lastChild == document.body) {
//body已經加載完了，就直接回調了
callback();
}
}
},
//實現bind
bind: function (type, callback) {
if (document.addEventListener) {
//判斷火狐、谷歌
this.each(function (item, i) {
item.addEventListener(type, callback, false);
});
} else if (document.attachEvent) {
//判斷IE
this.each(function (item, i) {
item.attachEvent("on" + type, callback);
});
} else {
this.each(function (item, i) {
//其他瀏覽器 egg: item.onclick = function(){}
item["on" + type] = callback;
});
}
},
};
/**
* 讓兩個作用于不一樣的對象共享一個方法，讓他們的原型指向一直，即Init.prototype = _$.prototype
* 那么指向之后 就可以共享this.elements 屬性了。
*/
_$.prototype.Init.prototype = _$.prototype;
var isObj = (o) => Object.prototype.toString().call(o) === "[object Object]";
$.fn.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj; //注意這里的this指向是 $.prototype
}
}
//....這里是簡寫
};
_$.extend = function (obj) {
if (isObj(obj)) {
for (var i in obj) {
this[i] = obj[i]; //注意這里的this指向是 $
}
}
//....這里是簡寫
};
window.$ = _$;
})(window || global);到此，關于“JavaScript下jquery的使用方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
