小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？

JavaScript前端语言

1.什么是JavaScript语言

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能

2.ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。

次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

3.JavaScript语言的发展历史

年份	名称	版本
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式，添加try/catch
2009	ECMAScript 5	添加"strict mode"严格模式，添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**）

一个完成的JavaScript实现是由以下3个不同部分组成的：

1. 核心（ECMAScript）
2. 文档对象模型（DOM） Document object model (整合js，css，html)
3. 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

4.JavaScript语言的特点：

• JavaScript 是脚本语言
• JavaScript 是一种轻量级的编程语言。
• JavaScript 是可插入 HTML 页面的编程代码。
• JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• JavaScript 很容易学习。

5.javascript 和 Html css 的关系

• Html 用来编写网页的结构
• css 美化网页添加样式
• javacript 实现网页和客户之间的沟通，让网页有活力

二、JavaScript语言基础

1.JavaScript语言引入方式

Script标签内写代码

Copy<script>
  // 在这里写你的JS代码
script>

引入额外的JS文件

Copy

2.JavaScript语言规范

注释

Copy// 这是单行注释

/*
这是
多行注释
*/

结束符

JavaScript中的语句要以分号（;）为结束符。

3.JavaScript基础语法

声明变量

1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2. 声明变量使用 var 变量名; 的格式来进行声明

Copyvar name = "Alex";
var age = 18;

注意：

• 变量名是区分大小写的。
• 推荐使用驼峰式命名规则。
• 保留字不能用做变量名。

补充：

ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

Copyfor (let i=0;i<arr.length;i++){...}

ES6新增const用来声明常量。一旦声明，其值就不能改变。

Copyconst PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

4.JavaScript数据类型

JavaScript拥有动态类型

Copyvar x;  // 此时x是undefined
//静态语言比如c：创建变量的时候，要指定变量的类型，python3.6也出现了类型注解的新特性def func(x:int,y:int) --> int: return x + y，意思是参数是int类型，返回值也是int类型的，就是个注释的作用
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串 

数值(Number)

JavaScript不区分整型和浮点型，就只有一种数字类型。

Copyvar a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN，表示不是一个数字（Not a Number）。

常用方法：

CopyparseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串(String)

Copyvar a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法	说明
.length #不加括号的是属性	返回长度
.trim() #得到一个新值	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n) # n类似索引，从0开始，超过最大值返回’'空字符串	返回第n个字符
.concat(value, …) #s1=‘hello’;s.concat(‘xx’);得到helloxx	拼接
.indexOf(substring, start) #这个start是从索引几开始找，没有返回-1	子序列位置
.substring(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start, end) #var s1=‘helloworld’;s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase() #全部变大写	大写
.split(delimiter, limit) #分隔,s1.splite(’ ‘),后面还可以加参数s1.split(’ '，2),返回切割后的元素个数	分割

拼接字符串一般使用“+”

Copystring.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

innerText和innerHTML

• innerText：对元素的innerText属性赋值，浏览器会把属性值当中的html标签处理成普通字符串，然后显示
• innerHTML：对元素的innerHTML属性赋值，浏览器会把属性值当做html代码解释执行
• innerText：读取元素的innerText属性，会去除其中的html标签，然后返回剩余内容
• innerHTML：读取元素的innerHTML属性，会把其中的html标签处理成普通字符串，然后返回

补充：

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

Copy// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

注意：

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

JSHint启用ES6语法支持:/* jshint esversion: 6 */

布尔值(Boolean)

区别于Python，true和false都是小写。

Copyvar a = true;
var b = false;

“”(空字符串)、0、null、undefined、NaN都是false。

null和undefined

• null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

对象(Object)

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

Copyvar obj = new object()
obj.name = 'alex'

数组

数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

Copyvar a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join(’+’)，seq是连接符	将数组元素连接成字符串
.concat(val, …) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach()	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

示例：

Copyfunction sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

关于遍历数组中的元素，可以使用下面的方式：

Copyvar a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

自定义对象

JavaScript的对象（Object）本质上是键值对的集合（Hash结构。
注意：自定义对象的键可以不带引号，而值如果是字符串，必须带引号。

Copyvar a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

Copyvar a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

forEach()

语法：

forEach(function(currentValue, index, arr), thisValue)

参数：

参数	描述
function(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 “this” 值。 如果这个参数为空， “undefined” 会传递给 “this” 值

splice()

语法：

splice(index,howmany,item1,…,itemX)

参数：

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 “0”。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX	可选。要添加到数组的新元素

map()

语法：

map(function(currentValue,index,arr), thisValue)

参数：

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。 如果省略了 thisValue ，“this” 的值为 “undefined”

补充：

ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

类型查询

Copytypeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符（就像++，–，！，- 等一元运算符），不是一个函数，也不是一个语句。

对变量或值调用 typeof 运算符将返回下列值之一：

• undefined - 如果变量是 Undefined 类型的
• boolean - 如果变量是 Boolean 类型的
• number - 如果变量是 Number 类型的
• string - 如果变量是 String 类型的
• object - 如果变量是一种引用类型或 Null 类型的

需要注意的是typeof null返回为object,因为特殊值null被认为是一个空的对象引用。

5.运算符

算数运算

Copy// + - * / % ++ --  
i++,是i自加1，i--是i自减1   
i++的这个加1操作优先级低，先执行逻辑，然后再自加1，
而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑

比较运算符**

Copy> >= < <= != == === !==

注意：

Copy1 == “1”  // true  #弱等于，将1转换为字符串'1',在=号两个数据类型不同的时候，会自动给你变成相同的，具体怎么一个变换规则，先不用理他，因为这种比较不好，因为以后咱们就尽量用===。
1 === "1"  // false #强等于，比较类型也比较值

提一个输入法的高级用法：搜狗输入法的一个高级用法：不认识的字：先输入一个字母uhuohuohuo,就看到了焱，不会写大写的12345怎么办？先输入一个v12345，你就看到壹万贰仟叁佰肆拾伍了。

逻辑运算符

Copy&& || !  #and，or，非（取反）!null返回true

赋值运算符

Copy= += -= *= /=  #n += 1其实就是n = n + 1

6.流程控制

If-else

Copyvar a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if-else if-else 多条件

Copyvar a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch 切换

Copyvar day = new Date().getDay(); //示例化一个今天的日期对象，getDay()是获取天数的编号，0表示星期日
switch (day) {  //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
  case 0: //如果day是0
  console.log("Sunday"); //执行它
  break; //然后break跳出
  case 1:
  console.log("Monday");
  break;
default:  //如果没有任何满足条件的，就执行它
  console.log("...")
}

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

for 循环

Copyfor (var i=0;i<10;i++) {  //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了，回头可以拿别人的电脑试试~~
  console.log(i);
}
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
   console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i],d.i)  #注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}

