自从标准浏览器增加了querySelector这个类JQ的方法后,选择一个元素变成了一件so easy的事情。但是某些浏览器还是不支持。使用jq库又有点太大,其实可以自己动手实现这个选择器,具体代码如下

    function getByClass(sele,parent){
var parent = parent||document;
if(parent.querySelectorAll){
return parent.querySelectorAll(sele);
}else if(parent.getElementsByClassName){
return parent.getElementsByClassName(sele.slice(1));
}else{
var tags = parent.getElementsByTagName("*");
var targets=[];
for(var i=0;i<tags.length;i++){
if(tags[i].className.indexOf(sele.slice(1))>-1){
targets.push(tags[i]);
}
}
return targets;
}
}
function find(sele,parent){
var parent=parent||document;
// console.log("sele:",sele,";parent:",parent);
var selectorArr = sele.split(/\s+/);
var selector = selectorArr.shift();
// console.log("selector:",selector);
var targets=[];
if(selector.indexOf("#")>-1){
targets.push(document.getElementById(selector.slice(1)));
}else if(selector.indexOf(".")>-1){
targets=getByClass(selector,parent);
}else{
targets = parent.getElementsByTagName(selector);
}
var result=[];
if(selectorArr.length>0){
for(var i=0;i<targets.length;i++){
var tempResult=Array.prototype.slice.call(find(selectorArr.join(" "),targets[i]),0);
result=result.concat(tempResult);
}
}else{
return targets;
}
return result;
}

原理是将网友传入的参数分解,前面的通过迭代选择不断的更新父元素,最后一个选择器就是在父元素的子元素中选择匹配的元素。

案例网址:http://imgad0.pconline.com.cn/ivy/image/20172/21/14876672047970.html

querySelectorAll选择器的js实现的更多相关文章

  1. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  2. querySelector/querySelectorAll选择器两个容易忽略的点

    jquery写得多了,原生js大API就容易忘.如果你也是这样,一起来回顾一下HTML5的类jquery选择器querySelector和querySelectorAll吧,querySelector ...

  3. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  4. 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  5. 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效

    最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖  npm install flatpickr --save 随后在页面中引入css ...

  6. 移动端滚动选择器mobileSelect.js

    一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. 特性 原生js移动端选择控件,不依赖任何库 可传入普通 ...

  7. 让IE8兼容识别css3选择器——selectivizr-min.js

    html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  8. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  9. 日积月累系列之省市选择器(js源码)

    省市选择器是大家经常用到的, 但网上找的省市选择器都不是很实用,于是自己写了移动端的省市选择器. 界面: 源码结构: 演示地址:http://component.cform.cn/city/ 演示二维 ...

随机推荐

  1. midi文件格式

    百度百科的midi文件格式写的非常详细,点个赞.这里备份一下,方便日后查看. midi文件由midi头和音轨组成,midi头中的信息包括midi头标志,音轨数量,音轨的演奏方式(并行/拼接等),4分音 ...

  2. 2018-2019-2 《网络对抗技术》Exp0 Kali安装

    2018-2019-2 <网络对抗技术>Exp0 Kali安装 ---20165110 一.实验要求 1.下载 2.安装Kali 3.连接网络 4.共享文件 5.更新软件源 二.实验步骤 ...

  3. 16. 3Sum Closest (JAVA)

    Given an array nums of n integers and an integer target, find three integers in nums such that the s ...

  4. JMeter之自动重定向和跟随重定向的区别

    自动重定向:只针对Get和Head请求,自动重定向转向到最终目标页面,但是Jmeter不记录重定向的中间页面过程,只记录最终页面返回结果.在结果树中,只能看到最终页面的服务器返回. 跟随重定向:是ht ...

  5. spring mvc 映射与适配器

    在深入学习Spring mvc 过程中,我们需要了解如下两个类: org.springframework.web.servlet.mvc.method.annotation.RequestMappin ...

  6. functools 之 partial(偏函数)

    当函数的参数个数太多,需要简化时,使用functools.partial可以创建一个新的函数,这个新函数可以固定住原函数的部分参数,从而在调用时更简单.当然,decorator(装饰器) 也可以实现, ...

  7. 泡泡堂BNB[ZJOI2008]

    --BZOJ1034 Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡 ...

  8. 设计模式学习心得<代理模式 Proxy>

    在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 概述 意图 为其他对象提供 ...

  9. 桌面小部件Wight父类AppWidgetProvider的三个方法

    onUpdate()这个方法会在每次更新App Widget的时候调用,数据更新的逻辑都写在这个方法里边.而且要注意的是:在用户添加小部件的时候,会首先调用这个方法,应该在这个方法里进行初始化操作,比 ...

  10. sql server 临时库文件太大 迁移tempdb数据库

    由于装SQL Server时默认装在系统盘,使用一段时间后,tempdb数据库占了68G,导致整个C盘爆满,彻底解决办法就是迁移tempdb物理文件,移至其他大空间磁盘上. 将 tempdb 从其在磁 ...