js实现封装jQuery的简单方法与链式操作详解

 
 
 
 //同一个文件下操作的话，后面记得删除下面引入的cdn
 
 


 




 

 $(".box1").click(()=>{
 console.log(456);
 })

 // 实现$(".box1")
 class jquery {
 constructor(arg) {
  console.log(document.querySelector(arg));
 }
 }

 function $(arg) {
 return new jquery(arg);
 }

 // 实现$(".box1")
 let res = $(".box1");
 console.log(res);

 // 实现$(".box1").click()
 class jquery {
 constructor(arg) {
  console.log(document.querySelector(arg));
 }

 click() {
  console.log("执行了click方法");
 }
 }

 function $(arg) {
 return new jquery(arg);
 }

 // 实现$(".box1").click()
 let res = $(".box1").click();
 console.log(res);

 // 实现$(".box1").click(() => {console.log("123")})
 class jquery {
 constructor(arg) {
  this.element = document.querySelector(arg);
  // console.log(element);
 }

 click(fn) {
  this.element.addEventListener("click", fn);
 }

 }

 function $(arg) {
 return new jquery(arg);
 }

 //实现$(".box1").click(() => {console.log("123")})
 $(".box1").click(() => {
 console.log("123")
 });

$(".box1")

//参数为函数
 $(function() {
 console.log("123");
 })

// 情况三
 $(document.querySelectorAll("div")).click(()=>{
 console.log("123");
 })
 $(document.querySelector("div")).click(()=>{
 console.log("456");
 })

addEles(eles){
  for (let i = 0; i  {console.log("123")}) 
 click(fn) {
  for(let i = 0; i 

constructor(arg) {

  //情况一
  if(typeof arg === 'string') {
  this.addEles(document.querySelectorAll(arg));
  }else if(typeof arg === 'function') {
  //情况二
  document.addEventListener("DOMContentLoaded", arg);
  }else {
  //情况三
  if(typeof arg.length === 'undefined') {
   this[0] = arg;
   this.length = 1;
  }else {
   this.addEles(arg);
  }
  }

 }

// on方法
 on(eventName, fn) {
  let eventArray = eventName.split(" ");
  //考虑多个节点
  for(let i = 0; i 

// on方法
 $("div").on("mouseover mousedown",function(){
 console.log("on方法");
 })

//链式操作
 //划重点，在on和click中添加return this即可实现链式
 // click方法
 click(fn) {
  for(let i = 0; i 

//eq方法
 eq(index) {
  return new jquery(this[index]);
 }

constructor(arg, root) {
  if(typeof root === "undefined") {
  this.prevObject = [document];
  }else {
  this.prevObject = root;
  }
 //eq方法
 eq(index) {
  return new jquery(this[index], this);
 }
 //end方法
 end() {
  return this.prevObject;
 }

// 情况一 :获取样式 （只去获取第一个元素）

 let res = $("div").css("background");
 console.log(res);

// 情况二 （设置样式）

 $("div").css("background","yellow");

// // 情况三 （设置多个样式）

 $("div").css({background:"black",width:200,opacity:0.3});

//css方法

 css(...args) {
  if(args.length === 1) {

  //情况一：获取样式
  if(typeof args[0] === 'string') {
   return this.getStyle(this[0], args[0]);
  }else {
   //情况三：设置多个样式
   for(let i = 0; i 

//css方法用
 $.cssNumber = {
 animationIterationCount: true,
 columnCount: true,
 fillOpacity: true,
 flexGrow: true,
 flexShrink: true,
 fontWeight: true,
 gridArea: true,
 gridColumn: true,
 gridColumnEnd: true,
 gridColumnStart: true,
 gridRow: true,
 gridRowEnd: true,
 gridRowStart: true,
 lineHeight: true,
 opacity: true,
 order: true,
 orphans: true,
 widows: true,
 zIndex: true,
 zoom: true
}

 
 
 
 



 


 

 点击