什么是jquery

1.1 知识点

1.1.1 Window.onload  ===  $(document).ready();

1.1.2 $(“”);获取元素  标签名，.类名，#id

1.1.3 .事件（function（）{方法体}）事件是通过方法绑定的

1.2 jQuery是什么？

1.2.1 jQuery描述（理解）

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

Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

animate.js(JQurey.js)是我们自己封装的库，而jQuery是别人帮我们封装好的库。

1.2.2 学习jQuery，主要是学什么呢？

目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。

这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

 

 

1.2.3 体验JQuery

JS实现显示盒子，设置文字。

JQ实现显示盒子，设置文字。

 

1.3 如何使用jQuery？（重点）

使用步骤：

 

 

1．引包

2．入口函数

3．功能实现代码（事件处理）

 

jQuery隐式迭代简单介绍：（了解）

隐式 对应的是 显示，隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。

 

1.4 jQuery详细解释

1.4.1 版本介绍（了解）

 

注：v1.11.3和v2.1.4是两个大版本的最新版

版本一：1.x版本

版本二：2.x版本

两个版本的区别：2.x版本，不再支持IE6、7、8

两个版本对浏览器的支持情况：

 

 

这几天主要学习1.x版本，1.x版本说明：

 

同版本两个文件的区别：

min：压缩版，压缩过后，体积会更小

压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。

压缩的主要目的：就是让文件变的更小。

平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。

 

1.4.2 引包注意点（理解）

第一点：在使用jQuery之前，先把jQuery文件引到页面中来

如果在使用jQuery之前，没有引用jQuery文件，会报错：

 

第二点：src路径一定要写正确

如果src路径写错，也会报错：

 

 

1.4.3 jQuery的入口函数（重点）

 

第三种方式：所以资源加载完毕再执行等同与window.onload

$(window).ready(function(){方法体});

1.4.4 jQuery入口函数与js入口函数的区别（理解）

js入口函数指的是：window.onload = function() {};

 

区别一：书写个数不同

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

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 ===$;

1.4.6 jQuery对象和DOM对象的相互转换（难点）

DOM对象此处指的是：使用js操作DOM返回的结果。

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。

jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

（联想：手机和有手机壳的手机，手机就好比是DOM对象，有手机壳的手机就好比是jQuery对象）

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

DOM对象转换成jQuery对象：

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

// $(document）.ready(function(){}); // 调用入口函数

// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

 

jQuery对象转换成DOM对象：

// 第一种方式

var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）

// 第二种方式

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

这两种方式都要记住，使用哪一种都可以。

案例：隔行变色

案例：开关灯

图解：

 

 

 

所有这些，都体现了jQuery对js的封装！