while

Copyvar i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算符

Copyvar a = 1;
var b = 2;
var c = a > b ? a : b //如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c   //python中的：a = x if x>y else y

在我们的pycharm中可以更改js的版本

7.函数

函数定义

JavaScript中的函数和Python中的非常类似，只是定义方式有点区别。

Copy// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;  //在js中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值，如果就想返回多个值，你可以用数组包裹起来 return [a,b]；
}
sum(1, 2);  // 调用函数  sum(1,2,3,4,5)参数给多了，也不会报错，还是执行前两个参数的和，sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN

// 匿名函数方式，多和其他函数配合使用，后面我们就会用到了
var sum = function(a, b){  //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
  return a + b;  
}
sum(1, 2);

// 立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function(a, b){
  return a + b;
})(1, 2);  //python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)

补充：

ES6中允许使用“箭头”（=>）定义函数，可以理解为匿名函数，用的不多。

Copyvar f = v => v;
// 等同于
var f = function(v){
  return v;
}

如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

Copyvar f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;
}

函数中的arguments参数（了解）

Copyfunction add(a,b){
  console.log(a+b);
  console.log(arguments.length) //获取传入的参数的个数，arguments就是指的你传入的所有的实参，放在一个数组里面，这个arguments.length是统计这个数组的元素的个数。
}

add(1,2)

输出：

Copy3
2

注意：函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

函数的全局变量和局部变量

局部变量：

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

全局变量：

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

变量生存周期：

• JavaScript变量的生命期从它们被声明的时间开始。
• 局部变量会在函数运行以后被删除。
• 全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

几个例子：

Copyvar city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？ ---> ShenZhen

Copyvar city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？---> BeiJing

3.闭包

Copyvar city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();   ---> ShangHai

8.JS词法分析（尝试理解）

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1. 函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作,但是一般有参数的时候，我们在执行函数的时候就把参数赋值给了这个参数，所以不会打印出undefined的效果。
2. 函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3. 函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

看两个例子：

Copyvar age = 18;
function foo(){
  console.log(age);  //分析到这一步的时候，发现你下面有age变量声明，那么age变量就在AO对象上村上了，并且值为undefined，所以函数在执行的时候，还没有到age=22这步的时候，age=undefined
  var age = 22;      //如果没有这个变量声明，那么打印的结果应该是18
  console.log(age);
}
foo();  // 问：执行foo()之后的结果是？

undefined
22

第二题：

Copyvar age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){   #发现age这个函数名也是变量，将OA上的变量给替换了，那么函数在执行的时候，去OA上找，发现OA是个函数，然后执行到age=22的时候，age才被重新赋值
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 执行后的结果是？

结果：
　　function age(){
　　　　console.log("呵呵");
　　}
　　22
　　22

答案解析：

Copy词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};

最终，AO上的属性只有一个age，并且值为一个函数声明

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找

1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 22
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

这些内容就是好多人搞不明白的，经常写js代码的时候，发现自己的结果不对啊，什么情况，就是因为这个没搞清楚~~~

创建对象：

Copyvar person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性

9.面向对象

在ES5中没有类的概念，只有个构造函数，命名的首字母要大写，实例化的时候使用new关键字进行实例化

Copyfunction Person(name){
    this.name=name
}

console.log(p1.name)  
Person.prototype.func1 = function(){  //添加一些方法，使用prototype，叫做原型链 方法
    console.log(this.name,'爱编程！')
}
var p1 = new Person('chao');
p1.func1() #方法和属性只能通过对象来调用，不能使用类名来调用
#chao
#chao 爱编程！
类似于python中的面向对象,了解一下就可以了

注意：

ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。

也就是说，Object结构提供了“字符串–值”的对应，Map结构提供了“值–值”的对应，是一种更完善的Hash结构实现。*

map的使用:（map也是了解内容，有兴趣的可以研究一下）

javascript:void(0)

Copyvar m = new Map();
var o = {p: "Hello World"}

m.set(o, "content")
m.get(o)  // "content"

m.has(o)  // true
m.delete(o)  // true
m.has(o) // false

扩展：JavaScript面向对象之继承：（目前作为了解，大家有兴趣的可以自行研究一下）

Copy// 父类构造函数
var Car = function (loc) {
  this.loc = loc;
};

// 父类方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子类构造函数
var Van = function (loc) {
  Car.call(this, loc);
};

// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = Van;
// 扩展方法
Van.prototype.grab = function () {
  /* ... */
};

Date对象

创建Date对象

Copy//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  #月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());
//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：

Copyvar d = new Date(); 
getDate()               //获取日
getDay ()               //获取星期 ，数字表示（0-6），周日数字是0
getMonth ()             //获取月（0-11,0表示1月,依次类推）
getFullYear ()          //获取完整年份
getHours ()             //获取小时
getMinutes ()           //获取分钟
getSeconds ()           //获取秒
getMilliseconds ()      //获取毫秒
getTime ()              //返回累计毫秒数(从1970/1/1午夜),时间戳

JSON对象

Copyvar str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

RegExp相关：用的比较多

CopyRegExp对象

创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式（逗号后面不要加空格），假如匹配用户名是只能字母开头后面是字母加数字加下划线的5到11位的
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); //注意，写规则的时候，里面千万不能有空格，不然匹配不出来你想要的内容，除非你想要的内容本身就想要空格，比如最后这个{5,11},里面不能有空格

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

创建方式2，简写的方式
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/; 

reg2.test(s1);  // true

注意，此处有坑：如果你直接写一个reg2.test()，test里面啥也不传，直接执行，会返回一个true，用其他的正则规则，可能会返回false，是因为，test里面什么也不传，默认传的是一个undefined，并且给你变成字符串undefined，所以能够匹配undefined的规则，就能返回true，不然返回false
// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割，得到一个新值，原数据不变
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式：g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写

