原生js实现jquery库中选择器的功能(jquery库封装一)
今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascript在2017年中一同成长
今天又一次封装了一个盒jquery使用方法相同的库,每次写都有新的想法,我想着也是码农的乐趣之一吧,
今天代码只实现了jquery中部分常用选择器的功能,以后部分会继续更新其余部分,所有代码的注释已经写到行间的注释了,这仅仅是我自己的理解,不妥之处希望大家评论到下面,共同学习才是进步的最好方式
/**
* Created by Jason on 2016/12/31.
*/
//jquery 的构造函数
function Jquery(arg){
//用来存选出来的元素
this.elemenets=[];
switch(typeof arg){
case 'function' :
domReady(arg);
break;
case 'string' :
this.elements = getEle(arg);
break;
case 'object' :
this.elements.push(arg);
break;
}
}
//DOM ready onload 如果参数是函数,则进行domReady操作
function domReady(fn){
// FF chrome
if(document.addEventListener){
//jquery中已经省略false,false解决低版本火狐兼容性问题
document.addEventListener('DOMContentLoaded',fn,false);
}else{
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
fn();
}
});
}
} function getByClass(oParent,sClass){
//高级浏览器支持getElementsByClassName直接使用
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
//不支持需要选中所有标签的类名来选取
var res=[];
var aAll=oParent.getElementsByTagName('*');
for(var i=;i<aAll.length;i++){
//选中标签的全部类名是个str='btn on red'=aAll[i].className 使用正则 reg=/\b sClass \b/g
var reg= new RegExp('\\b'+sClass+'\\b','g');
if(reg.test(aAll[i].className)){
res.push(aAll[i]);
}
}
return res;
}
} //如果参数是str 进行选择器的操作
function getByStr(aParent,str){
//用来存放选中的元素的数组 这个数组在getEle存在,为了每次执行的时候都需要清空,所以使用局部函数的变量
var aChild=[];
//aParent开始是[document],再执行完getByStr的时候getEle将aParent指向了getByStr函数的返回值aChild数组以确保循环父级下面的所有匹配元素
for(var i=;i<aParent.length;i++){
switch(str.charAt()){
//id选择器 eg: #box 使用document.getElementById选取
case '#':
var obj=document.getElementById(str.substring());
aChild.push(obj);
break;
//类选择器 eg: .box 使用上面封装的getByClass选取
case '.':
//由于一个标签可以有多个类选择器 所以需要进行循环选取
var aRes=getByClass(aParent[i],str.substring());
for(var j=;j<aRes.length;j++){
aChild.push(aRes[j]);
}
break;
//今天先简单的编写选择器 这里我们假设除了id和类选择器,就是标签选择器
default:
// 如果是li.red 那么用正则来判断
if(/\w+\.\w+/g.test(str)){
//先选择标签,在选择类选择器 使用类选择器的时候重复选择器函数即可
var aStr=str.split('.');
var aRes=aParent[i].getElementsByTagName(aStr[]);
var reg=new RegExp('\\b'+aStr[]+'\\b','g');
//循环选取标签,注意外层已经有i的循环
for(var j=;j<aRes.length;j++){
if(reg.test(aRes[j].className)){
aChild.push(aRes[j]);
}
}
//如果是li:eq(2) 或者 li:first这样的选择器 书写正则是的时候注意()可有可以无为? 有或者没有为* 至少有一个也就是若干个为+ {2,5}这种则为2-5个
}else if(/\w+\:\w+(\(\d+\))?/g.test(str)){
//讲str进行整理 [li,eq,2] 或者 [li,first]
var aStr=str.split(/\:|\(|\)/);
//aStr[2]是eq、lt、gt传入的参数,这里使用n来保存
var n=aStr[];
//在父级下获取所有匹配aStr[0]项的标签
var aRes=aParent[i].getElementsByTagName(aStr[]);
//这时候会循环判断aStr[1]项是的内容,jquery中经常使用的为eq、lt、gt、even、odd、first、last
switch(aStr[]){
//如果是eq则把第n项传入aChild数组即可
case 'eq':
aChild.push(aRes[n]);
break;
//如果是lt需要将aRes数组中获取到的小于n的标签循环推入aChild中
case 'lt':
for(var j=;j<n;j++){
aChild.push(aRes[j]);
}
break;
//如果是gt则和lt相反
case 'gt':
for(var j=n;j<aRes.legth;j++){
aChild.push(aRes[j]);
}
break;
//如果是event的话需要隔数添加,注意jquery中的event是从第0开始循环的
case 'event':
for(var j=;j<aRes.length;j+=){
aChild.push(aRes[j]);
}
break;
//如果是odd的和event不同的只是从第1项开始循环
case 'odd':
for(var j=;j<aRes.length;j+=){
aChild.push(aRes[j]);
}
break;
//如果是first,则将aRes[0]推入aChild
case 'first':
aChild.push(aRes[]);
break;
case 'last':
aChild.push(aRes[aRes.length-]);
break;
}
//属性选择器 eg:input[type=button] 同样适用正则来判断
}else if(/\w+\[\w+\=\w+\]/g.test(str)){
//将属性选择器切成数组 [input,type,button]
var aStr=str.split(/\[|\=|\]/g);
var aRes=aParent[i].getElementsByTagName(aStr[]);
//在选中标签中选出有aRes[1]的属性
for(var j=;j<aRes.length;j++){
//把属性值为aRes[2]的标签推入aChild中
if(aRes[j].getAttribute(aStr[])==aStr[]){
aChild.push(aRes[j]);
}
}
//标签选择器 div、span
}else{
var aRes=aParent[i].getElementsByTagName(str);
for(var j=;j<aRes.length;j++){
aChild.push(aRes[j]);
}
}
break;
}
}
return aChild;
} function getEle(str){
//如果是字符串的话先要去除收尾空格 eg:" on replace index play auto "
var arr = str.replace(/^\s+|\s+$/g,'').split(/\s+/g);
var aChild = [];
var aParent = [document];
for(var i = ;i<arr.length;i++){
aChild = getByStr(aParent,arr[i]);
aParent = aChild
}
return aChild;
} //实现jquery $符号的写法
function $(arg){
return new Jquery(arg);
}
转载请注明。。
原生js实现jquery库中选择器的功能(jquery库封装一)的更多相关文章
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- 【翻译】Ext JS 5.0.1 中的新功能
原文:What's New in Ext JS 5.0.1 今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进.下面让我们来了解一下这些改变. 可访 ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- js:基于原生js的上啦下啦刷新功能
链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body> <d ...
- vuejs2.0运用原生js实现简单的拖拽元素功能
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
- 放弃jQuery,使用原生js吧!
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
随机推荐
- 25M时钟的梁祝演奏
module liangzhu(clk_50M,rst,speaker); input clk_50M,rst; output speaker; reg speaker; //分频计数器paramet ...
- 从零开始学Python07作业源码:虚拟人生(仅供参考)
bin目录: Simulated_life_start.py #!usr/bin/env python # -*- coding:utf-8 -*- # auther:Mr.chen # 描述: im ...
- 用Fiddler做为手机的上网代理
1. 首先需要知道你电脑的ip地址,这个略. 2. 打开手机,wifi那里,选择你的路由器,编辑或者设置,每个手机叫法不一样,点进去 到了里面,每个手机不一样,但是大致上,有一个[使用代理]的这么一个 ...
- java web学习总结(十二) -------------------Session
一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况下).因此,在需要保存用户数据时,服务 ...
- 操作数数据类型 ntext 对于 max 运算符无效
SoStyle.chi_description AS chi_description, SoStyle.description AS eng_description, SoStyle.chi_qual ...
- html5+Canvas实现酷炫的小游戏
最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...
- PKCS#1规范阅读笔记2--------公私钥ASN.1结构
PKCS#1种介绍了哈希算法的OID等的ASN.1结构,因为使用ASN.1的解码工具(比如:ASN1View)时,会自动显示出各OID的含义,所以这里就不说明了.下面就只简单摘抄一下RSA公私钥的AS ...
- 常用ArcGIS for Silverlight 开发API介绍
1.API介绍 2.Map对象 3.Layer对象 4.Symbol对象 5.Task对象
- React Native之FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- 安卓开发之ListAdapter(一)
Adapter常用来管理数据,是连接后端数据和前端显示的适配器接口,是数据和UI(view)之间一个重要的纽带.再常见的view(listview.gridview)等地方都需要用到adapter,下 ...