美文网首页
jQuery获取对象原理

jQuery获取对象原理

作者: IT小池 | 来源:发表于2018-12-30 11:07 被阅读0次

cdn地址:
http://cdn.xiaochiwz.cn/jsxcc.js
http://cdn.xiaochiwz.cn/jsxcc.min.js
上面两个是我写了放到cdn上的外链,可以直接script标签引入
注:引用方式与jqeury一样,使用方式也与jquery一样,大同小异
使用方式:

$ 或 JS(大写) 或 xc(大小写均可),如:$('#box')或JS('#box') 或 xc('#box')

写的这个东西整合了cookie、ajax、滚轮事件等,不用再另外引入,另外,一些的动画、事件等等也都实现了,虽然不像jQuery那么强大,但也算五脏俱全了吧,也做了兼容,可能个别的只能兼容到IE8,大部分还是能兼容到IE6的。
这只是写的一个简单类似的jQuery实现的封装,大致跟 jq 差不多,, jq肯定更加复杂、更加全面,想要更全面的,建议还是去看jq源码,这里只是我简单的写了下,提供一下思路,需要的小伙伴肯定会受益良多,也欢迎大神指点,代码如下:

<script>
   // 获取jq对象
      function Init(prap) {
          var arr = [],
              Tprap = (typeof prap).toLowerCase();
          if (Tprap == 'object') {// 获取单一对象
              // 注意:getElementById()获取单个的有nodeName,而类似getElementsByClassName获取的是集合的没有nodeName(且为undefined)
              if (prap == window || prap.nodeType) {// window 和 内数组 节点类型为 undefined
                  arr[0] = prap;
              } else {// 获取类数组对象
                  var prapLeng = prap.length;
                  for (var i = 0; i < prapLeng; i++) {
                     arr[i] = prap[i];
                  }
              }
          } else if (Tprap == 'string') {
              var prapArr = prap.replace(/\s+/g,' ').replace(/^\s+|\s+$/g,'').split(' '),
                  lengParap = prapArr.length,
                  index = 0;
              arr = search(prapArr[0],[document]);// 第一次找是从 documen 开始
              function search(strDom,parentArr){ // 递归的方法 去找 如:找a $('#box p a')
                  var Leng = parentArr.length,
                      newArr = [];
                  for (var i = 0; i < Leng; i++) {
                     // i = 0 时,拼接一个 P 到 newArr 里,并返回一个新的数组
                     newArr = newArr.concat(getElement(strDom,parentArr[i]));// 可能很多个div 下面的 p 下面的 a,把有数组的对象全部拼接成一个数组
                  }
                  if (index == lengParap-1) {
                      return newArr;
                  } else {
                      return search(prapArr[++index],newArr);
                  }
              }
              function getElement(str,parent) {
                  var getArr = [];
                  if (str[0] == '#') { // id 方法
                      getArr[0] = document.getElementById(str.replace(/#/,''));
                  } else if (str[0] == '.') { // class 方法
                      if (parent.getElementsByClassName) {
                          var classArr = parent.getElementsByClassName(str.replace(/\./,'')),
                              cLeng = classArr.length;
                          for (var i = 0; i < cLeng; i++) {
                              getArr[i] = classArr[i];
                          }
                      } else {
                          var tagArr = parent.getElementsByTagName('*'),
                              tLeng = tagArr.length,
                              reg = new RegExp('(^|\\s)'+str.replace(/\./,'')+'(\\s|$)');
                         for (var i = 0; i < tLeng; i++) {
                             if (reg.test(tagArr[i].className)) {
                              getArr[i] = tagArr[i];
                             }
                         }
                      }
                  }else{ // Tag 方法
                      var TagArr = parent.getElementsByTagName(str),
                          Tleng = TagArr.length;
                      for (var i = 0; i < Tleng; i++) {
                          getArr[i] = TagArr[i];
                      }
                  }
                  return getArr;
              }
          }
          var leng = arr.length;
          for (var i = 0; i < leng; i++) {
              this[i] = arr[i];
          }
          return arr.length;
      }
</script>

相关文章

网友评论

      本文标题:jQuery获取对象原理

      本文链接:https://www.haomeiwen.com/subject/dzfvlqtx.html