原生js实现基本选择器

在我们刚接触JavaScript时,在文档中发现一些常选择器,如:document.getElementById,document.getElementsByTagName,document.getElementByName,document.getElementsByClassName等等。再实际应用中,我觉得常用的选择器为id选择器。类选择器,标签选择器。

然而当我们接触到jquery后,习惯用于$(‘xxxx‘)选择器来获取Dom元素。

  当我们用原生JavaScript时,会觉得每次用这些选择器时,都会有一长串代码。再这里,我自己封装了一个通用的jquery式的获取方式在原生JavaScript获取Dom元素。

  

  //获取id 传入 #+id
  //获取class 传入 .+class
  //获取标签 传入 标签名
  function $(obj){
    var which = obj.substr(0, 1);
    var newName =obj.split(which)[1];
    if(which==‘#‘){
      return document.getElementById(newName);
    }else
    if(which==‘.‘){
      return document.getElementsByClassName(newName);
    }else{
      return document.getElementsByTagName(obj);
    }
  }

  这里,我们发现,这个方法使用和jquery的选择器区别不大。当我们要用id选择器时,只需要调用 $(‘#id‘),就可以。class时,调用$(‘.class‘),标签时,调用$(‘p‘),即可。对了习惯了jquery的童鞋来说,非常的方便快捷。

  这里,我们也可以通过 document.querySelector(‘#id||.class||tagname‘),来获取dom元素。

时间: 2024-10-09 02:56:53

原生js实现基本选择器的相关文章

原生js之道——原生js编写类选择器

一.类选择器的概念 类选择器,就是通过class属性获取节点.比如一个html结构中,有三个p标签都具有class="red"的属性,那么类选择器返回的就是这三个p标签. 在jquery中,我们可以很方便的通过$(".red")这种方式按照类获取节点.但是在原生的javascript中,有getElementById(按照id属性获取元素).getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法.因此,编写原生js实现类选择

【前端性能】必须要掌握的原生JS实现JQuery

很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗. 当然,我不是提倡写代码纯用原生JS实现,我记得淘宝玉伯曾经说的一句话“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”. 一些感(fei)想(hua): 1.原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内

放弃jQuery,使用原生js吧!

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx

原生js操作DOM基础-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e0669e4a017e54a31fb39c&source=41#wechat_redirect 使用原生js为了提高效率,纯js操作dom一 查询DOMdocument.querySelector()参数是任意css选择器格式,只会返回第一个匹配到值document.querySelectorAll(

原生js仿jquery一些常用方法

原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.displa

通过了解jquery源码熟悉原生js

目的: 目前可以完成移动端页面基本功能,但是引用的都是别人的插件,方法,框架,并且自己写原生js的时候逻辑不清晰,整体结构混乱,希望可以规整自己的js代码. 1.自己所有的代码都应该在一个封闭的空间内,不污染全局作用域. 实现:自执行函数;(function(global,factory){ factory(global); })(typeof window !== "undefined" ? window : this,function(window,noGlobal){ var j

原生JS实现jquery的链式编程。

这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jquery源码分析(http://www.cnblogs.com/aaronjs/p/3279314.html),自己写出来的一个实现,选择器用的querySelector,关于链式编程也只是返回this而已,这也算是自己看jquery源码解决的第一个问题吧,继续加油. 现在想来当年面试官确实没说错,我jquer

原生 JS 代码和用 jQuery 实现效果各有什么优劣势

通过自己的理解再加上自己收集的一些资料总结如下: 各種封裝,主要目的就是爲了省心,拿jq來說: JQ对不同浏览器的事件,DOM对象,都进行了封装,各种操作都可以直接兼容各种浏览器, 要知道, 不同浏览器的区别不仅仅是在CSS里写"-webkit-"还是"filter"的区别, 连事件模型这种底层的东西都不一样= = JQ特有的CSS-LIKE选择器, 链式写法, 封装的各类animate函数, 封装了的异步加载, 都大幅提高了开发效率, 减少重复劳动 JQ用dela

进阶前端高级攻城狮:使用单体模式设计原生js插件

----------基于上次写的jquery插件进行改造  http://www.cnblogs.com/GerryOfZhong/p/5533773.html 背景:jQuery插件依赖jQuery库,虽然jQuery使用十分广泛,但是对于移动开发或者在其他带宽需求需要注意的时候,就得考虑,因为我不可能完成一项技术相对来说引用了一个更大的库,这样之不值得的.所以原生js是所有浏览器都支持的一种语言,原生js相对来说就very good了,但是原生js相对新手或者没有很强基础的人来说还是相对比较