JQ введение
jQuery — это эффективная, оптимизированная и многофункциональная библиотека инструментов JavaScript.
jquery значительно упрощает операции с DOM, делая программирование проще и эффективнее, чем просто запись на js
. загрязнение глобальных переменных вместо определения переменных по одной, как js
принцип инкапсуляции jq
- js имеет только одну глобальную область кода, что приведет к перезаписи значения переменной с таким же именем. '
- Используйте инкапсуляцию объектов, чтобы инкапсулировать код в объект, но если объект будет перезаписан, все они будут недействительными, и риск чрезвычайно высок.
- Используйте фабричный шаблон для инкапсуляции кода, но это не решает проблему.
- Удалите инкапсулированное имя функции, чтобы избежать перезаписи, но функция не может быть вызвана
- Анонимный самовызов. 'Его можно вызвать один раз при загрузке страницы, но нельзя вызывать повторно, и нет возможности получить данные.
- Используя замыкания, данные в теле функции не могут быть получены в глобальной области. Используйте переменную с большей областью действия для записи значения переменной с меньшей областью действия.
Далее мы вручную инкапсулируем jq
конструктор jq
(function () {
// 匿名函数自执行
// jq的构造函数
function jQuery(selector) {
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
})();
Определяет явный прототип конструктора jq
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
jquery: "9.0.0",
length: 0,
get(index) {
return this[index];
},
}
функция инициализации jq
jQuery.fn.init = function (selector) {
};
Позвольте новой инициализации генерировать объекты, которые имеют все методы прототипа отображения jq.
jQuery.fn.init.prototype = jQuery.fn;
Глобальный доступ к jQuery и $
window.$ = window.jQuery = jQuery;
jq-пакет
(function () {
// 匿名函数自执行
// jq的构造函数
function jQuery(selector) {
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
// 定义JQuery构造函数的显示原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
jquery: "9.0.0",
length: 0,
get(index) {
return this[index];
},
click(callback) {
// 点击事件
// 单击时让this的每个元素执行callback回调函数
for (var i = 0; i < this.length; i++) {
this[i].addEventListener("click", callback);
}
},
toggle() {
// 切换
// 遍历每个元素如果display不是none就隐藏，否则就显示
for (var i = 0; i < this.length; i++) {
if (this[i].style.display != "none") {
this[i].style.display = "none";
} else {
this[i].style.display = "block";
}
}
return this;
},
addClass(data) {
// 添加类
for (var i = 0; i < this.length; i++) {
this[i].classList.add(data);
}
},
removeClass(data) {
// 删除类
for (var i = 0; i < this.length; i++) {
this[i].classList.remove(data);
}
},
hide() {
// 隐藏
for (var i = 0; i < this.length; i++) {
this[i].style.display = "none";
}
},
show() {
// 显示
for (var i = 0; i < this.length; i++) {
this[i].style.display = "block";
}
},
};
var isReady = false; // 当前dom是否加载完毕
var readyList = []; // 等待要被执行的函数包
// 监听domcontentLoade事件
document.addEventListener("DOMContentLoaded", function () {
// 文档加载完毕
// alert("DOMContentLoaded");
// 改变isReady
isReady = true;
// 遍历readyList里面的函数并执行
readyList.forEach((item) => item());
// 做完后清空
readyList = [];
});
// jq初始化函数
jQuery.fn.init = function (selector) {
// 如果传递的是一个函数
if (typeof selector === "function") {
// 如果jQuery已经准备完毕
if (isReady) {
selector();
} else {
// 把他加入到readyList列表中
readyList.push(selector);
}
} else {
// 获取到选择列表
var list = document.querySelectorAll(selector);
// 当前对象的长度
this.length = list.length;
for (var i = 0; i < list.length; i++) {
// 遍历类别对this
this[i] = list[i];
}
}
};
// 让new init 产生对象拥有jQuery显示原型上的所有方法
jQuery.fn.init.prototype = jQuery.fn;
// 全局对jQuery与$可以访问
window.$ = window.jQuery = jQuery;
})();
Метод jq использует
<body>
<h1>jquery还是大哥么？</h1>
<p>是的</p>
<h1>市场占用96.8%</h1>
<button class="qiehuan">切换</button>
<button class="addclass">添加类</button>
<button class="removeclass">移除类</button>
<button class="hide">hide</button>
<button class="show">show</button>
</body>
<script>
// 给button注册一个点击事件
$(".qiehuan").click(function () {
// 让h1切换显示与隐藏
$("h1").toggle();
})
// 添加类
$(".addclass").click(function () {
$("h1").addClass("active");
})
// 删除类
$(".removeclass").click(function () {
$("h1").removeClass("active");
})
// 隐藏
$(".hide").click(function () {
$("h1").hide();
})
// 显示
$(".show").click(function () {
$("h1").show();
})
// ready方法
$(function () {
alert("jq已经加载完毕")
})
</script>
метод расширения
jQuery.extend = jQuery.fn.extend = function(){
//方法体...
var options, name, src, copy, copyIsArray, clone,
target = arguments[ 0 ] || {
},
i = 1,
length = arguments.length,
deep = false;
if ( typeof target === "boolean" ) {
deep = target;
target = arguments[ i ] || {
};
i++;
}
if ( typeof target !== "object" && !isFunction( target ) ) {
target = {
};
}
if ( i === length ) {
target = this;
i--;
}
for ( ; i < length; i++ ) {
if ( ( options = arguments[ i ] ) != null ) {
for ( name in options ) {
src = target[ name ];
copy = options[ name ];
if ( target === copy ) {
continue;
}
if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
( copyIsArray = Array.isArray( copy ) ) ) ) {
if ( copyIsArray ) {
copyIsArray = false;
clone = src && Array.isArray( src ) ? src : [];
} else {
clone = src && jQuery.isPlainObject( src ) ? src : {
};
}
target[ name ] = jQuery.extend( deep, clone, copy );
} else if ( copy !== undefined ) {
target[ name ] = copy;
}
}
}
}
// 返回修改后的对象
return target;
}