addClass
<!--
* @Author: 码小余
* @Date: 2020-06-27 08:23:36
* @LastEditTime: 2020-06-27 08:26:43
* @FilePath: \代码\jQuery原理\20-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>20-jQuery属性操作相关方法</title>
<!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.3.0.js"></script>
<script>
$(function () {
/*
6.addClass(): 给元素添加一个或多个指定的类
*/
// 传递参数, 如果元素中没有指定类就添加, 有就不添加
// 会返回this方便链式编程
// console.log($("div").addClass("abc"));
console.log($("div").addClass("abc def"));
// 没有传递参数,不做任何操作,返回this
// console.log($("div").addClass());
// "aabb" + " " + "abc" = "aabb abc"
});
</script>
</head>
<body>
<div class="aabb abc"></div>
<div class="aabb"></div>
</body>
</html>
addClass实现原理
addClass: function (name) {
if (arguments.length === 0) return this;
// 1. 对传入的类名进行切割
var names = name.split(" ");
// 2. 遍历取出所有的元素
this.each(function (key, ele) {
// 3. 遍历数组取出每一个类名
$.each(names, function (k, value) {
// 4. 判断指定元素中是否包含指定的类名
if (!$(ele).hasClass(value)) {
ele.className = ele.className + " " + value;
}
});
});
return this;
},
removeClass
<!--
* @Author: 码小余
* @Date: 2020-06-27 08:40:59
* @LastEditTime: 2020-06-27 08:43:50
* @FilePath: \代码\jQuery原理\21-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>21-jQuery属性操作相关方法</title>
<!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.3.0.js"></script>
<script>
$(function () {
/*
7.removeClass(): 删除元素中一个或多个指定的类
*/
// 传递参数, 如果元素中有指定类就删除
// 会返回this方便链式编程
// console.log($("div").removeClass("aabb"));
// console.log($("div").removeClass("aabb abc"));
// 没有传递参数, 删除所有类
console.log($("div").removeClass());
});
</script>
</head>
<body>
<div class="aabb abc"></div>
<div class="abc"></div>
</body>
</html>
removeClass实现原理
removeClass: function (name) {
if (arguments.length === 0) {
this.each(function (key, ele) {
ele.className = "";
});
} else {
// 1.对传入的类名进行切割
var names = name.split(" ");
// 2.遍历取出所有的元素
this.each(function (key, ele) {
// 3.遍历数组取出每一个类名
$.each(names, function (k, value) {
// 4.判断指定元素中是否包含指定的类名
if ($(ele).hasClass(value)) {
ele.className = (" " + ele.className + " ").replace(
" " + value + " ",
""
);
// 去除两端空格
ele.className = njQuery.trim(ele.className);
}
});
});
}
return this;
},
toggleClass
<!--
* @Author: 码小余
* @Date: 2020-06-27 08:51:39
* @LastEditTime: 2020-06-27 08:52:22
* @FilePath: \代码\jQuery原理\22-jQuery属性操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>22-jQuery属性操作相关方法</title>
<!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.3.0.js"></script>
<script>
$(function () {
/*
8.toggleClass(): 没有则添加,有则删除
*/
// 传递参数, 如果元素中没有指定类就添加, 有就不添加
// 会返回this方便链式编程
console.log($("div").toggleClass("abc"));
// console.log($("div").toggleClass("aabb abc"));
// 没有传递参数, 删除所有类
// console.log($("div").toggleClass());
});
</script>
</head>
<body>
<div class="aabb abc"></div>
<div class="aabb abc"></div>
</body>
</html>
toggleClass实现原理
toggleClass: function (name) {
if (arguments.length === 0) {
this.removeClass();
} else {
// 1.对传入的类名进行切割
var names = name.split(" ");
// 2.遍历取出所有的元素
this.each(function (key, ele) {
// 3.遍历数组取出每一个类名
$.each(names, function (k, value) {
// 4.判断指定元素中是否包含指定的类名
if ($(ele).hasClass(value)) {
// 删除
$(ele).removeClass(value);
} else {
// 添加
$(ele).addClass(value);
}
});
});
}
return this;
},
on
<!--
* @Author: 码小余
* @Date: 2020-06-28 07:25:19
* @LastEditTime: 2020-06-28 07:51:46
* @FilePath: \代码\jQuery原理\24-jQuery事件操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>24-jQuery事件操作相关方法</title>
<script src="js/njQuery-1.4.0.js"></script>
<script>
$(function () {
/*
1.on(type, callback): 注册事件
2.off(type, callback): 移出事件
*/
/*
1.注册多个相同类型事件, 后注册的不会覆盖先注册的
2.注册多个不同类型事件, 后注册的不会覆盖先注册的
*/
var btn = document.querySelector("button");
function addEvent(dom, name, callBack) {
if (!dom.eventsCache) {
dom.eventsCache = {};
}
if (!dom.eventsCache[name]) {
dom.eventsCache[name] = [];
dom.eventsCache[name].push(callBack);
if (dom.addEventListener) {
dom.addEventListener(name, function () {
for (var i = 0; i < dom.eventsCache[name].length; i++) {
dom.eventsCache[name][i]();
}
});
} else {
dom.attachEvent("on" + name, function () {
for (var i = 0; i < dom.eventsCache[name].length; i++) {
dom.eventsCache[name][i]();
}
});
}
} else {
dom.eventsCache[name].push(callBack);
}
}
function test1() {
alert("click1");
}
function test2() {
alert("click2");
}
function test3() {
alert("mouseenter");
}
function test4() {
alert("mouseleave");
}
// btn.eventsCache = [test1, test2];
addEvent(btn, "click", test1);
addEvent(btn, "click", test2);
addEvent(btn, "mouseenter", test3);
addEvent(btn, "mouseleave", test4);
});
</script>
</head>
<body>
<button>我是按钮1</button>
<button>我是按钮2</button>
</body>
</html>
on的实现原理
on: function (name, callBack) {
// 1. 遍历取出所有元素
this.each(function (key, ele) {
// 2. 判断当前元素是否有保存所有事件的对象
if (!ele.eventsCache) {
ele.eventsCache = {};
}
// 3.判断对象中有没有对应类型的数组
if (!ele.eventsCache[name]) {
ele.eventsCache[name] = [];
// 4.将回调函数添加到数据中
ele.eventsCache[name].push(callBack);
// 5.添加对应类型的事件
njQuery.addEvent(ele, name, function () {
njQuery.each(ele.eventsCache[name], function (k, method) {
method.call(ele);
});
});
} else {
// 6.将回调函数添加到数据中
ele.eventsCache[name].push(callBack);
}
});
return this;
},
off
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-jQuery事件操作相关方法</title>
<!--<script src="../jQuery原理/js/jquery-1.12.4.js"></script>-->
<script src="js/njQuery-1.4.0.js"></script>
<script>
$(function () {
/*
1.on(type, callback): 注册事件
2.off(type, callback): 移出事件
*/
function test1() {
alert("hello click1");
}
function test2() {
alert("hello click2");
}
function test3() {
alert("hello mouseenter");
}
$("button").on("click", test1);
$("button").on("click", test2);
$("button").on("mouseenter", test3);
/*
btn.eventsCache = {
click: [test1, test2],
mouseenter: [test3]
}
*/
// 1.不传参, 会移除所有事件
// $("button").off();
// 2.传递一个参数, 会移除对应类型所有事件
// $("button").off("click");
// 3.传递两个参数, 会移除对应类型对应事件
$("button").off("click", test1);
});
</script>
</head>
<body>
<button>我是按钮1</button>
<button>我是按钮2</button>
</body>
</html>
off的实现原理
off: function (name, callBack) {
// 1. 判断是否没有传入参数
if (arguments.length === 0) {
this.each(function (key, ele) {
ele.eventsCache = {};
});
}
// 2. 判断是否传入一个参数
else if (arguments.length === 1) {
this.each(function (key, ele) {
ele.eventsCache[name] = [];
});
}
// 3. 判断是否传入两个参数
else if (arguments.length === 2) {
this.each(function (key, ele) {
njQuery.each(ele.eventsCache[name], function (index, method) {
if (method === callBack) {
ele.eventsCache[name].splice(index, 1);
}
});
});
}
return this;
},
clone
<!--
* @Author: 码小余
* @Date: 2020-06-28 09:24:30
* @LastEditTime: 2020-06-28 09:41:19
* @FilePath: \代码\jQuery原理\27-jQueryDOM操作相关方法.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>27-jQueryDOM操作相关方法</title>
<script src="js/njQuery-1.4.0.js"></script>
<script>
$(function () {
/*
1.clone: 复制一个元素
*/
$("button")
.eq(0)
.on("click", function () {
// 1. 浅复制一个元素
var $li = $("li").clone(false);
console.log($li);
// 2. 将复制的元素添加到ul中
$("ul").append($li);
});
$("button")
.eq(1)
.on("click", function () {
// 1. 深复制一个元素
var $li = $("li").clone(true);
// 2. 将复制的元素添加到ul中
$("ul").append($li);
});
/*
li.eventsCache = {
click: [];
};
*/
$("li").on("click", function () {
alert($(this).html());
});
var li = document.querySelector("li");
li.onclick = function (ev) {
alert(123);
};
var temp = JSON.parse(JSON.stringify(li));
var ul = document.querySelector("ul");
ul.appendChild(temp);
});
</script>
</head>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
</ul>
</body>
</html>
clone的实现原理
clone: function (deep) {
var res = [];
// 判断是否是深复制
if (deep) {
// 深复制
this.each(function (key, ele) {
var temp = ele.cloneNode(true);
// 遍历元素中的eventsCache对象
njQuery.each(ele.eventsCache, function (name, array) {
// 遍历事件对应的数组
njQuery.each(array, function (index, method) {
// 给复制的元素添加事件
$(temp).on(name, method);
});
});
res.push(temp);
});
return $(res);
} else {
// 浅复制
this.each(function (key, ele) {
var temp = ele.cloneNode(true);
res.push(temp);
});
return $(res);
}
},