注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号，把匹配规则写的确定一些，尽量不用上面这种的写法/xxx/。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(undefined)，然后将这个undefined又转为字符串"undefined",去进行匹配了, 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

Math对象（类似于python的内置函数）

Math：不需要new来创建对象，直接使用Math.下面的方法

CopyMath.abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    小数部分进行直接舍去。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

前端之BOM&DOM

1.前引

我们之前已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

2.window对象

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

• 所有浏览器都支持 window 对象。它表示浏览器窗口。
• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

Copywindow.document.getElementById("header");

window对象常用方法：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

3.window子对象

navigator对象（了解）

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

Copynavigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象（了解）

屏幕对象，一些属性：

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

history对象（了解）

window.history 对象包含浏览器的历史。无法查看具体地址，只能是简单的前进和后退。

Copyhistory.forward()  // 前进一页
history.back()  // 后退一页

location对象*

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

Copylocation.href  //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面

其他方法：

Copylocation.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

Copyalert("你看到了吗？");

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

Copyconfirm("你确定吗？")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

Copyprompt("请在下方输入","你的答案")

计时相关*

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout

Copyvar t=setTimeout("JS语句",毫秒)

setTimeout()会返回某个值。如果你希望能够以后取消计时，就需要将这个值存在一个变量中。

参数：第一个参数可以是javascript语句的字符串，或者是javascript语句函数。

第二个参数指从当前起多少毫秒后执行第一个参数。

clearTimeout

CopyclearTimeout(setTimeout_variable)

使用例子

Copy// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval

CopysetInterval("JS语句",时间间隔)

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

返回的 ID 值可用作 clearInterval() 方法的参数。用来取消setInterval()

clearInterval

clearInterval() 方法可取消由 setInterval() 设置的 timeout。参数必须是由 setInterval() 返回的 ID 值。

CopyclearInterval(setinterval返回的ID值)

用法：

Copy// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

定时器实例：

Copy<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定时器</title>
  <script>
    var intervalId;

    function f() {
      var timeStr = (new Date()).toLocaleString();
      var inputEle = document.getElementById("i1");
      inputEle.value = timeStr;
    }

    function start() {
      f();
      if (intervalId === undefined) {
        intervalId = setInterval(f, 1000);
      }
    }
    function end() {
      clearInterval(intervalId);
      intervalId = undefined;
    }

  </script>
</head>
<body>

<input type="text" id="i1">
<input type="button" value="开始" id="start" onclick="start();">
<input type="button" value="结束" id="end" onclick="end();">
</body>
</html>

二、DOM模型

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

DOM 定义了访问 HTML 和 XML 文档的标准：

文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

1. HTML DOM树

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

2.查找标签

直接查找

Copydocument.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取，返回数组
document.getElementsByTagName     根据标签名获取标签合集

通过类名和标签名查找返回的都是一个数组，需要通过索引来取其中某一个标签。

注意：涉及到DOM操作的JS代码应该放在文档的哪个位置。

间接查找

• 标签对象.parentElement 父节点标签元素
• 标签对象.children 所有子标签
• 标签对象.firstElementChild 第一个子标签元素
• 标签对象.lastElementChild 最后一个子标签元素
• 标签对象.nextElementSibling 下一个兄弟标签元素
• 标签对象.previousElementSibling 上一个兄弟标签元素

使用实例：

Copy// 找到d标签
var d = document.getElementsByTagName('div')[0]
// 通过d标签找到下一个标签
d.nextElementSibling

3.节点操作

创建元素

语法：createElement(标签名)

Copyvar divEle = document.createElement("div");

添加元素

语法：

追加一个子节点（作为最后的子节点）

somenode.appendChild(newnode)；

把增加的节点放到某个节点的前边。

somenode.insertBefore(newnode,某个节点);

使用实例：

Copyvar imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

删除元素

获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

Copydiv.removeChild(a) // 删除div中的a标签

替换元素

somenode.replaceChild(newnode, 某个节点);

Copydiv.replaceChild(a,span) // 将div中的a标签替换为span标签

修改元素内容

1.获取本元素内容

Copyvar divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

注意：innerText不能识别标签，innerHTML能识别文本中的标签

2.设置本元素的内容

Copyvar divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="
2
"

修改元素attribute

Copyvar divEle = document.getElementById("d1");
divEle.setAttribute("age","18") // 设置属性
divEle.getAttribute("age") // 查看属性
divEle.removeAttribute("age") // 删除属性

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

获取元素的属性值

语法：elementNode.value

适用元素类型：input、select、textarea

Copyvar iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

修改元素的类

className：获取元素所有样式类名(字符串)

classList：元素的类名数组

类名数组常用操作

CopyclassList.remove(cls)  // 删除指定类
classList.add(cls)  // 添加类
classList.contains(cls)  // 存在返回true，否则返回false
classList.toggle(cls)  // 存在就删除，否则添加

修改节点的CSS样式

通过JS语句对元素对象css样式进行操作

Copyobj.style.backgroundColor="red"

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名，如：

Copyobj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写。如：

Copyobj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

4.事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

常见事件类型

Copyonclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

设置事件方式

方式一：不常用了，耦合高

Copy<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

注意：this是实参，表示触发事件的当前元素。函数定义过程中的ths为形参。

方式二：常用

Copy<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
　　 //console.log(this)
    this.innerText="呵呵"; #哪个标签触发的这个事件，this就指向谁
  }
</script>

注意：

查找元素的JS语句如果直接写在head标签中，那么将无法查找到元素。

Copy<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
        var d1Ele = document.getElementById('d1'); // 在这里查找d1标签无法找到，因为浏览器是从上至下加载代码
        alert(d1Ele.innerText)
    </script>

</head>
<body>

<input type="text" id="d1">

</body>

解决方法：

1.将JS语句写在要查找的标签后面。

2.使用window.onload解决，window.onload的意思是页面全部加载完成之后才执行对应的函数。

window.onload

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

注意：.onload()函数存在覆盖现象。

使用实例：

Copy<head>
    <script>
        window.onload = function(){
            var d1Ele = document.getElementById('d1');
            alert(d1Ele.innerText);
        } // 这个函数会等待页面所有代码加载完后再执行。
    </script>
</head>

<body>
	<input type="text" id="d1">
</body>

javascript:void(0))

JQuery简介

1.JQuery是什么？

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。

2.jQuery优点

