querySelectorAll选择器的js实现
自从标准浏览器增加了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实现的更多相关文章
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- querySelector/querySelectorAll选择器两个容易忽略的点
jquery写得多了,原生js大API就容易忘.如果你也是这样,一起来回顾一下HTML5的类jquery选择器querySelector和querySelectorAll吧,querySelector ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
- 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效
最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖 npm install flatpickr --save 随后在页面中引入css ...
- 移动端滚动选择器mobileSelect.js
一款多功能的移动端滚动选择器,支持单选到多选.支持多级级联.提供自定义回调函数.提供update函数二次渲染.重定位函数.兼容pc端拖拽等等.. 特性 原生js移动端选择控件,不依赖任何库 可传入普通 ...
- 让IE8兼容识别css3选择器——selectivizr-min.js
html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- day44:CSS选择器优先级&JS基础
目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...
- 日积月累系列之省市选择器(js源码)
省市选择器是大家经常用到的, 但网上找的省市选择器都不是很实用,于是自己写了移动端的省市选择器. 界面: 源码结构: 演示地址:http://component.cform.cn/city/ 演示二维 ...
随机推荐
- ambiguous
ambiguous - 必应词典 美[æm'bɪɡjuəs]英[æm'bɪɡjuəs] adj.模棱两可的:含混不清的:多义的:不明确的 网络含糊的:模糊的:暧昧的 搭配ambiguous answe ...
- CentOS7编译安装mysql-5.6.43
Step 1:安装编译需要的软件和工具 [root@node-1 ~]# yum install gcc gcc-c++ cmake ncurses-devel bison Step 2:创建mysq ...
- Python校验文件MD5值
import hashlib import os def GetFileMd5(filename): if not os.path.isfile(filename): return myHash = ...
- 如何把ppt写好
前言 这里不是总结ppt如何写的美观漂亮,而是总结写整体的结构,如何修辞 整体结构 前后呼应 就像做作文一样,前后呼应,产生共鸣和联想,切记过于离散 抽象化 不要把自己做的东西写小了,要有一定的抽象度 ...
- layabox 1 基础
屏幕适配: class GameMain{ public static gameStart:GameStart; public static gameView:GameView; public sta ...
- Saving custom fields in production order
In additional data screen 1.PPCO0012->EXIT_SAPLCOKO1_001->ZXCO1U11 ci_aufk-zxxx = i_caufvd ...
- git log命令常用参数集合
git log 查看 提交历史 默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排在最上面. 常用的格式占位符写法及其代表的意义.选项 说明%H 提交对象(commit)的 ...
- Ocelot的学习
Ocelot是一个用.NET Core实现并且开源的API网关,它功能强大,包括了:路由.认证.鉴权.简单缓存.限流熔断.负载均衡器等.简单的来说Ocelot是一堆的asp.net core midd ...
- mysql保存乱码(C#)
解决办法只有一个就是在配置文件中强制指定编码格式:<add name="TSDBEntities" connectionString="metadata=res:/ ...
- MySQL数据库开发常见问题及几点优化!
从一下三个方面考虑: 库表设计 慢 SQL 问题 误操作.程序 bug 时怎么办 一.库表设计 1.1.引擎选择 在 MySQL5.1 中,引入了新的插件式存储引擎体系结构,允许将存储引擎加载到正在运 ...