【封装自己的库】

封装自己的库

课前准备

  • 工具
    • 编辑器 VSCode
    • 浏览器 Chorme
  • 前置知识
    • Js基本知识

课堂主题

一、定义函数返还JQ对象

二、ready方法和原生节点处理

三、选择器器封装

四、封装JQ的eq方法

五、封装JQ的click方法

六、jQ中的链式操作

七、封装JQ的css方法

八、cssHooks扩展功能

知识点

  • 对象成员与类成员
  • 判断类型
  • 链式调用实现
  • 正则表达式

jquery特性说明

​ 知己知彼,百战不殆;想要知道jq功能如何实现,先要了解其特性;

###如何实现链式调用

根据对象的特性,发还jq对象;

  • 返还this对象
class Jq{click(){console.log("click...");return this;}
}
let myjq = new Jq();
myjq.click().click();
  • 返还实例化对象

处理ready和原生节点

  • 针对ready方法做兼容处理
  • 原生节点直接保存
   if (typeof arg === "string") {let els = document.querySelectorAll(arg);} else if (typeof arg === 'function') {window.addEventListener("DOMContentLoaded",arg,false);} else {if(typeof arg.length === 'undefined'){// 一个对象;this[0] = arg;this.length = 1;}else{// 对象类数组;this.addEle(arg);}}

###选择器器封装

  • $(“.box”)选择节点实现

封装jq的eq方法

​ 注意返还对象,实现链式调用

 eq(index){// 继续操作// return this[index];return new Jq(this[index],this);}

###实现end方法

返还上次操作的节点;

 end(){return this.prevObject;}

实现jq里的click方法

绑定click事件

click(fn) {for (let i = 0; i < this.length; i++) {this[i].addEventListener("click", fn, false);}}

实现on方法

和click方法类似,可以处理多个事件;

实现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}
      

总结

  • 类及对象

  • 链式调用

  • 对象的包装

  • 拓展功能

下节课预告

  • 异步专题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/52899.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java项目:基于SpringBoot+mysql在线拍卖系统(含源码+数据库+答辩PPT+毕业论文)

一、项目简介 本项目是一套基于SSM框架mysql在线拍卖系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、功能齐全、…

Java 面试题:HTTP版本演变--xunznux

文章目录 HTTP版本演变HTTP/0.9HTTP/1.0HTTP/1.1新引入&#xff1a;问题&#xff1a;长连接是什么&#xff1a;管道网络传输&#xff1a;队头阻塞是什么&#xff1f;解决http队头阻塞的方法&#xff1a;HTTP1.1常见性能问题为解决HTTP1.1性能问题而提出的常见优化手段 HTTP/21、…

【河北航空-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

RS485与USB3.1电路

USB2.0最高也就480M&#xff0c;而USB3.0轻松到达5Gbps&#xff1a; DTU远程控制&#xff1a; DTU&#xff08;数据传输单元&#xff09;通常用于将数据从现场设备传输到远程服务器&#xff0c;常用于物联网、工业控制、远程监控等场景。它可以通过GPRS/4G、Wi-Fi、以太网等方…

Python网络爬虫模拟登录与验证解析

内容导读 使用Selenium模拟登录 使用Cookies登录网站 模拟表单登录网站 爬虫识别简单的验证码 实例解析 一、使用Selenium模拟登录 1、为什么要模拟登录 在互联网上存在大量需要登录才能访问的网站&#xff0c;要爬取这些网站&#xff0c;就需要学习爬虫的模拟登录。对…

TC-RAG: Turing-Complete RAG--图灵完备的检索增强

摘要&#xff1a; 在提升领域特定的大语言模型&#xff08;LLMs&#xff09;的方法中&#xff0c;检索增强生成&#xff08;RAG&#xff09;技术作为一种有前景的解决方案&#xff0c;可以缓解诸如幻觉、知识过时以及在高度专业化查询中专业知识有限等问题。然而&#xff0c;现…

WPF- vs中的WPF应用项目模板 如何自己实现

读书笔记 1. 单个 c#文件的 空白window应用程序 (只展示了一个button按钮) 2.C#文件 和xml文件 的空白window程序 .xml文件作为程序的资源 (只一个button按钮) 3. xmal和c#共同编译 形如使用VS 创建WPF应用项目模板 1.新建一个wpf空白项目 ,添加一个主c#文件 和xaml文件(属…

【C++ Primer Plus习题】7.2

问题: 解答: #include <iostream> using namespace std;#define MAX 10int input(float* grade, int len) {int i 0;for (i 0; i < len; i){cout << "请输入第" << i 1 << "个高尔夫成绩(按0结束):";cin >> grade[i]…

【二叉树进阶】--- 前中后序遍历非递归

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 算法Journey 本篇博客我们将来了解有关二叉树前中后序遍历的非递归版本。 &#x1f3e0; 前序遍历 要迭代非递归实现二叉树的前序遍历&#xff0c;首先还…

【Android】MotionLayout实现动画效果

【Android】MotionLayout实现开场动画 在移动应用开发中&#xff0c;动画不仅仅是美化界面的工具&#xff0c;它更是提升用户体验的关键手段。Android 平台一直以来都提供了丰富的动画框架&#xff0c;但随着应用复杂性的增加&#xff0c;开发者对动画的需求也变得更加复杂和多…

如何通过WinRAR软件有效禁止RAR压缩包内文件的修改

RAR压缩包作为一种广泛使用的文件格式&#xff0c;凭借其高压缩比和强大的功能&#xff0c;成为了许多用户保存和传输文件的首选。然而&#xff0c;在某些情况下&#xff0c;我们可能希望确保RAR压缩包内的文件不被随意修改或删除&#xff0c;以维护文件的安全性和完整性。本文…

【网络】数据链路层-MAC帧

数据链路层-以太网与ARP协议 文章目录 1.数据链路层2.以太网2.1什么是以太网2.2MAC帧格式 3.ARP协议3.1为什么有ARP协议&#xff1f;3.2ARP的定位3.3ARP协议工作流程3.4ARP数据格式 4.RARP协议 1.数据链路层 数据链路层是网络协议栈中最底层的内容&#xff0c;而在之前对其他…

python基础学习(最终篇)

文章目录 JSON的基础使用一. JSON简介二. JSON语法规则三. JSON数据类型四. JSON对象五. JSON数组六. JSON函数1. json.dumps2. json.loads3. json.dump4. json.load5. encode6. decode7. 参数说明 总结 JSON的基础使用 一. JSON简介 JSON(JavaScript Object Notation) 是一种…

IOC 概述

一、IOC 概述 控制反转&#xff08;Inversion of Control&#xff0c;简称 IOC&#xff09;是一种设计原则&#xff0c;它通过将对象的创建和管理权交给外部容器来实现对象之间的解耦。这种模式使得组件之间的依赖关系变得更加灵活和可维护。在 Spring 框架中&#xff0c;IOC …

恶劣天气下的目标检测新突破:多尺度退化建模与特征融合策略

更多优质内容&#xff0c;请关注公众号&#xff1a;智驾机器人技术前线 1.论文信息 论文标题&#xff1a;Degradation Modeling for Restoration-enhanced Object Detection in Adverse Weather Scenes 作者&#xff1a;Xiaofeng Wang, Xiao Liu, Hong Yang, Zhengyong Wang, …

阿里PAI-ChatLearn:大规模 Alignment高效训练框架正式开源

导读 ChatGPT是OpenAI开发的基于大型语言模型(LLM)的聊天机器人&#xff0c;以其令人惊叹的对话能力而迅速火爆并被广泛采用。ChatGPT 成功背后得益于大型语言模型生成领域的新训练范式&#xff1a;RLHF (Reinforcement Learning from Human Feedback)&#xff0c;即以强化学习…

PTA L1-028 判断素数

L1-028 判断素数&#xff08;10分&#xff09; 本题的目标很简单&#xff0c;就是判断一个给定的正整数是否素数。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;≤ 10&#xff09;&#xff0c;随后N行&#xff0c;每行给出一个小于的需要判断的正整数。 …

利用clip模型实现text2draw

参考论文 实践 有数据增强的代码 import math import collections import CLIP_.clip as clip import torch import torch.nn as nn from torchvision import models, transforms import numpy as np import webp from PIL import Image import skimage import torchvision …

滚柱导轨:数控机床高效运行的驱动力

机床制造者最关心的莫过于机床的精度&#xff0c;刚性和使用寿命&#xff0c;对导轨系统的关注甚少。但导轨为机床功能的实现奠定了可靠的基础&#xff0c;各种类型的机床工作部件&#xff0c;都是利用控制轴在指定的导轨上运动。机床设计者根据机床的类型和用途选用各种不同形…

C++ 中 static 关键字

修饰普通变量&#xff0c;修改变量的存储区域和生命周期&#xff0c;使变量存储在静态区&#xff0c;在 main 函数运行前就分配了空间&#xff0c;如果有初始值就用初始值初始化它&#xff0c;如果没有初始值系统用默认值初始化它。 修饰普通函数&#xff0c;表明函数的作用范围…