1. 轻量级JS框架，核心js文件共几十kb，不影响加载速度。
2. 丰富的DOM选择器，jQuery的选择器用起来很方便。
3. 支持链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 支持事件，样式，动画，可读性高于js代码
5. 支持Ajax操作，并对Ajax操作进行了简化。
6. 跨浏览器兼容，基本兼容目前主流浏览器。
7. 插件扩展丰富，jQuery有丰富的第三方插件。如树形菜单

3.jQuery库内容

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

4.jQuery安装使用

jQuery版本

• 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。
• 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。
• 3.x：不兼容IE678，只支持最新的浏览器。

下载链接jQuery官网，下载本地文件，在HTML中引入，就可以使用jQuery提供给我们的接口。

jQuery中文文档：jQuery AP中文文档

jQuery的两种导入方式

直接下载到本地使用（最常用），从本地中导入

Copy<script src="jquery-3.4.1.js"></script>
// src中写入jquery文件的本地路径

使用文件的网络地址，指定src网络路径

Copy<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
// src中写入jquery的网络地址

二、jQuery语法基础

1.jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的，如果对象是jQuery对象，就可以使用jQuery中的方法。

jQuery对象和DOM对象的转换

jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

1.通过DOM对象获取jQuery对象

• jQuery对象 = $(DOM对象)

2.jQuery对象转换为DOM对象

• DOM对象 = jQuery[0]

Copyvar domObj = document.getElementById('d1')
// 获取jQuery对象
jqueryObj = $(domObj)

// 获取DOM对象
domObj = jqueryObj[0]

2.jQuery语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

Copy$(this).hide() // 隐藏当前元素
$("p").hide() // 隐藏所有段落
$(".test").hide() // 隐藏所有 class="test" 的所有元素

三、jQuery选择器

1.jQuery选择器

基本选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

标签选择器

Copy$("tagName") //选取标签名为某某的所有元素。

id选择器

Copy$("#demo") //选取所有 id="demo" 的标签。

class选择器

Copy$(".className") //获取所有类名有className的标签

配合使用

Copy$("div.c1")  // 找到有c1 class类的div标签

组合选择器

Copy$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

Copy$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y"); // 找到所有紧挨在x后面的y
$("x ~ y"); // x之后所有的兄弟y

属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

Copy$("[Attribute]") //选取所有带有 Attribute 属性的元素。
$("[Attribute = value]") //选取所有带有 Attribute 值等于 value 的元素。
$("[Attribute != value]") //选取所有带有 Attribute 值不等于 Attribute 的元素。
$("[Attribute$ = '.jpg']") //选取所有 Attribute 值以 ".jpg" 结尾的元素。

属性选择器多用于input标签

Copy<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签

2.jQuery筛选器

用来对选择器选中的标签进行筛选的条件；

语法结构：$(selector:condition);

基本筛选器

筛选条件：

Copy:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

使用实例：

Copy$("div:has(h1)") // 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
$("div:has(.c1)") // 找到所有后代中有c1样式类（类属性class='c1'）的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

表单筛选器

针对form表单进行筛选的条件。

对表单对象type筛选：

Copy:text 
:password
// 还有file、radio、checkbox、submit、button、reset等等

实例：

Copy$(":checkbox")  // 找到所有的checkbox

对表单对象属性筛选：

Copy:enabled //可以正常使用的标签
:disabled //标签有不可用的属性
:checked //单选和多选框中有默认选择项的标签
:selected //下拉选框中有默认选择项的标签

实例：

Copy$("input:enabled")  // 找到可用的input标签

3.jQuery筛选器方法

经过选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法。

注意是写在对象后面的方法，需要加括号，不再是写在选择器里面的了。

基本筛选方法

等效于基本筛选器效果，只不过筛选器写在选择器里面，而筛选方法在表达式后面调用。

Copy.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

向前向后筛选元素

向前和向后筛选都是针对同一级别的元素而言

向后筛选

Copy$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它

向前筛选

Copy$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

查找父级元素

Copy$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

查找儿子元素

Copy$("#id").children();// 儿子们

查找兄弟元素

Copy$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

find和filter方法

find方法：

查找所有后代中所有符合指定表达式的元素。找到的是find中的元素

Copy$("div").find("p") //找到所有div后代中的p标签
等价于 $("div p")

filter方法：

筛选，查找所有满足filter中条件的元素。找到的是$(选择器)中满足条件的元素。用逗号分隔多个表达式。

Copy$("div").filter(".c1")  // 从所有的div标签中过滤出有class='c1'属性的div
等价于 $("div.c1")

注意：find和filter的区别，一个是找后代，一个是筛选已找到的元素。

四、jQuery操作DOM

1.jQuery操作标签样式

类名操作

通过添加或删除样式来修改元素的CSS样式

CopyaddClass(类名); // 添加指定的CSS类名。
removeClass(类名); // 移除指定的CSS类名。
hasClass(类名); // 判断样式存不存在
toggleClass(类名); // 切换CSS类名，如果有就移除，如果没有就添加。

样式操作

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

Copy语法：$(选择器).css(Attribute,value);

使用实例！

Copy$("p").css("background-color","red"); //把所有 p 元素的背景颜色更改为红色：

jQuery操作标签位置

offset() 方法

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

• 返回第一个匹配元素的偏移坐标。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

Copy//语法
$(selector).offset()

• 设置偏移坐标

设置所有个匹配元素的偏移位置

Copy//语法
$(selector).offset(value)
value 为自定义对象 值对{top:offset,left:offset}
//实例
$('.c1').offset({top:50,left:50}); //修改.c1标签的位置

• 使用函数来设置所有匹配元素的偏移坐标

Copy//语法
$(selector).offset(function(index,oldoffset))

参数为函数：

Copyfunction(index,oldoffset)
// index - 可选。接受选择器的 index 位置
// oldvalue - 可选。接受选择器的当前坐标。

position()方法

position() 方法返回匹配元素相对于父元素的位置（偏移）。

该方法返回的对象包含两个整型属性：top 和 left，以像素计。

此方法只对可见元素有效。

语法

Copy$(selector).position()

实例

Copy$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

scrollTop和scrollLeft方法

获取滚轮滚动位置

Copy$(window).scrollTop();  //获取滚轮向下移动的距离
$(window).scrollLeft();  //获取滚轮向左移动的距离

