这两天刚开始学习JQuery,可以说jQuery是JS中使用的函数库,函数库就是一种特定种类的API,调用jQuery,就是直接调用一个函数库中的函数,而这些函数是可以自己定义的,这里我就自己定义了一个包含两个函数的函数库。并做一个简单的记录。
废话不多说,直接上代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> -->这一句是调用官方的jQuery库,此处需要自己定义一个,所以需要将其注销
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="x1"></div>
<div id="x2"></div>
<div id="x3"></div>
<div id="x4"></div>
<div id="x5"></div>
</body>
</html>
CSS:
div{
width:10px;
height:10px;
border:1px solid black;
margin:10px 0;
}
.red{
background:red;
}
为创建的5个div添加样式
主要就是以上的显示情况。
现在在JS中编写自己得jQuery,
JS:
window.jQuery = function(nodeOrSelector){
let nodes = {} // 此处设置一个空对象,主要是为了存储传入字符串或者选择器对应的元素
if(typeof nodeOrSelector === 'string'){ //如果传入的是字符串
let tem = document.querySelectorAll(nodeOrSelector) //取一个中间变量,得到字符串对应的所有元素
for(let i=0;i<tem.length;i++){
nodes[i] = tem[i]
} //将所有的中间变量都放到最开始定义的空对象中
nodes.length = tem.length //将临时中间变量的长度赋值给nodes对象中
}else if(nodesOrSelector instanceof Node){ //如果传入的不是字符串或则选择器,那么就将nodes变为包含传入对象的伪数组
nodes = {
0:nodeOrSelector,
1:length
}
}
nodes.addClass = function(classes){ //在此就定义一个addClass函数,其主要作用就是为输入的元素添加class属性
[classes].forEach((value)=>{ //由于传入的classes是字符串,所以此处需要将其转换为一个数组的形式进行操作
for(let i=0;i<nodes.length;i++){
nodes[i].classList.add(value) //为每一个div的class属性都添加输入的值
}
})
}
nodes.setText = function(text){ //定义另一个函数,这个函数能实现对输入的元素添加text的内容
for(let i=0;i<nodes.length;i++){
nodes[i].textContent = text
}
}
return nodes
}
window.$ = jQuery // 此处主要是将jQuery的名字变为$,这样方便在后面的代码中使用
var $div = $('div') //为了将对页面中的div进行操作,对所有的div放入到一个$div的对象中
$div.addClass('red') //这个时候调用已经定义好的jQuery中的函数,从而实现了对所有的div添加一个red的class属性
$div.setText('hi') //此处调用的是定义的jQuery中的setText属性,这个属性实现的功能是为div添加一个内容为hi的文档内容
实现的效果如下图:
以上便实现了自己定义的一个jQuery,这个jQuery比较简单,需要学习的jQuery的文档有:
https://api.jquery.com/ 这是一个英文的网站,当然也可以搜索中文文档
https://www.jquery123.com/ 这便是中文文档