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/ 演示二维 ...
随机推荐
- Exp5 MSF基础应用 20165110
Exp5 MSF基础应用 20165110 一.实践要求(3.5分) 实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践;(1分) m ...
- JS解决在提交form表单时某个值不存在 alter弹窗点确定不刷新界面
<form action="" method="post" onsubmit="return checkname()"> < ...
- 19-02【mac电脑操作】最小化应用程序
最小化应用程序 windows下很简单,直接使用windows+M即可: mac电脑下,官方建议是:option+command+m+h.但实际使用的时候,这个快捷键并不好使: 解决方案:mac系统设 ...
- nginx安装与挂载
Linux下添加新硬盘,分区及挂载 http://blog.chinaunix.net/uid-25829053-id-3067619.html vim /etc/fstab /dev vdb1 / ...
- Smartforms
Include text Populate indicator in program perform get_text using '0002' ls_detail-vbeln"Header ...
- nginx学习笔记(三)
nginx变量 有一些内建变量是支持改写的,其中一个例子是 $args. 这个变量在读取时返回当前请求的 URL 参数串(即请求 URL 中问号后面的部分,如果有的话) 我们看一个通过修改 $args ...
- centos7 删除swap
https://www.refmanual.com/2016/01/08/completely-remove-swap-on-ce7/#.W8AaSRMzaRs 删除不干净,启动不起来的情况下.需要从 ...
- CentOS 7 minimal网络配置
centos最小化安装没有ifconfig命令,可以使用 ip addr 查看网络信息,习惯ifconfig的用户,则使用 yum -y install net-tools 即可 ; 如果yum不 ...
- windows socket 文件下载上传
socket 图片 文件 下载上传 数据库 线程池 存入图片 等
- 可拖动div
客户要求,页面有图片并且可以随意拖动 具体实现: css: #div1{ width: 30px; height: 30px; /*一定要绝对定位*/ position: absolute; /*初始 ...