jQuery相关资料

课程内容介绍

  • 1 jQuery基本使用和jQuery选择器
  • 2 jQuery的DOM操作
  • 3 jQuery事件、插件

1 jQuery的基本使用和jQuery选择器

1.1 为什么要学jQuery?

1.1.1 学习JS的遇到的痛点

  • 1 window.onload 事件只能出现一次
  • 2 浏览器兼容性问题
  • 3 简单功能实现很繁琐
  • 4 属性或方法的名字很长容易出错

1.2 jQuery是什么?

1.2.1 jQuery描述(理解)

jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。

Js库是把我们常用的方法放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了。
animate.js是我们自己封装的库,而jQuery是别人帮我们封装好的库。

1.2.2 学习jQuery主要是学什么?

  • 1 学习jQuery提供的操作DOM的方法
目前这个阶段,主要学习如何来使用jQuery操作DOM,其实就是学习jQuery封装好的那些方法,
这些方法叫做 API(Application Programming Interface 应用程序编程接口)。
这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是方法调用,
也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同。

1.3 如何使用jQuery?(重点)

  • 使用步骤:
1.引入jQuery文件
2.入口函数
3.功能实现代码(事件处理)
  • 案例:点击按钮设置文字和展示div功能

1.3.1 jQuery的优势

1.4 jQuery详细解释

1.4.1 版本介绍(了解)

  • jQuery的三个版本:
v1.xx 版本(使用)
v2.xx 版本 和 v3.xx 版本(最新版,是v2.xx版本的延续)
v3.xx 版本包含了两个版本:普通版和瘦身版(提交更小)

版本的区别:2.x版本和3.x版本,不再支持IE6、7、8

考虑兼容性使用:1.xx版本
  • 各版本的兼容性
v1.xx 版本:          兼容 IE6-8,以及其他浏览器
v2.xx 和 v3.xx 版本: 兼容 IE9+, 以及其他浏览器
  • 同版本两个文件的区别:(压缩和不压缩的区别)
min:压缩版,压缩过后,体积会更小

压缩指的是:把注释、空格、换行全部去掉,把变量名称尽可能的换成更加简短的字符。
压缩的主要目的:就是让文件变的更小。

两个文件的选择建议:
平时开发过程中,这两个文件使用哪个都可以;但是,项目上线的时候,一定要使用压缩版。

1.4.2 引包注意点(理解)

  • 1 先引用jQuery文件再写jQuery代码
  • 2 src路径要正确

1.4.3 jQuery的入口函数(重点)

  • 方式一:
$(document).ready(function(){// 功能代码});
  • 方式二:
$(function(){// 功能代码});

1.4.4 jQuery入口函数与js入口函数的区别(理解)

  • js入口函数指的是:window.onload = function() {};
  • 区别:
1、书写个数不同
Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。

2、执行时机不同
Js入口函数是在文档和所有的其他资源文件加载完成后,才执行。
这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,
不用等到所有的外部资源都加载完成。
  • 文档加载的顺序:从上往下,边解析边执行。

1.4.5 jQuery的$符号(重点)

  • Js命名规范允许出现的字符有:数字、字母、下划线、$。
  • Js命名规范允许作为变量命名开头的字符有:字母、下划线、$;但是,不允许以数字作为变量命名的开头。

  • 示例:

var $ = "我是字符串";var $ = 123;function $(){alert("我是函数$");}$(); // 调用我们自定义的函数$
  • jQuery里面的$符号实际上是一个函数
// jQuery里面使用$的方式
$(document).ready(function(){ }); // 调用入口函数
$(function(){ });                 // 调用入口函数
$("#btnShow")                     // 获取id属性为btnShow的元素
$("div")                          // 获取所有的div元素

jQuery里面的$函数,根据传入参数的不同,进行不同的调用,实现不同的功能。返回的是jQuery对象

jQuery这个js库,除了$之外,还提供了另外一个函数:jQuery
jQuery函数跟$函数的关系:jQuery === $   => true

1.4.6 jQuery对象和DOM对象的相互转换(难点)

  • DOM对象:通过DOM的API获取到的对象
// btn就是一个DOM对象var btn = document.getElementById("btnShow");
  • jQuery对象:通过jQuery的API获取到的对象
// $btn就是一个jQuery对象var $btn = $("#btnShow");
  • jQuery对象是包装的DOM对象的集合,即:包装集

  • DOM对象转换成jQuery对象:

var $btn = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn
  • jQuery对象转换成DOM对象:
// 方式一(推荐使用此方式)
var btn1 = $btn[0];
// 方式二
var btn2 = $btn.get(0);

以上两种方式都要记住,使用哪一种都可以。

所有这些,都体现了jQuery对js的封装!

1.5 JS跟jQuery的区别是什么?(理解)