设置元素滚动位置

Copy$(selector).scrollTop(position) //设置元素向下偏移
$(selector).scrollLeft(position) //设置元素向左偏移

offset()和position()的区别

offset()是相对检索元素相对于文档中的偏移位置；

position()事项对于距离最近的具有位置属性（position:relative或absolute）的父级元素距离，如果找不到则返回相对于浏览器窗口的距离。

jQuery标签尺寸

通过jQuery的一些方法获取标签盒子模型的属性，以及修改盒子模型。

Copywidth() //方法设置或返回元素内容的宽度（不包括内边距、边框或外边距）。
height() //方法设置或返回元素内容的高度（不包括内边距、边框或外边距）。
innerWidth() //方法返回元素的宽度（包括内边距，两个padding）。
innerHeight() //方法返回元素的高度（包括内边距，两个padding）。
outerWidth() //方法返回元素的宽度（包括内边距和边框，padding和border）
outerHeight() //方法返回元素的高度（包括内边距和边框）。

2.jQuery操作文本内容和属性

通过jquery方法获取标签的文本内容和属性值。

jQuery文本操作

1.获取标签HTML文本内容，识别标签

Copyjquery对象.html();  // 取得匹配元素的html内容，包含标签
jquery对象.html(val);  // 设置所有匹配元素的html内容，识别标签，并修改html内容为val

使用实例

Copy$("#d1").html("路飞学成");

2.获取标签text文本内容，不识别标签

Copyjquery对象.text();  // 取得所有匹配元素的内容，只有文本内容，没有标签
jquery对象.text(val);  // 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

使用实例

Copy$("#d1").text("路飞学成");

jQuery标签的值操作

jQuery val()方法用于获取标签的值，一般用于input标签和select标签中获取值。

• 注意这里说的值，是自带value属性的标签中value属性对应的值

Copyjquery对象.val();  // 取得第一个匹配元素的当前值
jquery对象.val(val);  // 设置所有匹配元素的值
jquery对象.val([val1, val2]);  // 设置多选的checkbox、多选select的值

使用for循环获取所有匹配对象的值

Copyfor (var i=0;i<array.length;i++){console.log(array.eq(i).val())

使用实例

Copy
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球


<input type="radio" value="1" name="sex">男
<input type="radio" value="2" name="sex">女


<select multiple id="s1">
    <option value="1">北京option>
    <option value="2">上海option>
    <option value="3">深圳option>
select>

查看选中的值

Copy// 获取多选框选中值
$("input[name='sex']:checked").val()
// 获取单选框选中值
$("input[name='hobby']:checked").val()
// 获取下拉框选中值
$("#s1:selected").val()

修改选中项和选中项的值

Copy// 设置单选框哪个被选中 
$("input[name=sex]").val(['1']); //注意使用数组，值需要与标签中的值对应才生效 
// 修改单选框被选中标签的值
$("input[name=hobby]:checked").val('3');

// 设置多选框选中哪些项
$("input[name=hobby]").val(['football']);
$("input[name='hobby']").val(['basketball', 'football']);
// 设置下拉框的值
$("#s1").val(["1", "2","3"])

自动验证登录实例

Copy
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文本操作之登录验证title>
  <style>
    .error {
      color: red;
    }
  style>
head>
<body>

<form action="">
  <div>
    <label for="input-name">用户名label>
    <input type="text" id="input-name" name="name">
    <span class="error">span>
  div>
  <div>
    <label for="input-password">密码label>
    <input type="password" id="input-password" name="password">
    <span class="error">span>
  div>
  <div>
    <input type="button" id="btn" value="提交">
  div>
form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用户名不能为空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密码不能为空");
    }
  })
script>
body>
html>

jQuery属性操作

jQuery attr() 方法

jQuery attr() 方法用于获取元素中属性值,也用于设置/改变属性值。

一般用于标签自带属性或自定义属性操作

