我们知道,不管学习任何一门框架,了解其设计的理念、目的、总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的。因此在这里先梳理一下本人对jQuery框架的一些理解。

设计目的(为什么要设计这个框架)

jQuery可以分解为JavaScript + Query。即JavaScript查询的意思。所以jQuery的核心目标就是JavaScript查询,通过选择DOM元素再对DOM元素进行操作。并解决了跨浏览器兼容问题,使DOM操作趋于统一。

如何实现

选择DOM是为了对其进行进一步的操作。这些操作主要包括以下几个部分

  • 属性操作

  如class,style,attribute等

  • 元素操作

  如元素的创建、添加、移动、复制、删除等

  • 内容操作

  通过innerHTML等获取或设置元素的内容

  • 样式操作

  如对元素的width、height、position、display等样式进行获取或修改

  • 事件操作

  Event是用户与浏览器进行动态交互的重要模块。如添加、删除事件等

  • 通信操作

  Ajax技术用于客户端和服务器端进行异步通信,实现页面的局部刷新。

jQuery 核心特性

1、jQuery()或$()

jQuery把所有的操作都包含在一个jQuery()函数中,提供了一个统一的操作入口jQuery()或$()。

jQuery框架的基础是查询,即查询文档元素对象。因此我们可以认为jQuery函数对象就是一个选择器,并在此基础上构建和运行查询过滤器。

需要注意的是:jQuery对象的方法都是针对DOM元素对象进行操作的。

2、jQuery构造函数

jQuery把所有操作都包装在一个jQuery()函数中,形成了统一(也是唯一)的操作入口。能够解析任意的数据类型,但是能够解析的参数包括以下四种类型

  • $(expression,context)

  expression可以是一个ID,DOM元素名,CSS表达式,XPath表达式。

  context表示查找的上下文环境,若不写,则表示在整个document中查找

  • $(html)

  html表示一个HTML结构字符串,此时jQuery将创建一个对应结构的html文档片段。

 $("div").append($("<p>hello world</p>"))
  • jQuery(element)

  element表示一个DOM对象或集合,把DOM元素或集合当中的DOM元素转换为jQuery对象。

$(document).ready(function () {
alert("hello world");
})
//将document文档对象转换为jQuery对象,然后调用ready方法,ready处理函数为document绑定一个事件,当页面初始化之后,弹出弹出框。
  • $(fn)

  fn是一个处理函数,由于$(document).ready()使用频繁,所以jQuery使用$()来代替。表示在DOM元素解析完成后就执行代码

3、链式写法

核心就是通过return语句返回jQuery对象。

4、选择器

jQuery选择器支持ID,TagName,CSS1-CSS3的表达式(即支持用CSS选择器来选择元素)。

只需要将字符串传入jQuery()构造函数,就可以选择不同的DOM对象,然后处理成jQuery对象返回。

5、扩展性

为什么jQuery需要扩展性?

简单的说就是为了满足不同的开发需求。为了保证jQuery的通用性并同时保证代码简洁性(就是体积越小越好),jQuery仅实现了基础的方法和函数。但为了满足不同开发需求,留下了易于扩展的方法和接口。

从零实现一个简易jQuery框架之一—jQuery框架概述的更多相关文章

  1. 从零实现一个简易的jQuery框架之二—核心思路详解

    如何读源码 jQuery整体框架甚是复杂,也不易读懂.但是若想要在前端的路上走得更远.更好,研究分析前端的框架无疑是进阶路上必经之路.但是庞大的源码往往让我们不知道从何处开始下手.在很长的时间里我也被 ...

  2. [ASP.NET Core 3框架揭秘] 依赖注入[4]:一个Mini版的依赖注入框架

    在前面的章节中,我们从纯理论的角度对依赖注入进行了深入论述,我们接下来会对.NET Core依赖注入框架进行单独介绍.为了让读者朋友能够更好地理解.NET Core依赖注入框架的设计与实现,我们按照类 ...

  3. 使用Phalcon框架开发一个简易的博客系统

    使用Phalcon PHP框架开发一个简易的博客系统(类似于CMS) 最近在做Phalcon(Phalcon在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...

  4. 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)

    整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...

  5. jquery+flask+keras+nsfw快速搭建一个简易鉴黄工具

    1. demo 地址:http://www.huchengchun.com:8127/porn_classification 接口说明: 1. http://www.huchengchun.com:8 ...

  6. 使用MVVM框架avalon.js实现一个简易日历

    最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当 ...

  7. 依赖注入[5]: 创建一个简易版的DI框架[下篇]

    为了让读者朋友们能够对.NET Core DI框架的实现原理具有一个深刻而认识,我们采用与之类似的设计构架了一个名为Cat的DI框架.在<依赖注入[4]: 创建一个简易版的DI框架[上篇]> ...

  8. 依赖注入[4]: 创建一个简易版的DI框架[上篇]

    本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章(<控制反转>.<基于IoC的设计模式>和< 依赖注入模式>)从纯理论的角度 ...

  9. .NET CORE学习笔记系列(2)——依赖注入[4]: 创建一个简易版的DI框架[上篇]

    原文https://www.cnblogs.com/artech/p/net-core-di-04.html 本系列文章旨在剖析.NET Core的依赖注入框架的实现原理,到目前为止我们通过三篇文章从 ...

随机推荐

  1. firefox 59 无法使用 pac 代理上网

    最近装了 firefox,电脑配置不太高,chrome 太吃内存了. 但是发现 SwitchyOmega的 pac 模式无法工作,这篇文章提到了两个思路, 其中network.dns.disableI ...

  2. C# LINQ(4)

    where作为LINQ的条件关键字. where的右面是表达式 表达式可以方法返回值,但是where的右面最终是一个可检测真假的表达式 代码: static void Main(string[] ar ...

  3. C# 密封(2)

    上一章节说到 sealed  作用于类,那么sealed 作用到方法和成员上面该如何呢. 在C# 中 Sealed作用于方法必须是重写之后的方法.也就是override+sealed.在之后别的类在继 ...

  4. 《Servlet和jsp学习指南》 笔记1

    chapter 1 Servlet 4个java 包: 对于每一个http请求,Servlet请求都会创建一个ServletRequest实例,并将它传给Servlet的service方法.Servl ...

  5. 看了这篇Dubbo RPC面试题,让天下没有难面的面试题!

      前言: RPC非常重要,很多人面试的时候都挂在了这个地方!你要是还不懂RPC是什么?他的基本原理是什么?你一定要把下边的内容记起来!好好研究一下!特别是文中给出的一张关于RPC的基本流程图,重点中 ...

  6. iOS APP日志写入文件(日志收集)

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  7. gevent 传参, 中文编码

    #coding=utf-8 import os from gevent import monkey,pool monkey.patch_all() import gevent import time ...

  8. C++_基础4-分支语句和逻辑运算符

    这一部分截取自<C++ Primer Plus>,内容比较简单,很多只取了一些主题关键词,有空再补充: 设计智能程序的一个关键是使程序具有决策能力. 前面一种方式是循环——程序决定是否继续 ...

  9. Codeforces - 71E 状压DP

    参考官方题解 #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #define rr ...

  10. VBS映射网络驱动器 映射网络驱动器

    Dim objNetwork Set objNetwork = CreateObject("Wscript.Network") if objNetwork.EnumNetworkD ...