jQuery(1)jQuery简介

一、什么是jQuery?
是第三方开发的执行DOM操作的极简化的函数库
极简化:jQuery对DOM中的每一步操作都进行的终极的简化。但是做事的步骤并没有简化
函数库:jQuery中一切都是用函数来解决问题,没有属性
为什么: 2个原因:

  1. 简单!
  2. 解决了大部分浏览器兼容性问题:
    凡是jQuery让用的,都没有兼容性问题
    何时: 今后PC端的项目,以及主流的框架底层,都是用jQuery实现的。
    趋势: jQuery仅适用于PC端,不适用于移动端

二、如何使用jQuery? 1、下载:jQuery.com 版本:
1.x 唯一支持旧浏览器的版本
未压缩版: 优点: 拥有完备的注释,代码格式以及见名知意的变量名——学习和开发时
缺点: 体积大,不利于下载和传输
压缩版: 优点: 体积小,便于快速下载和传输 ——生产环境 缺点: 去掉所有注释和代码格式,并极简化了变量名。
2.x 不再支持旧浏览器
3.x 不再支持旧浏览器,而且添加了部分新功能

2、引入:哪个页面需要用jQuery的简化版函数,都要先引入jQuery.js,再编写自定义的js代码 <script src="jquery.js"> <script src="自定义.js">

3、jQuery的原理:
当引入jQuery时,其实是在window中添加了一种新类型jQuery。 jQuery也由两部分组成:
(1)构造函数function jQuery(){}——负责创建该类型的子对象
(2)原型对象:jQuery.prototype——负责保存该里欸选哪个所有子对象共有的函数
问题:创建jQuery家的子对象,是为了使用jQuery家的简化版函数操作DOM元素
如何将DOM元素和jQuery对象关联上?
     在创建jQuery子对象时,就提供一个 选择器参数,请jQuery帮忙去DOM树上找到DOM元素对象,保存进新建的jQuery子对象中。主要做了两件事:
①先去查找指定选择器的DOM元素;
②创建jQuery子对象,其中保存找到的DOM元素。
结果:其实jq对象是一个类数组对象,其中用下标保存住选择器找到的多个DOM元素:{0: DOM对象 , 1: , 2: ,... }
所以为了区分jQuery对象和DOM元素对象,今后凡是保存jQuery对象的变量,习惯上都用:$xxx开头。jQuery子对象,都可以调用jQuery家的简化版函数。否则无法调用jQuery家的函数——例:var $btn=$("#btn")
window.$=window.jQuery
···别名 因此:调用$()等效于调用jQuery()等效于new jQuery()

示例图:

在这里插入图片描述

总结

j Q u e r y 便 D O M 使 j Q u e r y D O M f u n c t i o n ( ) . . . D O M . D O M t h i s e . t a r g e t D O M t h i s e . t a r g e t 的本质是创建一个jQuery子对象,只不过顺便用选择器查找DOM元素保存进来。 如何使用简化版函数,操作jQuery子对象中保存的找到的DOM元素呢? 结果: 事件处理函数function(){...}其实,还是直接绑定在DOM元素上的。事件触发时,调用事件处理函数的.前的主语还是DOM按钮对象。所以事件处理函数中的this和e.target得到的都是DOM按钮对象。如果想对this或e.target继续调用简化版函数,都应该变为 (this)或$(e.target)。也就是新创建一个小的jQuery子对象,将this或e.target包装起来,才能继续调用jQuery家的简化版函数。

jQuery简化版函数的三大特点: 1 一个函数两用: 2 自带遍历 3 ?