Copy获取元素的属性值
jquery对象.attr(attrName);  // 返回第一个匹配元素的属性值，返回对应值/undefined
Copy修改/设置元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({attribute1: value1, attribute2:value2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

prop()方法

一般用于input标签checkbox和radio以及select标签中自带属性的操作。

Copy1.获取元素属性值
prop(attrName);  // 获取某个属性值，返回true/false

2.设置input标签是否被选中
prop('checked',true) 

注意：在1.x和2.x版本中的jquery使用attr对checkbox进行赋值会出bug，3.x版本中没有此问题，所以为了兼容性，在处理checkbox和radio属性时，尽量使用prop，不要用attr。

prop和attr的却别

attr全称attribute(属性) ；prop全称property(属性)；

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子

Copy<input type="checkbox" id="i1" value="1">  针对第一种写法的区别

// 获取属性
$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

Copy<input type="checkbox" checked id="i1" value="1"> 针对第二种写法的区别

// 获取属性
$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

通过实例可以看到attr的局限性，它的作用范围只限于HTML标签内有没有写这个属性，如果写了获取对应的值，如果没有写，则会获得undifined。

而prop获取的是这个DOM对象的属性，也可以理解为这个dom对象的状态，设置了返回true，没有设置返回false。

小结

1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中

3.jQuery添加和删除元素

添加元素

• 添加到指定元素内部的结尾

Copy$(A).append(B)// 把B追加到A，A和B都是选择器
$(A).appendTo(B)// 把A追加到B

• 添加到指定元素内部的开始

Copy$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

• 添加到指定元素同级的前面

Copy$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

• 添加到指定元素同级的后面

Copy$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

• jQuery empty() 方法删除被选元素的子元素。

Copyobject.empty()// 清空匹配的元素中所有的内容，包括文本和标签，保留自身

• jQuery remove() 方法删除被选元素及其子元素。

Copyobject.remove()// 从DOM中删除所有匹配的元素。

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

Copy//例子删除 class="italic" 的所有 
 元素
$("p").remove(".italic");

替换和克隆

替换方法

Copyselector1.replaceWith(selector2) //用2替换1
selector1.replaceAll(selector2)  //用1替换2，和上述方法想法。

克隆方法

Copyobject.clone()  // 复制一个object对象
参数设置为true，带事件克隆
object.clone(true)

克隆使用实例

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
// 设置按钮        
<button class="btn">屠龙宝刀,点击就送</button>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
	// 为button设置事件，复制自身，带事件
    $('.btn').click(function () {
        var btnClone = $(this).clone(true); //
        $(this).after(btnClone);
    })

</script>
</body>
</html>

五、jQuery事件event

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

定义触发事件写法

Copy$("p").click(function(){
    // 动作触发后执行的代码!!
});

1.jQuery常用事件函数

Event 函数	绑定函数至事件
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）= DOM中的onload
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).blur(function)	失去焦点是触发的事件
$(selector).hover(function)	捕捉鼠标进入标签和离开标签，看后面对hover的详解
$(selector).change(function)	内容发生变化，input，select等
$(selector).keyup(function)	捕捉键盘按键抬起事件
$(selector).keydown(function)	捕捉键盘按下,按住不放一直触发
$(selector).mouseenter(function)	捕捉鼠标进入标签事件，不识别子标签
$(selector).mouseover(function)	捕捉鼠标进入标签事件，识别子标签
$(selector).mouseout(function)	事件捕捉鼠标离开标签事件
$(selector).on(‘input’,function)	输入框内容实时监测变化触发事件

mouseover 和 mouseenter的区别是：

• mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发；
• mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象；

hover事件：

原生DOM中没有hover事件，jQuery中的hover事件是封装了mouseenter和mouseout两个事件，设置事件时，需要设置两个对应动作，如果只设置了一个，则只会触发mouseenter事件。

Copyhover
	对象.hover(
		function(){}, // 设置鼠标进入动作
		function(){}  // 设置鼠标离开动作
	)

keyup()和keydown()事件

keydown和keyup事件（键盘按键按下和抬起的事件，还有一些其他的key事件）

获取键盘按下的键值：

Copy$(window).keyup(function(ev){
	ev.keyCode;  ev为事件对象,keyCode是获取用户按下了哪个键,数字表示
})

注意keyup和keydown绑定事件是通过window对象来绑定。

2.jQuery绑定和移除事件

事件绑定两种方式

方法一

Copytag_object.event(function(){执行代码})

方法二

Copytag_object.on('events' [,selector],function(){执行代码})

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

注意：input事件只能用第二种方式绑定

jQuery移除事件(不常用)

off()方法可以移除用 on绑定的事件处理程序

Copytag_object.off('events' [, selector ][,function(){}])

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

Copy$("li").off("click") // 移除li标签的点击事件

3.jQuery冒泡事件和事件委托

冒泡事件现象

事件冒泡

在js中，为父级，点击子元素也会触发所有设置了事件的父级元素的事件，这种现象称为事件冒泡。

现象实例

Copy<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>
    <button id="b1">点我</button>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    // $("#b1").click(function (e) {
    //     alert('子标签');
    // });

    $("div").on('click','#b1',function (e) {
        alert('父标签');
    });

阻止事件冒泡

常见阻止表单提交等，如果input标签里面的值为空就阻止它提交，就可以使用这两种方法：

1. return false;
2. e.stopPropagation();

事件委托

事件委托是通过事件冒泡的原理，将点击子标签触发的事件，委托给父级标签，从而达到为后续的子标签自动绑定事件的假象。

注意理解：

1. 事件委托的事件本质是绑定在父级标签中
2. 点击子标签触发了事件，并不是触发的子标签自身的事件，而是父级标签的事件

Copy$("parent").on("events", "son_selector", function () { 
	//事件执行代码
})
// son_selector是个选择器，paretn是父级标签选择器，选择的是父级标签，
// 意思就是将子标签（子子孙孙）的事件委托给了父级标签
// 注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂

使用实例！

Copy$("table").on("click", ".delete", function () { 
	//事件执行代码
})

4.jQuery页面载入事件

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

为什么使用页面载入

之前学习js时遇到过一个问题，如果我们将js操作标签的代码放在head标签中，标签的定义写在后面的body标签中。

Copy<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //head中绑定事件
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
        $('.c1').css('background-color','red')
    </script>
</head>
<body>
//body中定义标签
<div class="c1"></div>
</body>
</html>

这样运行出现一个问题，我们加载页面是从上到下的，当我们加载到js代码时，我们找的c1类标签还不存在，导致js代码的样式改变没有起作用。

DOM中的页面加载事件

Copywindow.onload(function(){
	//页面加载完执行的事件
})

DOM页面加载事件的弊端，window.onload函数存在覆盖现象，也就是说一个html中只能存在一个页面加载事件。后面的onload函数会覆盖前面的。

jQuery中页面加载事件

第一种写法

Copy$(document).ready(function(){
// 这里写你的JS代码...
})

写法二：

Copy$(function(){
// 这里写你的代码
})

注意和DOM中的区别：

• DOM中是操作window对象中的onload方法，而jQuery中是操作document的jQuery对象的ready方法
• window.onload有覆盖现象，必须等待图片加载完才调用
• jQuery的ready函数没有覆盖现象，文档加载完就可以调用（推荐使用）

六、jQuery效果和补充

1.jQuery动画效果

jQuery hide() 和 show()

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

Copy// 语法：
$(selector).hide(speed,callback); 
$(selector).show(speed,callback);

使用实例！

Copy$("#hide").click(function(){
  $("p").hide();
});

jQuery toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。

Copy语法：
$(selector).toggle(speed,callback);

• 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

jQuery Fading 方法

• jQuery fadeIn() 淡入已隐藏的元素。
• jQuery fadeOut() 方法用于淡出可见元素。
• jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
• jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

Copy$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

参数：

• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是 fading 完成后所执行的函数名称。

jQuery 滑动方法

• jQuery slideDown() 方法用于向下滑动元素。
• jQuery slideUp() 方法用于向上滑动元素。
• jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

Copy$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

实例：

Copy$("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

Copy$(selector).animate({params},speed,callback);

参数：

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

实例：

Copy$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

提示：

可以用 animate() 方法来操作所有 CSS 属性，但是当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，等等。

2.补充方法

jQuery.each()方法

一个通用的迭代函数，用来无缝迭代对象和数组。

数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

CopyjQuery.each(collection, callback(indexInArray, valueOfElement))

使用实例！

Copyli =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

selector.each()方法

遍历一个jQuery对象，为每个匹配元素执行一个函数。

Copyselector.each(function(k,v){})  // 其中k是索引，v是DOM对象

.each()方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。

由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素。

Copy// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意：

jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。也就是不需要显示的循环.each方法：

Copy$("li").addClass("c1");  // 对所有标签做统一操作

终止each循环

在each方法中，遍历执行的是function函数，所以终止循环需要通过return实现。

Copyreturn false; //终止循环
return; //终止当次循环

data方法

使用：在匹配的元素集合中的所有元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量

data设置值

语法：

Copyjquery对象.data(key, value)

在匹配的元素上存储任意相关数据。

Copy$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

data获取值

Copyjquery对象.data(key); //取值，没有的话返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

Copy$("div").data("k");//返回第一个div标签中保存的"k"的值

removeData(key)方法

移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

Copy$("div").removeData("k");  //移除元素上存放k对应的数据

3.jQuery插件（了解）

给jQuery扩展方法

CopyjQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

实例！

Copy<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
});
jQuery.min(2,3);// => 2
</script>

