一、jQuery基础知识
（一）、jQuery介绍
jQuery库可以通过一行简单的标记被添加到网页中。
jQuery：它是一个开源的ajax框架.在企业中用得最多的一个Ajax框架
- jQuery 宗旨
write less, do more : 写更少，做更多。
- jQuery库的特性
jQuery是一个JavaScript函数库
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
- 市面上较流行Ajax框架
- 重量级(会提供界面组件)：extjs、dojo
- 轻量级(没有界面组件)：jquery、prototype
- 学习Ajax框架
- 它解决了跨浏览器js兼容问题
- 它简化了dom编程
- 它简化异步请求
- 它提供了一批工具方法
（二）、jQuery下载
- 官方网站
- jQuery 各版本下载地址
- jQuery的版本说明
- V1.xxx： 它兼容所有的浏览器
- V2.xxx： jquery-2.0以上版本不再支持IE 6/7/8
- V3.xxx：目前最新版本：3.0 对应之前的 2.x，关注更新的浏览器，对于IE支持到 9.0以上 版本
- 下载jQuery框架
- jquery-1.11.3.js：（源码） 核心部分、未压缩的文件最好用于开发和调试过程中
- jquery-1.11.3.min.js：（压缩）、压缩文件可以节省带宽,提高生产性能
（三）、jQuery引用以及使用
jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。
可以通过下面的标记把jQuery添加到网页中
<html>
<head>...</head>
<body>
..
<script src="./js/jquery.js"></script>
</body>
</html>（四）、jQuery监听文档加载事件
- $(document).ready()
<script src="./js/jquery.js"></script>
<script>
$(document).ready(function(){
alert("文档加载完毕1");
});
</script>- $(this).ready()
<script src="./js/jquery.js"></script>
<script>
$(this).ready(function(){
alert("文档加载完毕2");
});
</script>- $(function(){})
<script src="./js/jquery.js"></script>
<script>
$(function(){
alert("文档加载完毕3");
});
</script>二、JavaScript基础
（一）、变量
变量：是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器
对于变量的使用首先必须明确其命名规则、声明方法及其作用域
- 变量的命名规则
- 必须以字母或下划线开头，中间可以是数字、字母或下划线
- 变量名不能包含空格、加号、减号等符号
- 不能使用javaScript中的关键字
- 变量名是严格区分大小写的
- 与标识符的命名规则差不多
- 变量的声明和赋值
- 在jQ 中，使用变量前需要先对其进行声明，所有的jQ变量都由关键字
var声明，语法格式如下var variable; - 在声明变量的同时也可以对变量进行赋值，
var variable = 10; - 可以使用一个关键字
var同时声明多个变量，var a,b,c; - 也可以在声明变量的同时对其赋值，即初始化，
var i=1,j=2,k=3; - 如果只是声明了变量，并未对其赋值，则其值默认为
undefined
- 变量的作用域
- 在JS中变量根据作用域可以分为两种：全局变量和局部变量
var c = 30; //该变量在函数外声明，作用域为全局
function btn() {
var a = 10; //该变量在函数内声明，作用域为局部（btn函数里）
}- 变量的生存期
变量的生存期是指变量在计算机中存在的有效时间。
- 从变成的角度来说，可以简单地理解为该变量所赋的值在程序中的有效范围
变量的生存期有两种：全局变量和局部变量
- 全局变量在主程序中定义，其有效范围从其定义开始，一直到本程序结束为止。
- 局部变量在程序的函数中定义，其有效范围只有在该函数之中，在函数结束后，局部变量的生存期也就结束了
（二）、赋值语句
赋值语句是程序中最常用的语句
在程序中，往往需要大量的变量来存储程序中用到的数据，所以用来对变量进行赋值的赋值语句也会在程序中大量出现
- 语法：
变量名=表达式； - 当使用关键字var 声明变量时，可以同时使用赋值语句对声明的变量进行赋值
var num = 10；var str = "Hello world!";var bool = true;var obj = new Object();
（三）、窗口对象
窗口对象(Window)： 表示浏览器中打开的窗口
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
- 窗口(Window)对象方法
alert(): 显示带有一段消息和一个确认按钮的警告框
<script>
alert('页面会弹出信息框');
</script>prompt()： 显示可提示用户输入的对话框
<script>
prompt('页面会弹出带有输入框的信息框');
</script>confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框
<script>
confirm('页面会弹出带确定和取消按钮的对话框');
</script>三、数据类型&转换规则
（一）、数据类型
字符串(String)
字符串：是存储字符的变量
用来表示文本的数据类型，程序中的字符串是包含单/双引号中的，由单引号定界的字符串中包含有双引号，反之也是如此
var x = "你好，前端!"；
var y = '你好，前端！'；
var i = '你好，"前端"'；
var z = "你好，'前端'";数字(Number)
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
JavaScript 数字型数据可以为正数也可以为负数
JavaScript 数字型数据可以使用八进制、十进制、十六进制运算
var x = 10;//整数类型
var y = 10.00;//浮点类型
var a = 10; //正数
var b = -10;//负数
var c = 0xff; // 十六进制布尔值(Boolean)
布尔值通常用于流程控制
字符串和数字型的值都是无穷尽的，然而布尔数据类型（逻辑）只能有两个值：true 或 false，这两个值分别用来说明某个事物是真还是假
var x = true; //真
var y = false; //假数组(Array)
数组对象的作用是：使用单独的变量名来存储一系列的值
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值
数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到
// 常规形式
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
// 简洁方式
var myCars=new Array("Saab","Volvo","BMW");
// 字面
var myCars=["Saab","Volvo","BMW"];对象(Object)
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数
对象只是一种特殊的数据。对象拥有属性和方法
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";Undefined
这个值表示变量不含有值，没有定义的值；或者被赋予了一个不存在的属性值
var i; //undefinedNULL
null是一个特殊的值，它表示为空值，用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值
var i = null;（二）、转义字符
以反斜杠开头的不可显示的特殊字符通常称为转义字符，也被称为控制字符
通过转义字符可以在字符串中添加不可显示的特殊字符，或者防止引号匹配混乱的问题
转义字符 | 描述 |
’ | 单引号 |
" | 双引号 |
& | 和号 |
\ | 反斜杠 |
\n | 换行符 |
\r | 回车符 |
\t | 制表符 |
\b | 退格符 |
\f | 换页符 |
（三）、函数定义的常用方式
- 函数声明
function sum() {
}- 函数表达式
var sum = function () {
}（四）、数据类型的转换规则
Number(mix)
**Number(mix)**函数可以将任意类型的参数mix转换为数值类型
**Number(mix)**转换规则
- 如果是布尔值，true和false分别被转换为1和0
- 如果是数字值，返回本身
- 如果是null，返回0
- 如果是undefined，返回NaN
- 如果是字符串
- 如果字符串中只包含数字，则将其转换为十进制（忽略前导0）
- 如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0）
- 如果是空字符串，将其转换为0
- 如果字符串中包含非以上格式，则将其转换为NaN
Number("hello CSSer!") // 结果NaN
Number("020dd") // 结果NaN
Number("070") // 结果70
Number(true) // 结果1
Number("0x8") // 结果8parseInt(string,radix)
parseInt() 函数可解析一个字符串，并返回一个整数
**parseInt()**规则
- 忽略字符串前面的空格，直至找到第一个非空字符
- 如果第一个字符不是数字符号或者负号，返回NaN
- 如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
- 如果上步解析的结果以0开头，则将其当作八进制来解析；如果以0x开头，则将其当作十六进制来解析
- 如果指定radix参数，则以radix为基数进行解析
parseInt("hello CSSer!") // 结果NaN
dparseInt(" 020dd") // 结果20
parseInt("070") // 结果70
parseInt(true) // 结果NaN
parseInt("0x8f",16) // 结果143
parseInt("22.5") // 结果22parseFloat(string)
**parseFloat(string)**将字符串转换为浮点数类型的数值
规则与parseInt基本相同
- 字符串中第一个小数点符号是有效的，另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值
var obj = {y:"10.0",x:"0010",z:"0.123浮点"}
parseFloat(obj.x) //结果10
parseFloat(obj.y) //结果10.0
parseFloat(obj.z) //结果0.123toString(radix)
toString(radix) 除undefined和null之外的所有类型的值都具有toString()方法，其作用是返回对象的字符串表示
对象 | 返回值 |
Array | 将Array的元素转为字符串。结果字符串由逗号隔开，且链接起来 |
Boolean | 如果Boolean值为true 返回"true"。否则，返回"false" |
Date | 返回日期的文字表示法 |
Number | 可把一个Number对象转为一个字符串，并返回结果 |
Stirng | 返回String对象的值 |
Object | 返回"[object object]" |
string(mix)
string(mix) 将任何类型的值转换为字符串
**string(mix)**转换规则
- 如果有toString()方法，则调用该方法（不传递radix参数）并返回结果
- 如果是null，返回”null”
- 如果是undefined，返回”undefined”
String("hello CSSer!") // 结果hello CSSer!
String(new Boolean(0)) // 结果false
String(070) // 结果56
String(true) // 结果true
String("0x8f") // 结果0x8f
String("22.5") // 结果22.5Boolean(mix)
Boolean(mix) 当要转换的值是至少有一个字符的字符串、非 0 数字或对象时，Boolean() 函数将返回 true。如果该值是空字符串、数字 0、undefined 或 null，它将返回 false
Boolean("") // 结果false
Boolean("hello") // 结果true
Boolean(100) // 结果true
Boolean(null) // 结果false
Boolean(0) // 结果false
Boolean(new Object()) //结果true四、运算符&表达式
（一）、赋值语句
赋值语句是JavaScript程序中最常用的语句。在程序中，往往需要大量的变量来存储程序中用到的数据，所以用来对变量进行赋值的赋值语句也会在程序中大量出现
当使用关键字 var 声明变量时，可以同时使用赋值语句对声明的变量进行赋值
- 语法：
变量名=表达式 - 代码
var num = 10；
var str = "Hello world!";
var bool = true;
var obj = new Object();（二）、表达式
表达式是一个语句集合，像一个组一样，计算结果是个单一值，然后这个结果被JavaScript归入下列数据类型之一：boolean、number、string、function或者object
var a = 10;
var i = a * 10（三）、运算符
算术运算符
算术运算符: 在程序中进行加、减、乘、除等运算
运算符 | 描述 | 例子(y=5) | 结果 |
+ | 加法 | x=y+2 | x=7 |
- | 减法 | x=y-2 | x=3 |
* | 乘法 | x=y*2 | x=10 |
/ | 除法 | x=y/2 | x=2.5 |
% | 取模（余数） | x=y%2 | x=1 |
++ | 自增 | x=++y | x=6 |
– | 自减 | x=–y | x=4 |
比较运算符
比较运算符：首先对操作数进行比较，该操作数可以是数字也可以是字符串，然后返回一个布尔值 true 或 false
运算符 | 描述 | 例子(x=5) | 结果 |
== | 等于 | x==8 | false |
=== | 全等于(值和类型) |
| false，true |
!= | 不等于 | x!=8 | true |
> | 大于 | x>8 | false |
< | 小于 | x<8 | true |
>= | 大于或等于 | x>=8 | false |
<= | 小于或等于 | x<=8 | true |
赋值运算符
赋值运算符:分为简单赋值运算和复合赋值运算
简单赋值运算就是将赋值运算符（=）右边表达式的值保存到左边的变量中
复合赋值运算混合了其他操作（算数运算操作、位操作等）和赋值操作
运算符 | 例子(x=10, y=5) | 等价于 | 结果 |
= | x=y | x=5 | |
+= | x+=y | x=x+y | x=15 |
-= | x-=y | x=x-y | x=5 |
*= | x*=y | x=x*y | x=50 |
/= | x/=y x=x/y | x=2 | |
%= | x%=y | x=x%y | x=0 |
+运算符
字符串运算符是用于两个字符型数据之间的运算符，除了比较运算符外，还可以是+和+=运算符。其中，+运算符用于连接两个字符串，而+=运算符则连接两个字符串，并将结果赋给第一个字符串
运算符 | 描述 | 例子 | 结果 |
+ | 连接两个字符串 | “my”+“book” | “mybook” |
+= | 连接两个字符串结果赋给第一个字符串 | var name=“my”;name+=“book” | name=“mybook” |
-运算符
逻辑运算符
运算符 | 描述 | 例子(x=10, y=5) | 结果 |
! | 取反 | !(x==y) | true |
&& | 与运算符 | x<10&&y>1 | false |
| 逻辑或 |
| true |
?= | 三元运算符 | x==5?true:false | false |
== | 等于运算符 | x==y | true |
!= | 不等于运算符 | x!=y | false |
条件运算符
条件运算符是JavaScript 支持的一种特殊的三元运算符
语法：操作数？结果1：结果2 如果”操作数“的值为true，则整个表达式是结果为”结果1“，否则为”结果2“
var a = 10;
var b = 20;
var c = a>b? a:b;
console.log(c) //20五、流程分支语句
（一）、条件判断语句
通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务
if语句
只有当指定条件为 true 时，使用该语句来执行代码
注意：请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！
- 语法
if(条件){
当条件为true 时执行的代码
}if…else语句
当条件为 true 时执行代码，当条件为 false 时执行其他代码
- 语法
if(条件){
当条件为 true 时执行的代码
} else {
当条件为 false 时执行的代码
}if…else if…else语句
来选择多个代码块之一来执行
- 语法
if(条件1){
当条件1为true 时执行的代码
} else if (条件2) {
当条件2为 true 时执行的代码
} else {
当条件1和条件2都不true时执行的代码
}switch语句
switch语句用于基于不同的条件来执行不同的动作
- 语法
switch(变量) {
case 值1：
当变量的值等于值1时，执行代码
break;
case 值2：
当变量的值等于值2时，执行代码
break;
default:
当变量的值不等于值1 和 不等于值2时，执行代码
}（二）、循环控制语句
for 循环
for 循环可以将代码块执行指定的次数
- 语法
//语句 1 在循环（代码块）开始前执行
//语句 2 定义运行循环（代码块）的条件
//语句 3 在循环（代码块）已被执行之后执行
for (语句 1; 语句 2; 语句 3) {
//被执行的代码块
}- 代码
for (var i=0; i<5; i++) {
console.log( i ); // 依次输出 0、1、2、3、4
}while 循环
while 循环只要指定条件为 true，循环就可以一直执行代码。
- 语法
while (条件) {
//当条件为true时，执行的代码块
}- 代码
var i=0;
while （i<5） {
console.log( i ); // 依次输出 0、1、2、3、4
i++;
}do while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环
- 语法
do {
//执行的代码块
}while (条件);- 代码
var i=0;
do {
console.log( i ); // 依次输出 0、1、2、3、4
i++;
}while (i<5);（三）、跳转语句
Break语句
break 语句用于跳出循环
- 代码
for (var i=0;i<5;i++) {
if (i==3) {
break;
}
console.log( i ); //依次输出 0 1 2
}Continue语句
Continue 语句用于跳过循环中的一个迭代
- 代码
for (var i=0;i<5;i++) {
if (i==3) {
continue;
}
console.log( i ); //依次输出 0 1 2 4
}六、定时器
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件（定时器）
（一）、setTimeout
**setTimeout(func, milliseconds) **方法指定的毫秒数后执行指定的代码
- 参数
-
func {function}: 必需。要调用一个代码串，也可以是一个函数 -
milliseconds {number}:可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0
- 返回值
- 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行
- 实例
var timer = setTimeout(function(){
console.log(1); //指定700毫秒后 输出1
}, 700)（二）、clearTimeout
clearTimeout(id) 方法用于停止执行setTimeout()方法的函数代码。
- 参数
-
id {number}: 调用 setTimeout() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作
- 实例
clearTimeout(timer)（三）、setInterval
**setInterval(func, milliseconds)**方法–间隔指定的毫秒数不停地执行指定的代码
- 参数
-
func {function}: 必需。要调用一个代码串，也可以是一个函数 -
milliseconds {number}:可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0
- 返回值
- 返回一个 ID（数字），可以将这个ID传递给 clearInterval() 来取消执行
- 实例
var timer = setInterval(function(){
console.log(1); //每隔700毫秒后 输出1
}, 700)（四）、clearInterval
clearInterval(id) 方法用于停止 setInterval() 方法执行的函数代码
- 参数
-
id {number}: 调用 setInterval() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval() 所设定的定时执行操作
- 实例
clearInterval(timer)（五）、demo-计数器
七、课后作业
- 去官网下载jquery框架，并引入框架到页面，分别使用3种方式监听文档加载完毕事件。
- 声明一个变量，并通过alert弹窗打印，声明一个函数，并且进行调用
- 使用运算符，测试算数运算符，比较运算符，逻辑运算符的区别
- 熟悉流程分支语句，分别用条件判断语句，循环控制语句，跳转语句做一个案例
- 熟悉使用定时器，完成计数器
