jQuery
jQuery是一个JavaScript的函数库,可以简便的去操作dom元素以及提供了很多的插件。
今天简单的模拟一下jQuery的底层,去操作dom元素,以及修改css样式。
首先我们使用一个立即执行函数封装它,封闭它的作用域。
在使用jQuery时我们直接使用$符号就可以使用它,是因为将jQuery挂载到了全局对象window上,所以可以直接使用。
然后我们在jQuery的原型链上创建一个构造函数。在并返回这个构造函数的实例对象
(这个函数仅仅对class,id有效,请自行补充)
<div class="demo">1</div>
<div class="demo" id="demo">2</div>
<div class="demo">3</div>
<script>
(function () {
function jQuery(selector) {
// 返回 init构造出来的实例
return new jQuery.prototype.init(selector);
};
jQuery.prototype.init = function (selector) {
// 创建一个变量获取noedList
var dom = null;
// 给返回的对象添加一个length属性,变成一个类数组对象
this.length = 0;
// 对传进来的参数进行分解
if (selector.indexOf(".") != -1) {
// 判断传进来的参数是否为class
dom = document.getElementsByClassName(selector.slice(1));
} else if (selector.indexOf("#") != -1) {
// 判断传进来的参数是否为id
dom = document.getElementById(selector.slice(1));
} else {
// 格式不对返回一个空对象
return {};
}
// 将nodeList保存的数据传给this指向的空对象
if (dom.length == undefined) {
// 如果是通过id获取的,那他不是一个伪数组,所以没有length属性
// 将dom赋给this的第0项,长度自增
this[0] = dom;
this.length++;
} else {
// 将nodeList里的每一项遍历给this指向的空对象
for (var i = 0; i < dom.length; i++) {
this[i] = dom[i];
this.length++;
}
}
}
// 将jQuery挂载到window上
window.$ = window.jQuery = jQuery;
})();
</script>
然后我们试一试可不可以获取到元素样式
console.log($(".demo"))//写在立即执行函数后面
可以看到我们成功获取了dom元素
修改css样式
jQuery里在获取到了元素后想修改css样式。直接$(".demo").css(‘属性名’,‘属性值’);即可修改css样式。
那么我们想实现这种功能怎么做呢?
首先 css()是直接打点调用的,因为返回的是init的实例对象,所以init要继承jQuery的原型,那么直接最简单的继承,原型=原型
// 让init的原型指向jQuery的原型
jQuery.prototype.init.prototype = jQuery.prototype;
接下来我们分析一下css函数的参数,如果只修改一个样式的话,那么填两个参数,(“属性值”,“属性名”),如果你要修改多个样式,那么只传一个值就可以,一个对象{“属性值1”:“属性名1”,“属性值2”,“属性名3”}。
jQuery.prototype.css = function (key, value) {
// 拆解字符串并将第二单词首字母大写
function keyNew(str) {
// 当属性名有横杠时
if (str.indexOf("-") != -1) {
var arr = str.split("-");
var a = arr[0];
var b = "";
for (var i = 0; i < arr[1].length; i++) {
if (i == 0) {
// 第一个字母大写
b += arr[1][i].toLocaleUpperCase();
} else {
b += arr[1][i];
}
}
return `${a}${b}`;
}
// 没有横杠就不进行字符串拆解
return str;
}
// 当传进来的参数key不是一个对象,给元素添加css样式
if (typeof key != 'object') {
var newKey = keyNew(key);
if (this.length > 1) {
// 如果this有多个值,那给每个元素都添加样式
for (var i = 0; i < this.length; i++) {
this[i].style[newKey] = value;
}
} else {
this[0].style[newKey] = value;
}
} else {
//如果第一个值是一个对象,遍历这个对象,并将属性名传进函数进行拆解
for (var item in key) {
var objKey = keyNew(item);
if (this.length > 1) {
for (var i = 0; i < this.length; i++) {
this[i].style[objKey] = key[item];
}
} else {
this[0].style[objKey] = key[item];
}
}
}
}
css()里的属性名和js里不一样,如果是背景颜色这种样式,是用横杠连接,第二个单词首字母未大写的属性名。
所以就对传进的值进行拆解(如果你就想直接传第二个单词首字母的样式,当我没说);
然后我们试试css函数有没有效
$("#demo").css({
'background-color': 'blue',
'color': 'red',
'font-size': '54px',
'width':"200px",
'height':"200px"
});
可以看到样式添加成功了;
(如果这篇文章有什么问题请及时联系我!)