什么是Jquery框架
所谓框架,就是指一套包含工具、函数库、约定、以及尝试从常用任务中抽象出可以复用的通用模块,其目的使开发人员和设计师把重点放在特有的业务逻辑上,避免重复开发。Jquery就是这样一个东西,因此被称作Jquery框架。避免重复开发,也就是Jquery开发人员的初衷“写的更少做的更多”。但是Jquery不是一门独立的语言,它是基于javascript的封装。它具有以下特点:
①轻量级 ②强大的选择器 ③出色的 DOM 操作的封装 ④可靠的事件处理机制
另外,Jquery框架只有一个入口,即Jquery()函数或者说是$()这二者等价。下面就其操作对象和操作工具,以及Jquery、HTML、css三者之间的关系这三方面对Jquery做个介绍。
对象
DOM对象
Document Object Model,它是W3C国际组织的一套web标准。它定义了访问HTML文档对象的一套属性、方法和事件。 DOM是以层次结构组织的节点或信息片断的集合。文档对象模型(Document Object Model)是给HTML与XML文件使用的一组API。DOM其实质就是接口,它提供了访问和操作html的可能。也就是它的存在分离了html的行为成为可能。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。下面看看html的DOM对象层次结构。具体的属性方法不做详细介绍了。
Jquery对象
Jquery对象是有别于DOM对象的,它是对于Jquery而言而存在的。DOM对象经过包装之后才成为Jquery对象。也就是Jquery对象比DOM对象要多一写东西,这让我想起来本山大叔的小品:蛇入河出来个乌龟,别以为你穿个马甲我就不认识你了。它们两个的差别其实也就这么回事,像但不一样。其实这个蛇河乌龟的例子是不合适的,因为实际上乌龟脱了马甲必须是蛇才是对的。Jquery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用jQuery 里的任何方法。所以你要使用Jquery方法就必须先对DOM对象进行一次转换,或者说包装。
对象转换
DOM对象→Jquery对象对于一个 DOM 对象,只需要用 $() 把 DOM 对象包装起来。jQuery 对象就是通过 jQuery 包装 DOM对象而获得一个jQuery 对象。
Jquery对象→DOM对象
这个转换实际上只要定义一个DOM对象的变量,然后将Jquery对象赋值给它就好了。
工作原理
这里想说的是,html文档是怎么变成DOM对象的。这里需要知道一个东西叫DOM解析器。之前查资料的时候看到过一句话:任何加载到浏览器的网页都会被保存成Document对象。这里起作用的也就是解析器。当你的浏览器加载网页时,解析器就是讲网页解析成为DOM对象树保存起来。知道DOM对象怎么来的,后面的大家应该都知道了。Jquery选择器结构
Jquery的选择器功能是非常丰富的(如下图)。可以分为两大类基本选择器和过滤选择器,基本选择器中有一套css选择器,这个不介绍了css中已经接触过了。那么层级选择器是针对DOM对象树的层次结构的元素选择器,因为树是有层次结构的,层级选择器就可以选择上一层或者下一层或者同一层的元素。
表单域选择器就是选取文档中的表单域的选择器,那么文档中的表单域是什么东西呢?所谓的表单域指的是input,button等元素。过滤选择器就不介绍了,大家自己查查资料吧。
HTML、CSS、Jquery的关系
这个三者的关系可以用三层来理解,HTML是结构层,CSS是表现层,Jquery是行为层。这三者共同构成一个网页。HTML+CSS虽然分离了结构和表现,但是依旧是静态的。就是对于网页的改变是不方便的。而Jquery的加入就实现了网页行为的独立,保持了HTML和CSS的相对独立。Jquery来应对改变。
注:图片来自于他人博客或者文档找不到出处了,特此说明。