分类:
随笔
一、原生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。
评价
排名
141
文章
1
粉丝
0
评论
0
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：
50010702506256
50010702506256
欢迎加群交流技术