• 本站域名:OceanCoder.cn 若您喜欢本站,请添加至收藏夹!
  • 网站少部分资源来源自网络,如有侵犯您的权益,请联系站长删除!
  • 本站所有文章,除特殊标明外,皆为本人原创,转载请注明出处,谢谢合作!
  • 本站所下载的资源,若无特殊说明,使用统一解压密码:oceancoder.cn
  • 本站已实现布局自适应,支持手机端、pad端访问,欢迎体验
  • 本站部分资源可通过微信公众号留言获取,欢迎体验

原生JavaScript实现JQuery的选择器$功能

HTML+CSS+JS OceanCoder 2018-01-20 3251 次浏览 0个评论

写浏览器插件的时候,希望能像jQuery那样快速获取目标元素,而不是通过简单的getElementById取得。

引入jQuery又会增加插件体积,而自己的需求又比较简单,于是可以这样做:


1.获取页面所有的div

  /* jQuery */
    $("div")
  
   /* js */
        document.getElementsByTagName("div")

2.获取某类名相同的一群元素

  /* jQuery */ 
    $(".my-class")
 
    /*js */
         document.querySelectorAll(".my-class")
 
     /* js */
         document.getElementsByClassName("my-class")

3.更复杂的一些选择器

  /* jQuery */        
  $(".my-class li:first-child")      
  
  /* js*/       
  document.querySelectorAll(".my-class li:first-child")
   
   /* jQuery */      
   $(".my-class").get(0)     
   
   /* js */       
   document.querySelector(".my-class")


已有 3251 位网友参与,快来吐槽:

发表评论