探索jQuery

·jQuery是什么？
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。（摘自jQuery中文文档）

其实jQuery就是接受一个元素，返回一个新的对象，这个对象有新的API

那接受一个元素，返回一个新的对象可以用如下代码表示

<ul id='ul'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

 <script>
        var jQuery = function (nodeOrSelector) {
            let nodes = {}
            if (typeof nodeOrSelector === 'string') {
                nodes = document.querySelectorAll(nodeOrSelector)
            }
            else if (nodeOrSelector instanceof Node) {
                nodes = { 0: nodeOrSelector, length: 1 }   
            }
            return nodes
            console.log(nodes)
        }
    </script>

image.png

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

<script>
        window.jQuery = function (nodeOrSelector) {
            let nodes = {}
            if (typeof nodeOrSelector === 'string') { 
                nodes = document.querySelectorAll(nodeOrSelector)//伪数组
            }
            else if (nodeOrSelector instanceof Node) {
                nodes = { 0: nodeOrSelector, length: 1 }   //创建伪数组
            }
            return nodes
            console.log(nodes)
        }
    </script>

image.png

想要让这个返回的对象有新的API，就利用对象的特点，在nodes对象中添加。

<script>
        window.jQuery = function (nodeOrSelector) {
            let nodes = {} //返回的对象！！！
            if (typeof nodeOrSelector === 'string') {
                nodes = document.querySelectorAll(nodeOrSelector)
            }
            else if (nodeOrSelector instanceof Node) {
                nodes = { 0: nodeOrSelector, length: 1 }   
            }

            //////////////////////添加addClass属性
           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)
                    }
                }
            }
            ////////////////////////////////////////////

            return nodes
            
        }
    </script>

这样就可以通过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

            }

通过text获取或者修改文本内容

<ul id='ul'>
        <li>小红</li>
        <li>小明</li>
        <li>小花</li> //修改成小黄
    </ul>

var $getText = jQuery('li')
var getText = $getText.text()
console.log(getText)
            
var $setText = jQuery('li:nth-child(3)')
$setText.text('小黄')

image.png

探索jQuery

推荐阅读更多精彩内容