原生js仿写jq
function $(arg){
return new Jq(arg);
}
//做兼容函数：
function ready(arg){
//如果浏览器支持addEventListener 就调用，否则用其他方法
if(window.addEventListener){
window.addEventListener("DOMContentLoaded",arg,false)
}else{
//h获取头部节点
var head = document.getElementsByTagName("head")[0];
var myScript = document.createElement("script");
head.appendChild(myScript);
//监控script标签是否创建成功，如果创建成功就执行arg函数
//onreadystatechange 监控网络状态
myScript.onreadystatechange = function(){
if(myScript.readyState == "complete"){
//script 节点创建完成，执行arg；
arg();
}
}
}
}
function findClass(className,obj){
if(obj.getElementsByClassName){
//主流浏览器支持getElementsByClassName 函数
var eles = obj.getElementsByClassName(className);
}else{
//IE浏览器不支持；
var tags = document.getElementsByTagName("*")
var eles =[]
for(var i=0; i <tags.length;i++){
var reg = new RegExp("\\b"+className+"\\b")//接收字符串
if(reg.test(tags[i].className)){
eles.push(tags[i])
}
}
}
return eles;
}
//通过id 、class 、标签获取节点
function selectEles(arg){
//去掉首尾空格；正则；
var reg1 =/^\s+|\s+$/g;// /g全局匹配
arg = arg.replace(reg1,"");
//将中间的空格替换成一个空格
var reg2 = /\s+/g;
arg = arg.replace(reg2," ");
var arr = arg.split(" ");
console.log(arr)
var parent = [document];
for(var i = 0;i<arr.length;i++){
for(var j=0;j<parent.length;j++){
//每次循环查找的内容放入到child中
var child =[]
//判断字符串以什么开头；
if(/^\./.test(arr[i])){
var className = arr[i].substr(1);
//在parent里获取到的节点
//根据类名获取节点的兼容函数
var eles = findClass(className,parent[j])
child = eles;
}else if(/^#/.test(arr[i])){
var idName= arr[i].substr(1);
var eles = document.getElementById(idName);
child.push(eles)
}else{
var eles = parent[j].getElementsByTagName(arr[i]);
child = eles;
}
}
parent = child;
}
console.log(parent)
return parent;
}
function Jq(arg){
this.elements =[];
if(typeof arg== "string"){
//通过id 、class 、标签获取节点
var eles = selectEles(arg);
console.log(eles)
for(var i = 0; i <eles.length;i++){
this.elements.push(eles[i])
}
}else if(typeof arg == "function"){
console.log("要在页面加载完成后执行")
//事件节点，页面加载完成后
//做兼容
ready(arg);
}else{
if(arg.length == undefined){
this.elements.push(arg)
}else{
for(var i=0;i<arg.length;i++){
this.elements.push(arg[i])
}
}
}
}
仿写jq的click方法
function addEvent(el,name,fn){
if(el.addEventListener){
return el.addEventListener(name,fn,false);//在火狐中会执行这一句
}else{
return el.attachEvent('on'+name,fn);//在ie中执行这一句
}
}
Jq.prototype.click = function(fn){
console.log(this.elements)
for(var i=0;i<this.elements.length;i++){
addEvent(this.elements[i],"click",fn)
}
}
仿写jq的on事件
Jq.prototype.on = function(type,fn){
//第一个参数做容错处理，切割数组；
var arg1 = type;
var reg1 = /^\s+|\s+$/g;
arg1=arg1.replace(reg1,"");
var reg2 = /\s+/g;
arg1 = arg1.replace(reg2," ");
var arr = arg1.split(" ");
for(var i=0;i<this.elements.length;i++){
for(var j=0;j<arr.length;j++){
addEvent(this.elements[i],arr[j],fn)
}
}
}
仿写jq的eq方法
Jq.prototype.eq = function(index){
return new Jq(this.elements[index]);
}
仿写jq的 css方法
//css容错处理
//css写法，({background:"red"})一个参数（对象）,("background","blue")两个参数,("background")一个参数（字符串）
//查询css属性
function getStyle(obj,styleName){
if(window.getComputedStyle){
//主流浏览器
var styles = getComputedStyle(obj,null)[styleName];
}else{
//IE浏览器
var styles = obj.currentStyle[styleName];
}
return styles;
}
// 设置css属性
function setStyle(obj,styleName,styleValue){
if(typeof styleValue == "number"){
styleValue = styleValue+"px"
}
obj.style[styleName] = styleValue;
}
Jq.prototype.css=function(){
if(arguments.length==1){
if(typeof arguments[0]=="string"){
//参数是字符串：————》获取样式
// getComputedStyle
// $(".li").css("background");
var styles = getStyle(this.elements[0],arguments[0]);
console.log("样式是："+styles)
}else{
// 设置css样式
//参数是对象
for(var i=0;i<this.elements.length;i++){
for(var j in arguments[0]){
setStyle(this.elements[i],j,arguments[0][j])
}
}
}
}else{
//传多个参数
for(var i=0;i<this.elements.length;i++){
setStyle(this.elements[i],arguments[0],arguments[1])
}
}
}
仿写jq的animate方法
//动画 aniamte(style,speed,easing,callback)
//第一个参数：是一个对象
//第二个参数：1、时间 2、slow、normal、fast 3、回调
//回调始终是在最后一个参数上，并且回调可有可无
Jq.prototype.animate =function(){
var times = 500;
if(arguments.length>1){
if(typeof arguments[1] == "string"){
// slow normal fast
switch(arguments[1]){
case "slow":
times = 2000;
break;
case "fast":
times = 200;
break;
default:
times=500;
break;
}
}else if(typeof arguments[1] == "number"){
times = arguments[1];
}
}
//针对第一个参数处理：对象
var styleName = "";
var transitionTimes ="";
for(var i in arguments[0]){
styleName += i+","
transitionTimes += times/1000+"s,"
}
styleName = styleName.substr(0,(styleName.length-1))
transitionTimes= transitionTimes.substr(0,(transitionTimes.length-1))
for(var i=0;i< this.elements.length;i++){
this.elements[i].style.transition = styleName+" "+transitionTimes;
for(var j in arguments[0]){
setStyle(this.elements[i],j,arguments[0][j])
}
}
console.log(styleName,transitionTimes)
//最后一个参数
if(typeof arguments[arguments.length-1] == "function"){
var fn = arguments[arguments.length-1];
// setTimeout(()=>{
// arguments[arguments.length-1]();
// },times)
setTimeout(function(){
fn();
},times)
//说明最后一个参数是回调函数
}
}
网友评论