美文网首页
实现jQuery的选择器,addClass()和text()

实现jQuery的选择器,addClass()和text()

作者: 前端咸蛋黄 | 来源:发表于2019-03-10 15:30 被阅读0次

一、简述

为了防止和全局对象冲突,先来个window.$,以后美元符号就是我们的jquery的唯一标识。声明jquery变量最好在前面加美元符号,以表示这是jquery查找到的,应该使用jquery的原型链。

二、选择器

就是用javascript自带的querySelectorAll来查找节点,查找到的结果应该放在对象构成的伪数组里,以便更好的添加方法。

三、addClass()

addClass()遇到的问题是函数传入的参数是不定参数,一开始没注意直接遍历了,结果把字符串遍历了。然后又想起来了arguments...

四、text()

这个很简单,直接换了就行……

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div>sb</div>
    <div>sb</div>
    <script>
        window.jQuery = function(nodeOrSelector){
            let nodes = {}
            if(typeof nodeOrSelector === "string"){
                let item = document.querySelectorAll(nodeOrSelector)
                for(let i=0;i<item.length;i++){
                    nodes[i]=item[i]
                }
                nodes.length = item.length
            }
            else if(nodeOrSelector instanceof Node){
                nodes={
                    0:nodeOrSelector,length:1
                }
            }
            nodes.addClass = function(){
                for(let x=0;x<arguments.length;x++){
                    for(let y=0;y<nodes.length;y++){
                        nodes[y].classList.add(arguments[x])
                    }
                }
            }
            nodes.setText = function(text){
                for(let i=0;i<nodes.length;i++){
                        nodes[i].textContent = text
                }
            }
            return nodes
        }
        window.$ = jQuery
        var $div = $('div')
        $div.addClass("red")
        $div.setText('hi')
    </script>
</body>
</html>

相关文章

网友评论

      本文标题:实现jQuery的选择器,addClass()和text()

      本文链接:https://www.haomeiwen.com/subject/dhgupqtx.html