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
    })()
  • 相关阅读:
    二分练习题4 查找最接近的元素 题解
    二分练习题5 二分法求函数的零点 题解
    二分练习题3 查找小于x的最大元素 题解
    二分练习题2 查找大于等于x的最小元素 题解
    二分练习题1 查找元素 题解
    code forces 1176 D. Recover it!
    code forces 1173 B. Nauuo and Chess
    code forces 1173 C. Nauuo and Cards
    吴恩达深度学习课程笔记-15
    吴恩达深度学习课程笔记-14
  • 原文地址:https://www.cnblogs.com/huqinhan/p/5785600.html
Copyright © 2011-2022 走看看