从零实现一个简易jQuery框架之一—jQuery框架概述
我们知道,不管学习任何一门框架,了解其设计的理念、目的、总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的。因此在这里先梳理一下本人对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仅实现了基础的方法和函数。但为了满足不同开发需求,留下了易于扩展的方法和接口。
转载于:https://www.cnblogs.com/yuliangbin/p/9281252.html
从零实现一个简易jQuery框架之一—jQuery框架概述相关推荐
- 一个简易版的T4代码生成框架
对于企业开发来说,代码生成在某种意义上可以极大地提高开发效率和质量.在众多代码生成方案来说,T4是一个不错的选择,今天花了点时间写了一个简易版本的T4代码生成的"框架",该框架仅仅 ...
- Android 从零开发一个简易的相机App
本文介绍了实现一个简易Android相机App过程中,遇到的一些问题,对Camera API的选型.通知相册更新.跳转相册.左右滑动界面切换拍照/录像,相机切换时候的高斯模糊虚化效果.相机切换的3D效 ...
- 一个简易的DIY场景H5框架
第一次发项目,以供大家学习参考,可能有些简陋,若有不合理处,请大神们指教. 最近在朋友圈出现了很多DIY类的H5游戏,通过添加拖拉摆放和组合元素,来DIY自定义一个场景并合成图片分享出去的新H5展示形 ...
- 依赖注入:一个Mini版的依赖注入框架
前面的章节中,我们从纯理论的角度对依赖注入进行了深入论述,我们接下来会对.NET Core依赖注入框架进行单独介绍.为了让读者朋友能够更好地理解.NET Core依赖注入框架的设计与实现,我们按照类似 ...
- 从零写一个具有IOC-AOP-MVC功能的框架---学习笔记---11. MVC功能之http请求处理器的编写---简易框架最后一公里!
从零写一个具有IOC-AOP-MVC功能的框架-学习笔记 专栏往期文章链接: IOC功能相关章节: 从零写一个具有IOC-AOP-MVC功能的框架-学习笔记-01.项目初始化 从零写一个具有IOC-A ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)...
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- 从零开始实现一个简易的Java MVC框架(六)--加强AOP功能
前言 在前面从零开始实现一个简易的Java MVC框架(四)--实现AOP和从零开始实现一个简易的Java MVC框架(五)--引入aspectj实现AOP切点这两节文章中已经实现了AOP功能并且引用 ...
- 如何搭建一个简易的Web框架
Web框架本质 什么是Web框架, 如何自己搭建一个简易的Web框架?其实, 只要了解了HTTP协议, 这些问题将引刃而解. 简单的理解: 所有的Web应用本质上就是一个socket服务端, 而用户 ...
最新文章
- 加权轮询算法PHP,PHP实现负载均衡的加权轮询方法分析
- Linux运维工程师发展前景
- oracle数据库详细性能参数,ORACLE数据库性能参数的优化
- linux 安装软件_Linux:其它软件安装方式
- JAVA进阶day07JNI(java调用c)B部分
- 分页加载PullToRefreshLayout+PullableListView
- 用户与组在Linux 菜单,linux 用户和组的管理
- python代码翻译器-利用Python制作一款简单的翻译软件
- Android 通过StickyBroadcast获取电量
- 数据库设计方法、规范和技巧
- Python练习题参考
- 计算机专业解说,计算机专业解说.ppt
- 第9届蓝桥杯Java组省赛
- 影视网站导航PHP源码
- html直线箭头,HTML中利用div+CSS实现简单的箭头图标的代码
- HTML5+CSS3小实例:后台管理系统的侧边导航栏
- mysql5.7.10 二进制包_mysql 32 位安装教程mysql5.7 二进制包安装
- 解决java编译错误( 程序包javax.servlet不存在javax.servlet.*)
- pandas的iloc、loc、ix的使用(列切片及行切片)
- AS调用百度地图定位