js原生后代选择器_JS封装简单后代选择器

大概思路是这样的：通过判断传过来的参数是什么类型，如果是对象，那这里就是this(因为封装是自己用的，肯定不会随便乱传一个对象过来)，如果是一个函数(匿名函数)，那就是Dom加载(这里先不讲)，如果是字符串，那就是CSS选择器，通过判断是否存在空格，没有就是单一CSS选择器，有就是后代选择器。然后再通过判断是ID选择器，类选择器还是元素选择器来执行具体的操作：

这里创建一个构造函数实现基础库Jr :

function Jr(){

}

在其原型上添加方法：

//获取ID节点

Jr.prototype.getId = function(id){

return document.getElementById(id);

}

//获取CLASS节点数组

Jr.prototype.getClass = function(className, parentNode){

var node = null; //存放父节点

var temps = [];

if(parentNode != undefined){ //存在父节点时

node = parentNode;

} else { //不存在则默认document

node = document;

}

var all = node.getElementsByTagName('*');

for(var i = 0; i < all.length; i++){

//遍历所有节点，判断是否有包含className

if((new RegExp('(\\s|^)' + className + '(\\s|$)')).test(all[i].className)){

temps.push(all[i]);

}

}

return temps;

}

//获取元素节点数组

Jr.prototype.getTagName = function(tag, parentNode){

var node = null; //存放父节点

var temps = [];

if(parentNode != undefined){

node = parentNode;

} else {

node = document;

}

var tags = node.getElementsByTagName(tag);

for(var i = 0; i < tags.length; i++){

temps.push(tags[i]);

}

return temps;

}

接下来就是在构造函数里通过传参来进行一系列选择器操作：

//基础库

function Jr(args){

//创建一个数组，用来保存获取的节点或节点数组

this.elements = [];

//当参数是一个字符串，说明是常规css选择器，不是this,或者function

if(typeof args == 'string'){

//css模拟，就是跟CSS后代选择器一样

if(args.indexOf(' ') != -1){

//把节点拆分开并保存在数组里

var elements = args.split(' ');

//存放临时节点对象的数组，解决被覆盖问题

var childElements = [];

var node = []; //用来存放父节点用的

for(var i = 0; i < elements.length; i++){

//如果默认没有父节点，就指定document

if(node.length == 0) node.push(document);

switch(elements[i].charAt(0)) {

//id

case '#' :

//先清空临时节点数组

childElements = [];

childElements.push(this.getId(elements[i].substring(1)));

node = childElements; //保存到父节点

break;

//类

case '.' :

childElements = [];

//遍历父节点数组，匹配符合className的所有节点

for(var j = 0; j < node.length; j++){

var temps = this.getClass(elements[i].substring(1), node[j]);

for(var k = 0; k < temps.length; k++){

childElements.push(temps[k]);

}

}

node = childElements;

break;

//标签

default :

childElements = [];

for(var j = 0; j < node.length; j++){

var temps = this.getTagName(elements[i], node[j]);

for(var k = 0; k < temps.length; k++){

childElements.push(temps[k]);

}

}

node = childElements;

}

}

this.elements = childElements;

} else {

//find模拟,就是说只是单一的选择器

switch(args.charAt(0)) {

case '#':

this.elements.push(this.getId(args.substring(1)));

break;

case '.':

this.elements = this.getClass(args.substring(1));

break;

default :

this.elements = this.getTagName(args);

}

}

} else if(typeof args == 'Object'){

if(args != undefined){

this.elements[0] = args;

}

} else if(typeof args == 'function'){

//这里不讲

this.ready(args);

}

}

最后，我们调用该基础库：

//调用

var $ = function(args){

return new Jr(args);

}

现在，我们就可以实现如下选择器等效果了：

$(this)

$('#box')

$('.box')

$('div')

$('#box div .nav')

$('.box .nav p')

原生JS封装简单动画效果

原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

关于js封装框架类库之选择器引擎(二)

在上篇介绍了选择器的获取标签.id.类名的方法,现在我们在上篇基础上继续升级 1.问题描述:上篇get('选择器')已经实现,如果get方法里是一个选择器的父元素,父元素是DOM对象,那么如何获取元素 ...

JS的简单用法

JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

第一百三十九节，JavaScript，封装库--CSS选择器

JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx  (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...

原生JS封装Ajax插件&lpar;同域&amp&semi;&amp&semi;jsonp跨域&rpar;

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

使用NW&period;js封装微信公众号菜单编辑器为桌面应用

开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

【学】jQuery的源码思路1——后代选择器

jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...

随机推荐

ZOJ3795 Grouping(强连通分量&plus;缩点&plus;记忆化搜索)

题目给一张有向图,要把点分组,问最少要几个组使得同组内的任意两点不连通. 首先考虑找出强连通分量缩点后形成DAG,强连通分量内的点肯定各自一组,两个强连通分量的拓扑序能确定的也得各自一组. 能在同一组 ...

linux内核--内存管理(二)

一.进程与内存     所有进程(执行的程序)都必须占用一定数量的内存,它或是用来存放从磁盘载入的程序代码,或是存放取自用户输入的数据等等.不过进程对这些内存的管理方式因内存用途不一而不尽相同,有些内 ...

jQuery中 prop&lpar;&rpar; attr&lpar;&rpar;使用详解

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法.  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 在高版本的jquery引入prop方法后,什么时候该用p ...

interview&lpar;转&rpar;

http://ifeve.com/ali-think-12/ http://ifeve.com/think-in-ali-10/

MFC桌面电子时钟的设计与实现

目录 核心技术 需求分析 程序设计 程序展示 (一)核心技术 MFC(Micosoft Foundation Class Libay,微基础类库)是微基于Windows平台下的C++类库集合,MFC包 ...

CCF CSP 认证

参加第八次CCF CSP认证记录 代码还不知道对不对,过两天出成绩. 成绩出来了,310分. 100+100+100+10+0: 考试13:27开始,17:30结束,提交第4题后不再答题,只是检查前四 ...

Docker Mysql数据库主从同步配置方法

一.背景 最近在做内部平台架构上的部署调整,顺便玩了一下数据库的主从同步,特此记录一下操作- 二.具体操作 1.先建立数据存放目录(-/test/mysql_test/) --mysql --mast ...

Python常用模块-时间模块(time&amp&semi;datetime)

Python常用模块-时间模块(time & datetime) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.初始time模块 #!/usr/bin/env pyth ...

jQuery源码学习扒一扒jQuery对象初使化

神奇的jQuery可以这样玩jQuery("#id").css()或 jQuery("#id").html() 这么玩jQuery("#id&quot ...

P4774 &lbrack;NOI2018&rsqb;屠龙勇士

P4774 [NOI2018]屠龙勇士 先平衡树跑出打每条龙的atk t[] 然后每条龙有\(xt \equiv a[i](\text{mod }p[i])\) 就是\(xt+kp[i]=a[i]\) ...