探索jQuery 探索jQuery

·jQuery是什么？
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。（摘自jQuery中文文档）
其实jQuery就是接受一个元素，返回一个新的对象，这个对象有新的API
那接受一个元素，返回一个新的对象可以用如下代码表示

文章图片
image.png
为了方便使用，像Node一样加入window中，结果是一样的，注意返回的结果统一为伪数组。（重点理解）

文章图片
image.png 想要让这个返回的对象有新的API，就利用对象的特点，在nodes对象中添加。

这样就可以通过addClass增加class

var $li = jQuery('li') $li.addClass('red')var $ul = jQuery(ul) $ul.addClass(['blue','red'])

文章图片
image.png 增加获取text或者修改text的API

window.jQuery = function (nodeOrSelector) { let nodes = {} if (typeof nodeOrSelector === 'string') { nodes = document.querySelectorAll(nodeOrSelector) } else if (nodeOrSelector instanceof Node) { nodes = { 0: nodeOrSelector, length: 1 } }nodes.addClass = function (classes) { if (classes instanceof Array) { classes.forEach(function (value) { for (let i = 0; i < nodes.length; i++) { nodes[i].classList.add(value) } }) } else { for (let i = 0; i < nodes.length; i++) { nodes[i].classList.add(classes) } } } //////////////////////添加text属性 nodes.text = function (text) { if (text === undefined) { var texts = [] for (let i = 0; i < nodes.length; i++) { texts.push(nodes[i].textContent) } return texts } else { for (let i = 0; i < nodes.length; i++) { nodes[i].textContent = text } } } //////////////////////////////////////////// return nodes}

【探索jQuery】通过text获取或者修改文本内容

小红小明小花 //修改成小黄 var $getText = jQuery('li') var getText = $getText.text() console.log(getText)var $setText = jQuery('li:nth-child(3)') $setText.text('小黄')