jQuery作为前端历史中使用时间最长的avascript函数库,其本身具有许多优秀的地方,这段时间通过对jQuery的简单学习,我有了些许了解,jQuery实际上是运用一些巧妙的技巧将DOM中的api进行封装,当人们在调用jQuery函数获取元素时,其返回值并非是获取的元素本身,而是返回一个可以对所获取的元素进行各项操作的函数所组成的对象。
jQuery获取元素
jQuery获取元素的方式实际上就是对DOM获取元素方式的简单封装
window.jQuery=function(selectorOrArray)
{let elements=document.querySelectorAll(selectorOrArray) }
这是最简单的表述。但正如上所说,jQuery获取对应元素的后其返回值是一个函数集对象,而并非元素本身。
jquery链式操作
在返回的函数集对象中,封装着一系列可以对元素进行操作的DOMapi,当程序员调用这些api操作元素之后,其返回值同样是这个函数集对象,而非操作后的元素。这使得jQuery可以对获取的元素进行链式操作即:
jQuery(#test).find(.child).addClass(.red)
jQuery链式操作的巧妙之处在于合理利用this,在用户调用函数对所获取的元素进行操作之后,函数的返回值通常为调用该函数的对象,因此可以写为return this。链式操作是jQuery数据库最为称道的地方。
jQuery中一些常见的操作
接下来,我将为大家介绍一些在jQuery中常见的api:
创造元素
jQuery创造一个元素可以运用函数createElement(string),其代码为:
`function createElement(string) {
const container = document.createElement("template");
container.innerHTML = string.trim();
return container.content.firstChild;
}` 这个代码是先创建一个template容器,然后在该容器中以字符串的形式加入需要创建的元素名称,trim()函数的作用是去除string前面没有被定义的字符串即空格或者回车,使得返回的值为当期需要元素。
增加元素class属性
这个api的代码如下: `addClass(className) {
for (let i = 0; i < this.elements.length; i++) {
const element = this.elements[i];
element.classList.add(className);
}
return this;
},` 采用了遍历的思想,对每一个获取的元素都增加了所要增加的class属性。
jQuery还有其他众多的api可以对元素进行操作,大家有兴趣的可以去看看jQuery的文档。