原生js仿寫jq
function $(arg){
return new Jq(arg);
}
//做兼容函數(shù)：
function ready(arg){
//如果瀏覽器支持addEventListener 就調(diào)用郭怪，否則用其他方法
if(window.addEventListener){
window.addEventListener("DOMContentLoaded",arg,false)
}else{
//h獲取頭部節(jié)點(diǎn)
var head = document.getElementsByTagName("head")[0];
var myScript = document.createElement("script");
head.appendChild(myScript);
//監(jiān)控script標(biāo)簽是否創(chuàng)建成功竹椒，如果創(chuàng)建成功就執(zhí)行arg函數(shù)
//onreadystatechange 監(jiān)控網(wǎng)絡(luò)狀態(tài)
myScript.onreadystatechange = function(){
if(myScript.readyState == "complete"){
//script 節(jié)點(diǎn)創(chuàng)建完成意乓，執(zhí)行arg；
arg();
}
}
}
}
function findClass(className,obj){
if(obj.getElementsByClassName){
//主流瀏覽器支持getElementsByClassName 函數(shù)
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 竟贯、標(biāo)簽獲取節(jié)點(diǎn)
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++){
//每次循環(huán)查找的內(nèi)容放入到child中
var child =[]
//判斷字符串以什么開頭屑那；
if(/^\./.test(arr[i])){
var className = arr[i].substr(1);
//在parent里獲取到的節(jié)點(diǎn)
//根據(jù)類名獲取節(jié)點(diǎn)的兼容函數(shù)
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 艘款、標(biāo)簽獲取節(jié)點(diǎn)
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("要在頁面加載完成后執(zhí)行")
//事件節(jié)點(diǎn)，頁面加載完成后
//做兼容
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);//在火狐中會執(zhí)行這一句
}else{
return el.attachEvent('on'+name,fn);//在ie中執(zhí)行這一句
}
}
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){
//第一個參數(shù)做容錯處理沃琅，切割數(shù)組哗咆；
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"})一個參數(shù)（對象）,("background","blue")兩個參數(shù),("background")一個參數(shù)（字符串）
//查詢css屬性
function getStyle(obj,styleName){
if(window.getComputedStyle){
//主流瀏覽器
var styles = getComputedStyle(obj,null)[styleName];
}else{
//IE瀏覽器
var styles = obj.currentStyle[styleName];
}
return styles;
}
// 設(shè)置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"){
//參數(shù)是字符串：————》獲取樣式
// getComputedStyle
// $(".li").css("background");
var styles = getStyle(this.elements[0],arguments[0]);
console.log("樣式是："+styles)
}else{
// 設(shè)置css樣式
//參數(shù)是對象
for(var i=0;i<this.elements.length;i++){
for(var j in arguments[0]){
setStyle(this.elements[i],j,arguments[0][j])
}
}
}
}else{
//傳多個參數(shù)
for(var i=0;i<this.elements.length;i++){
setStyle(this.elements[i],arguments[0],arguments[1])
}
}
}
仿寫jq的animate方法
//動畫 aniamte(style,speed,easing,callback)
//第一個參數(shù)：是一個對象
//第二個參數(shù)：1益眉、時(shí)間 2晌柬、slow、normal郭脂、fast 3年碘、回調(diào)
//回調(diào)始終是在最后一個參數(shù)上，并且回調(diào)可有可無
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];
}
}
//針對第一個參數(shù)處理：對象
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)
//最后一個參數(shù)
if(typeof arguments[arguments.length-1] == "function"){
var fn = arguments[arguments.length-1];
// setTimeout(()=>{
// arguments[arguments.length-1]();
// },times)
setTimeout(function(){
fn();
},times)
//說明最后一個參數(shù)是回調(diào)函數(shù)
}
}
