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/ 演示二维 ...
随机推荐
- Linux静态设置CentOS 7虚拟机的IP
进入root ,输入命令:# vi /etc/sysconfig/network-scripts/ifcfg-ens33 .将DHCP协议获取IP,改为static静态,加上想要设置的IPADDR即可 ...
- 如何打开用eclipse没有.project文件的Java工程
大概分为以下7个步骤,具体如下: 1.在你的eclipse下新建一个与你想要打开的源代码项目同名的一个项目(我这举例叫myweb). 2.在电脑磁盘中找到刚刚新建的项目,把它生成的.project文件 ...
- Markdown使用小总结[不定时更新]
title: Markdown使用小总结 date: 2019-03-27 10:09:19 tags: Markdown --- 鸽了这么久,Markdown使用下降,因此写一篇博客来总结一下至今( ...
- git学习笔记:常用命令总结
本文根据廖雪峰的博客,记录下自己的学习笔记.主要记录常用的命令,包括仓库初始化.添加文件.提交修改.新建分支.内容暂存.分支管理.标签管理等内容. git是分布式版本控制系统. 首先是安装,从官网下载 ...
- LOL新版符文 怎么查看队友的符文配置?
LOL怎么看其他玩家符文? 像我这种名字都懒的打的, 直接去WeGame复制昵称. 然后在LOL主界面点生涯, 之后搜索 光头强xian生
- Python Day 13 装饰器
阅读目录 内容回顾 函数嵌套的定义 global.nonlocal关键字 闭包及闭包的运用场景 开放封闭原则 装饰器 一个函数被多次装饰 ##内容回顾 1.函数对象:函数名 => 存放的是函 ...
- MyEclipse has detected that less than 5% of
选择Windows->Preferences; 2 选择MyEclipse->Servers->Integrated Sandbox->MyEclispe Tomcat 6 ...
- jsonp 简单封装
import originJSONP from 'jsonp' // 引入 jsonp 模块 // 对外暴露方法 jsonp // 通常传给服务端的 url 地址带参数 设计目的是希望有纯净的 url ...
- CoUninitialize引发的一个错误
程序开始已使用CoUninitialize,后边的函数又再次调用CoUninitialize,判断返回值,导致函数提前退出返回异常.
- 移动端H5页面禁止长按复制和去掉点击时高亮
/*设置IOS页面长按不可复制粘贴,但是IOS上出现input.textarea不能输入,因此将使用-webkit-user-select:auto;*/ *{ -webkit-touch-callo ...