给jQuery对象扩展方法

CopyjQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

Copy<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

Bootstrap

1.bootstrap是什么？

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。

bootstrap中文网：http://www.bootcss.com/

2.为什么要使用bootstrap

在bootstrap出现之前，前端页面的开发问题。

• 标签命名：重复、复杂、无意义
• 标签样式：重复冗余、不规范、不和谐
• 页面：错乱、不规范、不和谐

使用bootstrap的有点：各种命名都统一并且规范化。 页面风格统一，画面和谐。

3.bootstrap下载

官方地址：https://getbootstrap.com
中文地址：http://www.bootcss.com/
我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。

4.bootstrap环境搭建

bootstrap目录结构

Copybootstrap-3.3.7-dist/

├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js

注意：

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

二、bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

1.基本模板

使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

Copy
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Templatetitle>

    
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  head>
  <body>
    <h1>你好，世界！h1>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>

    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">script>
  body>
html>

2.布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。bootstrap提供了两个作此用处的类。
注意，由于padding等属性的原因，这两种 容器类不能互相嵌套。

container类

用于固定宽度并支持响应式布局的容器。

Copy<div class="container">
  ...
div>

container-fluid类

用于100%宽度，占据全部视口viewport的容器。

Copy<div class="container-fluid">
  ...
div>

3.栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 当一行（row）中包含的列（column）大于12，多余的列将作为一个整体换行。

媒体查询

在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。

Copy/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

媒体查询可以捕捉显示屏幕大小，来显示不同页面的定制效果。

Copy//根据屏幕小于700px时，将背景颜色变呈绿色
	<style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 200px;
        }
        /*媒体查询，捕捉显示屏幕的宽度，来显示不同的定制效果*/
        @media screen and (max-width: 700px) {
            .c1 {
                background-color: green;
            }
        }
    style>

栅格参数

超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

Copy<div class="row">
  <div class="col-md-4">.col-md-4div>
  <div class="col-md-4 col-md-offset-4">列偏移4列div>
div>

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

被嵌套的行（row）所包含的列（column）的个数不能超过12。

Copy<div class="row">
  <div class="col-sm-9">
    一级表格
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        二级表格，占8列
      div>
      <div class="col-xs-4 col-sm-6">
        二级表格，占4列
      div>
    div>
  div>
div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

Copy<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9div>
div>

4.页面排版

标题

HTML 中的所有标题标签，到 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 `` 标签或赋予 .small 类的元素，可以用来标记副标题。

Copy<h1>h1. Bootstrap heading <small>Secondary textsmall>h1>
<h2>h2. Bootstrap heading <small>Secondary textsmall>h2>
<h3>h3. Bootstrap heading <small>Secondary textsmall>h3>
<h4>h4. Bootstrap heading <small>Secondary textsmall>h4>
<h5>h5. Bootstrap heading <small>Secondary textsmall>h5>
<h6>h6. Bootstrap heading <small>Secondary textsmall>h6>

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 `` 元素和所有段落元素。

Copy<p>...p>

中心内容

通过添加 .lead 类可以让段落突出显示。

Copy<p class="lead">...p>

5.内容文本元素

marked text 标记本文

CopyYou can use the mark tag to <mark>highlightmark> text.

被删除的文本

对于被删除的文本使用 ~~~~ 标签。

Copy<del>This line of text is meant to be treated as deleted text.del>

着重

通过增加 font-weight 值强调一段文本。

Copy<strong>rendered as bold textstrong>

6.对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

Copy<p class="text-left">Left aligned text.p>
<p class="text-center">Center aligned text.p>
<p class="text-right">Right aligned text.p>
<p class="text-justify">Justified text.p>
<p class="text-nowrap">No wrap text.p>

7.略缩语

当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 `` 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。

基本略缩语

Copy<abbr title="attribute">attrabbr>

首字母略缩语

Copy<abbr title="HyperText Markup Language" class="initialism">HTMLabbr>

8.引用

在你的文档中引用其他来源的内容。

默认样式引用

将任何 HTML 元素包裹在 中即可表现为引用样式。对于直接引用，我们建议用 标签。

Copy<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
blockquote>

多种引用样式

添加 用于标明引用来源。来源的名称可以包裹进标签中。

Copy<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
  <footer>Someone famous in <cite title="Source Title">Source Titlecite>footer>
blockquote>

9.列表

无序列表

排列顺序无关紧要的一列元素。

Copy<ul>
  <li>第一个列表元素内容li>
ul>

有序列表

排序至关重要的一组列表

Copy<ol>
  <li>第一个列表元素内容li>
ol>

无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）

Copy<ul class="list-unstyled">
  <li>第一个列表元素内容li>
ul>

内联列表

通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

Copy<ul class="list-inline">
  <li>第一个列表元素内容li>
ul>

10.描述

普通描述

Copy<dl>
  <dt>描述的标题dt>
  <dd>描述的内容dd>
dl>

水平排列描述

Copy<dl class="dl-horizontal">
  <dt>描述的标题dt>
  <dd>描述的内容dd>
dl>

11.代码块

内联代码

给section加上特殊样式

CopyFor example, <code><section>code> should be wrapped as inline.

用户输入

给组合键“Ctrl+L“加上特殊的效果展示

CopyTo edit settings, press <kbd><kbd>ctrlkbd> + <kbd>Lkbd>kbd>

变量

用`` 标签标记变量。

Copy<var>yvar> = <var>mvar><var>xvar> + <var>bvar>

12.表格***

基本实例

为任意 `` 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

