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/ 演示二维 ...
随机推荐
- Checkbox的只读设置
readonly和disabled属性均不生效.可按如下方式处理,记得引入jquery.js文件 <input type="checkbox" name="chk& ...
- AOP-事物管理
1. Spring AOP 模块为基于 Spring 的应用程序中的对象提供了事务管理服务
- 安装pygame出现is not a supported wheel on this platform解决办法
安装python库pygame时出现如下错误: 查看python的版本是否与之匹配,发现版本不匹配问题 例如1.我的python3.6是32位的,就只能安装cp36的:结果发现安装还是出现问题: 2. ...
- sqoop mysql导入hive 数值类型变成null的问题分析
问题描述:mysql通过sqoop导入到hive表中,发现有个别数据类型为int或tinyint的列导入后数据为null.设置各种行分隔符,列分隔符都没有效果. 问题分析:hive中单独将有问题的那几 ...
- 第一次面试经历(hr面)
经过介绍,我有幸去到一家国际背景的广告公司面试前端开发实习生.收到的邮件是复试通知,看来我已经跳过了第一轮面试. 来到hr请我进了一个小间坐下里填求职书,里面有各种个人信息,有兴趣爱好,有工作经历,以 ...
- jquery操作select下拉框的多种方法(选中,取值,赋值等)
Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...
- Python unittest使用小结
unittest是Python自带的单元测试框架,其中最核心的四个概念是:test case, test suite, test runner, test fixture. 流程:TestLoader ...
- 6行代码实现纯js导出excel
// excel导出当前列表 function memberExport() { var oHtml = $('#list').html(); var excelHtml = '<html> ...
- WIN10家庭版的升级到企业版
1.右键点击[此电脑]---->属性 2.点击[激活windows] 3.在左侧点击[激活]--->更改产品密匙 4.然后输入产品密匙:NPPR9-FWDCX-D2C8J-H872K-2Y ...
- Jackson注解简介
1.注解: @JsonInclude(JsonInclude.Include.NON_NULL) 1.如果放在属性上,如果该属性为NULL则不参与序列化 ;2.如果放在类上,那对这个类的全部属性起作用 ...