阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      模拟 jquery 的 $ 选择器

      模拟 jquery 的 $ 选择器

      直接看代码的吧

      
      /*********************************************
        JS 模拟 jQuery 选择器
        by http://www.cnblogs.com/zjfree
        Date 2012-02-22
      
        已实现:
        $('#div1') ID 选择器 (直接返回对象)
        $('.aCur') 类选择器
        $('div') 元素选择器
        $('#div1 li') 组合选择器
        $('input[type=text]:checked') 属性值选择器
        $('a', myDiv) 选择 myDiv 下的所有 a 元素
      /*********************************************/
      
      //q 查询表达式 o 父对象
      function $(q, o){
          //debugger;
          // 查询表达式必须为字符串,并且不能为空。
          if(typeof(q)!=='string' || q == '') return [];
      
          // 使用空格分割,只处理第一个表达式
          var ss = q.split(' ');
      
          // 获取属性
          var attr = '';
          var s = ss[0].split(':')[0];
          if(s != ss[0])
              attr = ss[0].split(':')[1];
      
          var val = s.split('[')[0];
          if(val != s)
              val = s.split('[')[1].replace(/[",\]]/g,'');
          else
              val = '';
          s = s.split('[')[0];
      
          var obj = [];
          var sObj = null;
          // 当父对象不存在时,使用 document;
          o = o || document;
          switch(s.charAt(0))
          {
              case '#':
                  //ID 选择器
                  sObj = document.getElementById(s.substr(1));
                  if(sObj)obj.push(sObj);
                  break;
              case '.':
                  // 类选择器
                  var l = o.getElementsByTagName('*');
                  var c = s.substr(1);
                  for(var i=0; i<l.length; i++)
                  if(l[i].className.search('\\b' + c + '\\b')!=-1)obj.push(l[i]);
                  break;
              default:
                  // 根据 tag 获取元素
                  obj = o.getElementsByTagName(s);
                  break;
          }
      
          if(val)
          {
              //[t=val] 筛选属性匹配
              var l = [];
              var a = val.split('=');
              for(var i=0; i<obj.length; i++)
                  if(a.length == 2 && obj[i](a[0)] == a[1]) l.push(obj[i]);
              obj = l;
          }
      
          if(attr)
          {
              //: 筛选属性匹配
              var l = [];
              for(var i=0; i<obj.length; i++)
                  if(obj[i](attr)) l.push(obj[i]);
              obj = l;
          }
      
          if(ss.length > 1)
          {
              // 递归处理表达式后续内容
              // 父元素为已获取的所有元素
              var l = [];
              for(var i=0; i<obj.length; i++){
                  var ll = arguments.callee(q.substr(ss[0].length+1), obj[i]);
                  if(ll.tagName) l.push(ll);
                  else
                  for(var j=0; j<ll.length; j++)l.push(ll[j]);
              }
              obj = l;
          }
      
          if(sObj && ss.length == 1){
              // 当为 ID 选择器时,直接返回对象。
              obj=sObj;
              if(obj)obj.length = 1;
          } else {
              // 去除数组中重复元素
              var l = [];
              for(var i=0; i<obj.length; i++)obj[i].$isAdd = false;
              for(var i=0; i<obj.length; i++){
                  if(!obj[i].$isAdd){
                      obj[i].$isAdd = true;
                      l.push(obj[i]);
                  }
              }
              obj = l;
          }
      
          return obj;
       }
      

      更多面试题

      如果你想了解更多的前端面试题,请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题,让你面试更加顺利。

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录