Copy<table class="table">
  里面写正常表格内部元素，thead和tbody及内容
table>

条纹状表格

通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。

Copy<table class="table table-striped">
  里面写正常表格内部元素，thead和tbody及内容
table>

带边框表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

Copy<table class="table table-bordered">
  里面写正常表格内部元素，thead和tbody及内容
table>

鼠标悬停

通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

Copy<table class="table table-hover">
  里面写正常表格内部元素，thead和tbody及内容
table>

状态类

通过这些状态类可以为行或单元格设置颜色。

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

Copy<tr>
  <td class="active">...td>
  <td class="success">...td>
  <td class="warning">...td>
  <td class="danger">...td>
  <td class="info">...td>
tr>

响应式表格

将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

Copy<div class="table-responsive">
  <table class="table">
    里面写正常表格内部元素，thead和tbody及内容
  table>
div>

13.表单

基本实例

input、textarea、select元素设置form_control类值，将这些元素和label元素空间包裹在设置了form-group类的div中设置排列，然后包裹在from表单中

Copy<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email addresslabel>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
form>
  div>

内联表单

为 `` 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

Copy<form class="form-inline">
	写表单中的标签内容
form>

表单状态

焦点状态：我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

禁用状态：为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了 not-allowed鼠标状态。

只读状态：为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。

带图标的表单

还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框 元素上。

Copy<div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with successlabel>
    <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">span>
    <span id="inputSuccess2Status" class="sr-only">(success)		span>
div>

14.图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

Copy<img src="..." class="img-responsive" alt="Responsive image">

图片形状

通过为 `` 元素添加以下相应的类，可以让图片呈现不同的形状。

Copy<img src="..." alt="..." class="img-rounded">  //圆角正方形
<img src="..." alt="..." class="img-circle">  //圆形
<img src="..." alt="..." class="img-thumbnail">  //正方形

15.辅助

情景文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。

Copy<p class="text-muted">...p>
<p class="text-primary">...p>
<p class="text-success">...p>
<p class="text-info">...p>
<p class="text-warning">...p>
<p class="text-danger">...p>

情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。

Copy<p class="bg-primary">...p>
<p class="bg-success">...p>
<p class="bg-info">...p>
<p class="bg-warning">...p>
<p class="bg-danger">...p>

快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

Copy<div class="pull-left">...div>
<div class="pull-right">...div>

内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。

Copy<div class="center-block">...div>

清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

Copy<div class="clearfix">...div>

显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !important 来避免 CSS 样式优先级问题。

Copy<div class="show">...div>
<div class="hidden">...div>

三、常用组件

常用组件链接：https://v3.bootcss.com/components/

1.Glyphicons 字体图标

使用

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

Copy<span class="glyphicon glyphicon-search" aria-hidden="true">span>

实例

Copy<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true">span>
button>

2.下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

下拉和上拉菜单实例

使用dropdown和dropup给标签设置下拉和上拉内容

实例

Copy
<div class="dropup">
    
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret">span>  
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Actiona>li>  
    <li><a href="#">Another actiona>li>
    <li><a href="#">Something else herea>li>
    <li role="separator" class="divider">li> 
    <li><a href="#">Separated linka>li>
  ul>
div>

3.按钮组

通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。

基本实例

Wrap a series of buttons with .btn in .btn-group.

用btn和btn-group类包裹一些列的按钮

Copy<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Leftbutton>
  <button type="button" class="btn btn-default">Middlebutton>
  <button type="button" class="btn btn-default">Rightbutton>
div>

按钮工具栏

把一组 组合进一个 中就可以做成更复杂的组件。

Copy<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...div>
  <div class="btn-group" role="group" aria-label="...">...div>
  <div class="btn-group" role="group" aria-label="...">...div>
div>

尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

Copy<div class="btn-group btn-group-lg" role="group" aria-label="...">...div>
<div class="btn-group" role="group" aria-label="...">...div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...div>

4.输入框俎

5.导航

6.分页

7.标签和徽章

8.页头

9.缩率图

10.进度条

模拟滚动进度条

Copyvar $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);

function setValue() {
  if (width === 100) {
    clearInterval(theID);
  } else {
    width++;
    $d1.css("width", width+"%").text(width+"%");
  }
}
//注意这个语句需要先引用jquery文件，写在jquery后面。

四、响应式开发

为什么要进行响应式开发

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

什么是响应式

利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

媒体查询

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

常见属性

• device-width, device-height 屏幕宽、高
• width,height 渲染窗口宽、高
• orientation 设备方向
• resolution 设备分辨率

语法

Copy@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不同媒体使用不同的stylesheet

Copy<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

Copy

• width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
• height：和 width 相对应，指定高度。
• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。

五、JavaScript插件

1.常用的Bootstrap自带插件

模态框

模态框的HTML代码放置的位置

务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

Copy
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
button>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×span>button>
        <h4 class="modal-title" id="myModalLabel">Modal titleh4>
      div>
      <div class="modal-body">
        ...
      div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
        <button type="button" class="btn btn-primary">Save changesbutton>
      div>
    div>
  div>
div>

注意

• 通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
• 通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
• 通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

调用方式

通过data属性

通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性，用来指向被控制的模态框。

Copy<button type="button" data-toggle="modal" data-target="#myModal">显示模态框button>

通过JS代码调用

Copy$('#myModal').modal("show");  // 显示
$('#myModal').modal("hide")   // 隐藏

常用参数

名称	可选值	默认值	描述
backdrop	true/false/‘static’	true	false表示有没有遮罩层，'static’表示点击遮罩层不关闭模态框
keyboard	true/false	true	键盘上的 esc 键被按下时关闭模态框。
show	true/false	true	模态框初始化之后就立即显示出来。

方法

Copy$('#myModal').modal({
  keyboard: false
})

2.轮播图

html代码

Copy<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
    <li data-target="#carousel-example-generic" data-slide-to="1">li>
    <li data-target="#carousel-example-generic" data-slide-to="2">li>
  ol>

  
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      div>
    div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      div>
    div>
    ...
  div>

  
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    <span class="sr-only">Previousspan>
  a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    <span class="sr-only">Nextspan>
  a>
div>

图片中添加介绍信息

Copy<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...h3>
    <p>...p>
  div>
div>

设置切换时间

Copy$('.carousel').carousel({
  interval: 2000
})