zoukankan      html  css  js  c++  java
  • 模拟jquery封装简单的Select搜索


    var Select=(function () {
    //自定义 select 方法的思路:
    //1> 定义一个 support 对象. 将需要使用的方法进行处理, 得到方法的能力
    //2> 需要使用的可能有兼容性的方法, 定义一个可以完成该方法的函数来替代. 在函数内部进行兼容处理
    //3> 定义 select 函数. 首先看是否支持 qsa, 如果支持直接使用. 如果不支持自己再来实现

    //native code判断是否是内置方法
    var rnative=/[native code]/
    var support={}
    //是否支持querySelectorAll
    support.qsa=rnative.test(document.querySelectorAll) ;
    //是否支持
    support.getElementsByClassName=rnative.test(document.getElementsByClassName)
    //因为document和node的继承关系不一样,所以要做二次判断
    var div=document.createElement('div')
    support.getElementsByClassName2=rnative.test(div.getElementsByClassName)
    support.indexOf=rnative.test(Array.prototype.indexOf);
    support.trim=rnative.test(String.prototype.trim)
    // 在开始将需要的方法定义好
    var push=[].push;
    //解决push的展开伪数组问题兼容性问题,
    //因为无法检测浏览器是否有push,所以只能先尝试判断
    //先尝试是否可行,不行的话就使用自定义方式
    try{
    push.apply([],document.getElementsByTagName('*'));
    }catch(e){
    push={
    apply: function (a,b) {
    for(var i=0;i< b.length;i++){
    a[a.length++]=b[i];
    }
    return a.length;
    },
    call: function (a) {
    for(var i=1;i<arguments.length;i++){
    a[a.length++]=arguments[i];
    }

    //var args=[].slice.call(arguments,1)
    //this.push.apply(a,args)
    }
    }
    }

    //解决indexOf浏览器的兼容的问题
    function indexOf(array,search,starindex){
    starindex=starindex||0;
    if(support.indexOf){
    return array.indexOf(search,starindex)
    }else{
    for(var i=starindex;i<array.length;i++){
    if(array[i]==search){
    return i;
    }
    }
    return -1;
    }
    }


    //解决byclassname的浏览器兼容问题
    function byClassName(classname,node){
    if(node==document&&support.getElementsByClassName||
    node.nodeType==1&&support.getElementsByClassName2){
    return node.getElementsByClassName(classname);
    }else{
    var list=node.getElementsByTagName('*')
    var arr=[];
    for(var i=0;i<list.length;i++){
    // 先判断对象是否有class,如果有的话,则进行下一步
    var cc=list[i].getAttribute('class')
    if(cc){
    //因为可以有多个类名,所以要进行判断
    if(indexOf(cc.split(' '),classname)!=-1){
    arr.push(list[i])
    }
    }
    }
    return arr;
    }
    }

    var Select= function (selector,results) {
    results=results||[];
    if(support.qsa){
    push.apply(results,document.querySelectorAll(selector))
    return unique(results)
    }else{
    return Select2(selector,results)
    }
    }

    //兼容trim的兼容问题
    function trim(str){
    if(support.trim){
    return str.trim()
    }else{
    return str.replace(/^s|s$/g,'')
    }
    }
    //数组去重的方法
    function unique(arr){
    var newarr=[];
    for(var i=0;i<arr.length;i++){
    if(indexOf(newarr,arr[i])==-1){
    newarr.push(arr[i])
    }
    }
    return newarr;
    }
    // 常用的获取元素的方法
    function t(tagname,results){
    results=results||[];
    push.apply(results,document.getElementsByTagName(tagname));
    return results;
    };
    function c(classname,results){
    results=results||[];
    push.apply(results,byClassName(classname,document));
    return results;
    }
    function id(idname,results){
    results=results||[];
    //判断是否存在id
    var rid=document.getElementById(idname)
    if(rid){
    push.call(results,rid);
    }
    return results;
    }
    //如果是组合选择器
    function Select2(selector,results){
    results=results||[];
    //先将组合分割成数组
    var list=selector.split(',');
    for(var i=0;i<list.length;i++){
    //去除首位的空格
    Select3(trim(list[i]),results);
    }
    return unique(results)
    }

    function Select3(selector,results){
    results=results||[];
    //实现四种选择器
    var aa=selector.charAt(0)
    //基本选择器中不能有空格
    if(selector.split(' ').length==1){
    if(selector=='*'){
    return t(selector,results)
    }else if(aa=='#'){
    return id(selector.slice(1),results)
    }else if(aa=='.'){
    return c(selector.slice(1),results)
    }else{
    return t(selector,results)
    }
    }else{
    throw new Error('不支持该选择器')
    }
    }



















    return Select
    })()
  • 相关阅读:
    前端常用布局
    Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
    使用vue-cli创建vue项目
    Null component Catalina
    初识MongoDB
    小米平板2 win10 MIUI互刷教程
    tomcat报错
    websocket
    前后端数据交互方法
    二叉排序树
  • 原文地址:https://www.cnblogs.com/huqinhan/p/5785600.html
Copyright © 2011-2022 走看看