原

Jquery选择器的简单实现

1969人阅读 2019/4/4 16:09 总访问：1969 评论：0 收藏：0 手机

分类: 随笔

一、原生JS提供给我们的选择器

document.getElementById();
document.getElementsByTagName();
...

这是以前常用的，但是实际上几乎所有的浏览器都给我们提供了如下的方法让我们可以快速的获取元素

document.querySelector(parameter);//查找满足满足参数的第一个元素
document.querySelectorAll(parameter);//查找满足参数的全部元素
//这里的参数其实就是CSS选择器的写法

通过上面的两个函数我们其实很容易实现Jqeury的选择器了。

//先声明一个对象
function Selector(o){
    var eles = document.querySelectorAll(o);
    //我们来实现val函数 获取值
    eles.val = function(){
        var value = [];
        for(var i =0;i<eles.length;i++){
            value.push(eles[i].value);
        }
        return eles.length==1?value[0]:value;
    }
    //返回eles对象
    return eles;
}
//给window对象添加属性
window.Jquery = function(o){
    return new Selector(o);
};
window.$=Jquery;

然后就可以通过 $("选择器")进行调用了。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" value="123"/>
<script>
function Selector(o){
var eles = document.querySelectorAll(o);
eles.val = function(){
var values= [];
for(var i = 0;i<this.length;i++){
values.push(this[i].value);
}

return values.length==1?values[0]:values;
}

return eles;
}

window.Jquery = function(o){
return new Selector(o);
}
window.$=Jquery;
</script>
</body>
</html>

试试$("input").val()能否获取到123。

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

Taylor

没有个性，不需要签名

博主信息

排名

文章

粉丝

文章类别

随笔 1篇

Jquery选择器的简单实现

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}