js 选择器

var queryEle = function(selector){
        var selectReg = /^(#)?(\.)?(\w+)$/img;
        var result = selectReg.exec(selector),
            data = [];
        //id
        if(result[1]){
            if(result[3]){
                if(typeof document.querySelector==‘function‘){
                    return document.querySelector(result[1]+result[3]);
                }else{
                    return document.getElementById(result[3]);
                }
            }
        }else
        //class
        if(result[2]){
            if(result[3]){
                if(typeof document.getElementsByClassName==‘function‘){
                    var dom = document.getElementsByClassName(result[3]);
                    if(dom){
                        return converArr(dom);
                    }
                }else{
                    var dom2 = document.getElementsByTagName(‘*‘);
                    for(var i=0;i<dom2.length;i++){
                        if(dom2[i].className.test(new RegExp(result[2]))){
                            data.push(dom2[i]);
                        }
                    }
                }
                return data;
            }
        }else
        if(result[3]) {
            var doms = document.getElementsByTagName(result[3].toLowerCase());
            if(doms) {
                result = converArr(doms);
            }
        }
        return result;

    };
    function converArr(dom){
        var arr = null;
        try{
           arr = Array.prototype.slice.call(dom,0);
        }catch(e){
            for(var i=0;i<dom.length;i++){
                arr.push(dom[i]);
            }
        }
        return arr;
    }

    console.log(queryEle(‘.left‘));

  

时间: 2024-07-31 14:22:29

js 选择器的相关文章

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

js选择器 querySelector

<form method="post" action="" id="myform"> <input type="button" value="submit"> </form> <script type="text/javascript"> function init(){ var submitBtn=document.querySelect

js选择器

原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElementById(通过ID获取元素) 用法:document.getElementById("Id");Id为要获取的元素的id属性值. 2.getElementsByName(通过name属性获取元素) 用法:document.getElementsBy

原始JS选择器使用方法总结

原始JS选择器使用方法总结 常见的getElementById,getElementsByName,getElementsByTagName.但外国人不满意这些 API,于是搞出了getElementsByClassName,后来一点点又出现了jQuery选择器,这里只说原始js选择器. 1.getElementById 这是最常用的选择器,通过id来定位: 例: var test=document.getElementById("test").value;//获取文档中id为test

JS选择器querySelector和~All,三个原生选择器

比较高级的万能选择器,比较常用 定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代. 语法 document.querySelector(CSS selectors) 参数值 参数 类型 描述 CSS 选择器 String 必须.指定一个或多个匹配元素的 CSS 选择器. 可以使用它们的 id,

js jquery 选择器总结

一.原始JS选择器. id选择器:document.getElementById("test"); name选择器:document.getElementByName("test"); 节点选择器:document.getElementsByTagName("p"); 二.jQuery 选择器. 1.jQuery 元素选择器. id选择器:$("#test"); class选择器:$(".test"); 节

js闭包 选择器 面向对象 事件 操作页面

闭包js函数的嵌套定义,定义在内部的函数 就称之为闭包为什么使用闭包: 1.一个函数要使用另一个函数的局部变量 2.闭包会持久化包裹自身的函数的局部变量 3.解决循环绑定 function outer() { var num =10; function inner() { //1.在inner函数中,使用了outer的局部变量num return num; } return inner; } var innerFn = outer(); //2.借助闭包,将局部变量num的声明周期提升了 var

cmstop框架中的js设计content.js

控制cmstop框架中action的js 内容模块 找出当前页面的js的思路01先找显示页面的当前文件.在页面文件中-->找(编辑,删除)按钮-->找获取这个按钮的js选择器 02看加载的js文件顺序content.js中.定义对象(包含编辑方法)-->html页面中,引入js后,直接调用该方法 content.edit(id),打开编辑页面 var content = { edit: function (contentid) { var app = $('#row_'+contenti

js匹配

一 1.它是js选择器匹配模式的一种2.eg: $("input[id^='code']");//id属性以code开始的所有input标签$("input[id$='code']");//id属性以code结束的所有input标签$("input[id*='code']");//id属性包含code的所有input标签3.可以联想到正则表达式,也有^开头,$结尾,^就是以什么开头的意思,$以什么结尾. 二, :gt 选择器选取 index 值高