JavaScript&JQuery

王维诗里的代码i

已于 2023-09-13 16:19:01 修改

阅读量225

点赞数

分类专栏：前端技术基础文章标签： javascript jquery 前端

于 2022-10-01 23:41:14 首次发布

本文链接：https://blog.csdn.net/LiuCJ_20000/article/details/127138821

版权

前端技术基础专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1 javascript

1.1 javascript基础

什么是javascript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 [1]

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]

JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420?fromModule=lemma_inlink)。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。 [1]

js运行在浏览器端的编程语言，用来解决用户和浏览器之间的交互问题。

1.1.1 js的语法

第一种写法：内部写法，在script标签中定义js代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
   <div></div>
</body>
<script type="text/javascript">
   alert("hello,javascript"); //弹框函数,在浏览器窗口弹出一个框
</script>
</html>

第二种写法：行内写法，可以在HTML标签的内部去写js代码

<body>
   <!-- onclick 单击这个按钮会触发的js代码 -->
   <input type="button" value="点击" onclick="alert('hello world....')">
</body>

第三种写法：外部写法，可以在外部定义独立的js文件，我们只需要在对应HTML页面内部引入js文件即可。

<script type="text/javascript" src="js/common.js">
</script>

定义js代码需要注意的事项：

在HTML中，script标签可以出现多对。

<script type="text/javascript"  src="js/common.js">
  
</script>

<script type="text/javascript">
  alert("hello,javascript"); //弹框函数,在浏览器窗口弹出一个框
</script>

如果script标签引入了外部的js文件，那么不能在当前的script标签中定义内部的js代码了。如果确实想要定义内部的js代码，需要重新定义新的script标签，在新的script标签中定义js代码。

<script type="text/javascript" src="js/common.js">
   alert("hello,javascript"); //弹框函数,在浏览器窗口弹出一个框
</script>
这种写法不对，外部的js代码会生效，但是内部的js代码不会生效。

script标签中的type="text/javascript"属性可以不写，但是一般我们最好带上，因为我们目前的文件是HTML5文件，这样写是遵循HTML5的标准和规范。

<script src="js/common.js">
</script>

目前我们最好把script标签放在body标签的后面，因为浏览器解析HTML文件是按照自上而下的方式解析的(瀑布式的加载)，如果我们要操作body里面的标签，需要现在加载这些标签元素才能进行对应的js操作。

1.1.2 js变量

变量：变量用来存储数据的容器。

基本格式：var 变量名称 = 值；

<script type="text/javascript">
  // var 变量名称 = 值
  var num = 23;
  console.log("num1的值是:" + num);
  var str = "hello";
  console.log("str的值是:" + str);
  var flag = true;
  console.log("flag的值是:" + flag);
  var money = 3.14;
  console.log("money的值是:" + money);
  //也可以一次性的声明多个变量
  var num1,num2,num3;
  num1 = 11;
  num2 = 12;
  num3 = 13;
  console.log("num1的值是:" + num1 + "num2的值是:" + num2 + "num3的值是:" + num3);
  //声明字符串类型的变量，单引号双引号都可以.
  var username = 'eric';
  console.log("username的值是:" + username);
  //在声明变量的时候,var关键字也可以省略
  sname = "李四";
  console.log("sname的值是:" + sname);
  //在给变量重新的赋值的时候,我们不要考虑变量的数据类型
  var age = 12;
  age = "19";
  console.log("age的值是:" + age);
</script>

使用变量需要注意的事项:

变量的名称一定要有意义。
变量名称一般小写。
变量名称要遵循驼峰命名规则。
变量名称不要使用关键字

案例：使用js变量实现两个数字之间的交换

<script>
   var a = 12;
   var b = 23;
   var temp;
   var temp = a;
   var a =  b;
   var b = temp;
   document.write("a的值是:" + a + "<br>"); //向浏览器页面输出一些内容，这些内容既可以是纯文本也可以是html类型的文本
   document.write("b的值是:" + b + "<br>");
</script>

<script>
   var a = 12;
   var b = 23;
   var a = a + b; // a = 35
   var b = a - b; // b = 35 - 23 = 12
   var a = a - b; // a = 35 - 12 = 23
   document.write("a的值是:" + a + "<br>"); 
   document.write("b的值是:" + b + "<br>");
</script>

1.1.3 js的注释

js中的注释有两种，一种是单行注释，一种是多行注释。

单行注释: // 注释内容

多行注释:/*注释内容*/

<script>
   var a = 12;
   var b = 23;
   var a = a + b; // a = 35
   var b = a - b; // b = 35 - 23 = 12
   var a = a - b; // a = 35 - 12 = 23
   document.write("a的值是:" + a + "<br>");
   document.write("b的值是:" + b + "<br>");
   
   /*
    多行注释的效果
    console.log(a);
    console.log(b);
   */
    
   <!-- html注释的内容 --> 
   
   /*css的注释内容*/

   // js的单行注释

   /*
     js的多行注释
  */
</script>

1.1.4 js变量的数据类型

在javascript中，变量的数据类型有很多种：

number: 数字类型包括整数还有小数。

string:字符串类型，字符串类型的值使用双引号和单引号都可以。

boolean:布尔值类型(true false)。

object：一个对象的类型。

undefined:未被定义的类型，如果一个变量声明不赋值就是undefined类型。

null: 变量的值为null。

如何获取变量的数据类型? 通过typeof函数可以查看变量的数据类型。

<script type="text/javascript">
    var num = 10;
    var price = 3.14;
    var username = "eric";
    var result = true;
    var o = new Object();
    var person;
    var str = null;
    console.log(typeof num);
    console.log(typeof price);
    console.log(typeof username);
    console.log(typeof result);
    console.log(typeof o);
    console.log(typeof person);
    console.log(typeof str);
</script>

1.1.4.1 number类型

不管是整数还是小数，都可以使用number来描述。
number是有范围的。

<script type="text/javascript"> /** number类型 */
    var nub1 = 12
    nub2 = 1.111
    document.write(typeof nub1+"<br>")
    document.write(typeof nub2+"<br>")
    console.log("Number类型的最小值："+Number.MIN_VALUE)
    console.log("Number类型的最大值："+Number.MAX_VALUE)
    document.write(Number.MAX_SAFE_INTEGER)
</script>

判断变量是否是数字 isNaN()

<script> /** 判断变量是否是数字--isNaN(变量)  <Not a Number> */
    var name ="eric";
    document.write("<br>"+name+"不是一个数字isNaN()："+isNaN(name))；
    age ='90'；
    document.write("<br>"+age+"不是一个数字isNaN(age)："+isNaN(age))；
    score = 18；
    document.write("<br>"+score+"不是一个数字isNaN(score):"+isNaN(score))；
</script>

==号的问题

如果两个操作数相等，则返回 true。在比较时，相等操作符会先转换操作数（通常称为强制转型），然后比较它们的相等性。

如果有一个操作数是布尔值，则在比较相等性之前，将其转换为数值；

console.log(false == 0);//true 如果有一个操作数是布尔值,则在比较相等性之前,将其转换为数值. true = 1  false = 0
console.log(true == 1);// true

如果一个操作数是字符串，另一个操作数是数值，在比较之前先将字符串转换为数值；

var num1 = 55;
var num2 = "55";
console.log(num1 == num2); //true 如果一个操作数是字符串,另一个操作数是数值,在比较之前先将字符串转换为数值.

如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较；

/** object对象进行比较时会调用对象的valueOf()方法，得到的基本类型值在进行比较 */
    var o = new Object(33);
    var num4 = 33;
    document.write(o==num4);

    var ob = new Object(332);
    document.write("<br>"+typeof ob);
    document.write(ob);
    ob = 45; //会变成number类型
    document.write("<br>"+typeof ob);

如果有一个操作数是 NaN，无论另一个操作数是什么相等操作符都返回 false；

console.log(NaN == NaN);//false  如果有一个操作数是 NaN,无论另一个操作数是什么,相等操作符都返回 false.

如果两个操作数都是对象，则比较它们是不是同一个对象。如果指向同一个对象，则相等操作符返回 true；

/** Object之间使用==;非基本数据类型之间比较地址  */
    var obj1 = new Object("Hello");
    var obj2 = new Object("Hello");
    document.write(obj1==obj2); //false
    var obj3 = obj1
    document.write(obj3==obj1); //ture
      /** ture:Object与基本数据类型比较时，会调用valueOf()自动转型后==比较 */
    var strobj = 'Hello';
    document.write(strobj==obj2); //true

null 和 undefined 是相等的。

console.log(null == undefined);// true

一些特殊请情况

console.log([] == []);//false 两个空的数组对象是否相等
console.log({} == {});//false 比较两个空对象是否相等

1.1.4.2 string类型

给字符串变量赋值，可以使用双引号，也可以使用单引号。

<script type="text/javascript">
    var name = "eric";//双引号
    var message = 'hello';//单引号
</script>

描述字符串的长度使用length属性。

<script type="text/javascript">
    var message = 'hello';//单引号
    document.write("字符串的长度:" + message.length)
</script>

js中特殊的字符的描述。

<script type="text/javascript">
    var name = "eric";//双引号
    var message = 'hello';//单引号
    document.write("字符串的长度:" + message.length)
    console.log("abc\nefg");// \n 换行的意思
    console.log("abc\tefg");// /t 就是制表符
    console.log("abce\"fg");// \" 转义双引号
    console.log("abce\'fg");// \" 转义单引号
</script>

在js字符串中，也可以使用+号对字符串的内容进行拼接。

console.log("hello" + "world");
console.log("100" - 99);// 1

1.1.5 js数据类型的转换

1.1.5.1 其他类型转换成数字类型

我们可以通过parseInt(“str”)将其他数据转换成整数类型。

console.log(parseInt("10")); // 10
console.log(parseInt("10abc"));//10
console.log(parseInt("abc10"));//NaN
console.log(parseInt("1abc123"));//1
console.log(parseInt("3.14165926"));//3
console.log(parseInt("3.14abc"));//3

将字符串转换成小数 parseFloat(“str”)

console.log(parseFloat("10"));
console.log(parseFloat("10abc"));//10
console.log(parseFloat("10.123"));//10.123
console.log(parseFloat("10.123abc"));//10.123
console.log(parseFloat("1ac0.123abc"));//1
console.log(parseFloat("10.1erf2abc"))//10.1

将字符串转换成数字 Number(“str”)

console.log(Number("10"));//10
console.log(Number("10abc"));//NaN
console.log(Number("abc10"));//NaN
console.log(Number("1abc20"));//NaN
console.log(Number("10.2345"));//10.2345
console.log(Number("10.2345abc"));//NaN

1.1.5.2 其他类型转换成字符串类型

将其他数据类型转换成字符串的方式有两种：

toString()

String()

var num = 30;
console.log(num.toString() + "转换之后的数据类型:" + typeof num.toString());
var num1 = 30;
console.log(String(num1) + "转换之后的数据类型:" + typeof String(num1));

1.1.5.3 其他类型转换成布尔值

Boolean()

console.log(Boolean(1));// true  非0的数字
console.log(Boolean(3.14));// true  非0的数字
console.log(Boolean(0));// false  为0位false
console.log(Boolean(-11));// true 非0的整数
console.log(Boolean(11));// true 非0的整数
console.log(Boolean("hello"));// true 非空字符串为true
console.log(Boolean(null));// false

1.1.6 运算符

1.1.6.1 算术运算符

常见的算术运算符有：+ - * / % ++ – += -=

<script type="text/javascript">
    var a = 10;
    var b = 3;
    document.write("a + b = " + (a + b) + "<br>");
    document.write("a - b = " + (a - b) + "<br>");
    document.write("a * b = " + (a * b) + "<br>");
    document.write("a / b = " + (a / b) + "<br>");// 不是取商,而是取整个结果
    document.write("a % b = " + (a % b) + "<br>");
</script>

/*
 * 如果++在num后面，就是先赋值 后运算。
 * 如果++在num前面，就是先运算 后赋值。
 */
<script type="text/javascript">
    var num = 10;
    console.log(num++);// num++ 10   num = 11
    console.log(++num);// ++num = 12
    console.log(num);
</script>

1.1.6.2 比较运算符

常见的比较运算符: < > >= <= == != ===

<script type="text/javascript">
    var a = 10;
    var b = 3;
    document.write("a和b的比较结果是:" + (a > b) + "<br>");
    document.write("a和b的比较结果是:" + (a < b) + "<br>");
    document.write("a和b的比较结果是:" + (a == b) + "<br>");
    document.write("a和b的比较结果是:" + (a != b) + "<br>");
    var c = "7";
    document.write("a和c的比较结果是:" + (a > c) + "<br>");
    document.write("a和c的比较结果是:" + (a > c) + "<br>");
    var d = 7;
    // == 比较两个数据的值是否相等,如果数据不一样,会将对应数据转换成数字之后再比较。
    document.write("c==d的结果是:" + (c == d) + "<br>");// true
    // ===  不仅要比较两个数值的值是否相等,还有比较两个数值的数据类型是否相等。
    document.write("c===d的结果是:" + (c === d) + "<br>");// false
</script>

1.1.6.3 逻辑运算符

在javascript中，描述逻辑运算符的是&& ||

document.write((a > b) && (b < d) + "<br>");// true
document.write((a < b) && (b < d) + "<br>"); // false
document.write((a < b) || (b < d) + "<br>");// true

&&：表达式1 && 表达式2

只有表达式1和表达式2同时为true。整个表达式才为true。

||：表达式1 || 表达式2

只要表达式1和表达式2中任意一个表达式为true。整个表达式就为true。

注意：在js中描述逻辑运算符的只有&& 或者||。没有& |。

1.1.6.4 三元运算符

格式: 表达式？结果1 ：结果2

表达式为true，则取结果1的值。表达式为false，则取结果2的值。

var age = 23;
document.write((age > 18) ? "成年人" : "未成年");

1.1.7 js中的流程控制语句

1.1.7.1 if语句

单if语句

语法格式:

if(条件){
    满足条件需要执行的代码
}

<script type="text/javascript">
    var age = 28;
    if(age > 18){
        document.write("年龄是:" + age + "岁,是成年人" + "<br>");
    }
</script>

if-else语句

语法格式:

if(条件){
    满足条件需要执行的代码
}else{
    不满足if条件需要执行的代码
}

<script type="text/javascript">
    var age = 8;
    if(age > 18){
        document.write("年龄是:" + age + "岁,是成年人" + "<br>");
    }else{
        document.write("年龄是:" + age + "岁,是未成年人" + "<br>");
    }
</script>

if-else if …else语句

语法格式：

if(条件表达式){
语句
}else if(条件表达式){
语句
}else if(条件表达式){
语句
}else{
语句
}

<script type="text/javascript">
    var score = 88;
    if(score >=90){
        document.write("分数是:" + score + ",成绩优秀" + "<br>");
    }else if(score >= 80){
        document.write("分数是:" + score + ",成绩良好" + "<br>");
    }else if(score >= 60){
        document.write("分数是:" + score + ",成绩合格" + "<br>");
    }else{
        document.write("分数是:" + score + ",成绩不合格" + "<br>");
    }
</script>

1.1.7.2 switch语句

switch语句一般用来做等值判断。

语法格式：

switch(值){
   case 值1:
       满足case条件需要执行的代码;
       break;
   case 值2：
       满足case条件需要执行的代码;
       break;
   ......
   default:
      不满足以上所有case语句要执行的代码;
      break;
}

注意：break关键字用于跳出switch，即当break语句执行，下面的switch语句将会跳过。

num=2;
switch(num){
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
    case 6:
        console.log("星期六");
    case 7:
        console.log("星期日");
    default:
        console.log("非法数字~~");
}

1.1.7.3 循环语句之while循环

while循环的语法格式:

while(条件表达式){
	满足条件需要执行的语句
}

while(true){
    document.write("hello");
    break; //跳出当前的while循环
}

// 输出0-100之间的数字
var i = 0;
while(i <=100){
    console.log(i);
    i ++;
}

//输出1-100之间的和
var i = 0;
var total = 0;
while(i <=100){
    total =  total + i;
    i ++;
}
console.log(total);

1.1.7.4 循环语句之do-while

do-while循环，先执行一次循环操作，然后再去判断循环条件。

语法格式：

do{
   循环体
}while(循环条件);

var i = 0;
do{
    console.log(i);
    i++;
}while(i<=100);

1.1.7.5 for循环

语法格式：

for(循环条件){
	满足循环条件需要执行的代码;
}

var total = 0;
for(var i = 0;i<=100;i++){
    if(i % 2 == 0){
        total = total + i;
    }
}
console.log(total);

1.1.7.6 循环中碰到的几个关键字 break continue

break关键字

在循环中使用break关键字，表示立即终止循环操作。如果在case语句中使用break关键字，表示立即跳出case语句。

需求：找到100-200之间第一个被7整除的数字。

for(var i = 100;i <= 200;i++){
    if(i % 7 == 0){
        console.log(i);
        break;// 跳出for循环，不再执行循环操作
    }
}

continue关键字

在循环中使用continue关键字，表示终止本次循环，回到循环起始条件处，准备开始下一次循环操作。

案例：求100-200之间所有的奇数之和

var sum = 0;
for(var i = 100;i <= 200;i++){
    if(i % 2 == 0){
        continue;
    }
    sum  = sum + i;
}
document.write("100-200之间的所有奇数之和是:" + sum);

1.2 javascript中的数组和函数

1.2.1 js数组

数组是用来保存数据的容器，我们可以通过数组批量的存储数据。如何创建数组?

第一种：通过字面量的方式创建数组(推荐)

<script type="text/javascript">
    var arr = []; //创建的是一个空数组
    var arr1 = [12,34,56,78,90];
    console.log(arr1);
</script>

第二种：通过构造函数创建数组

<script type="text/javascript">
    var arr2 = new Array(3);
    arr2[0] = 11;
    arr2[1] = 22;
    arr2[2] = 33;
    console.log(arr2);
</script>

数组的长度：通过length属性去描述

<script type="text/javascript">
    var arr1 = [12,34,56,78,90];
    console.log(arr1.length);
</script>

我们也可以通过数组的下标或设置或获取数组中的元素。数组的下标从0开始。

<script type="text/javascript">
    var arr1 = [12,34,56,78,90];
    var arr2 = new Array(3);
    //通过下标设置数据
    arr2[0] = 11;
    arr2[1] = 22;
    arr2[2] = 33;
    console.log(arr1);
    console.log(arr2);
    //获取对应下标中的数据
    console.log(arr1[3]);
</script>

使用数组的时候需要注意的事项：

js中数组存储元素的数据类型是不一样的。但是我们在开发中一般都会在数组中存储同一种数据类型的数据。

var arr = ["a",12,"hello",true,4.12];
for(var i = 0;i<arr.length;i++){
    console.log(arr[i]);
}

js中数组的长度不是固定的。

var arr2 = new Array(3); //声明了1个长度为3的数组
arr2[0] = 11;
arr2[1] = 22;
arr2[2] = 33;
arr2[3] = 89;//如果数组的长度不够用,我们可以动态扩容
arr2[4] = 99;
for(var i = 0;i<arr2.length;i++){
    console.log(arr2[i]);
}
console.log("数组的长度是：" + arr2.length);

在js数组中，如果通过索引值获取的数组元素不存在，对应元素的值为undefined

var arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = 300;
console.log(arr[100])// undefined

1.2.1.1 通过循环遍历获取数组中的元素

遍历获取数组元素的方式有两种，一种是普通for循环获取数组中的元素。还有一种是for-in循环获取数组中的元素。

第一种普通for循环：

var arr = [12,15,17,19,22,25];
for(var i = 0;i<arr.length;i++){
    console.log(arr[i]);
}

第二种 for-in循环：

var arr1 = [12,34,56,78,90];
for(var index in arr1){ // index指的是数组元素的下标
    document.write(arr1[index] + "<br>");
}

1.2.1.2 js中数组的相关练习

求数组中所有元素之和

<script type="text/javascript">
    var arr = [10,20,30,40,50];
    var sum = 0;
    for(var i = 0;i<arr.length;i++){
        sum += arr[i];
    }
    document.write("数组中所有元素之和是:" + sum);
</script>

求数组中所有元素的平均值

<script type="text/javascript">
    var arr = [10,20,30,40,50];
    var sum = 0;
    for(var i = 0;i<arr.length;i++){
        sum += arr[i];
    }
    document.write("数组中所有元素的平均值是:" + sum/arr.length);
</script>

求数组中所有元素中的最大值

<script type="text/javascript">
    var arr = [10,20,30,40,50];
    var max = arr[0];
    for(var i = 0;i<arr.length;i++){
       if(arr[i] > max){
           max = arr[i]
       }
    }
    document.write("数组中最大的元素是:" + max);
</script>

将字符串数组中的每个元素使用“-”拼接，然后形成一个字符串并输出。

<script type="text/javascript">
    var names = ["eric","miller","sunny","kobe","james"];
    var str = "";
    for(var i = 0;i<names.length-1;i++){
        str =  str + names[i] + "-";
    }
    document.write(str+ names[names.length - 1]);
</script>

1.2.2 函数

1.2.2.1 函数的基本概述

函数的定义：就是将一段功能代码进行封装，在需要这段代码的时候，我们直接通过函数的名称直接调用即可。

在js中使用函数需要注意的事项：

定义函数形参的时候，不能使用var关键字修饰参数的数据类型。

 function  getNum(num1,num2){// 形参num1 num2不需要加var修饰
     return num1 - num2;
 }

在js中我们无需定义函数的返回值类型，如果我们想要返回数据的话，在函数体内部，我们直接使用return关键字返回数据即可。

 function  getNum(num1,num2){
     return num1 - num2;// 如果需要返回数据 直接使用return关键字返回数据即可。
 }

在js中，不同于java，我们的函数是没有重载的概念的。如果出现了两个同名的函数，那么后面定义的函数会覆盖前面定义的函数。

<script type="text/javascript">
    
    function  getNum(num1,num2){
            return num1 - num2;
    }

    function  getNum(num1,num2){
        return num1 + num2;
    }

    var result = getNum(10,8);
    console.log(result);// 18 以第二个函数为准
</script>

在js函数中，任何函数的内部都隐式的维护了一个名字为arguments的数组对象，在进行参数传递的时候(实际参数传递给形式参数)，首先会将参数传递给arguments数组对象，然后再将arguments数组对象中的值依次传递给形参。

<script type="text/javascript">
    function  getNum(num1,num2){
        for(var i = 0;i<arguments.length;i++){
            console.log(arguments[i]);
        }
        return num1 + num2;
    }
    //调用函数
    //var result = getNum(10,8);
    //console.log(result);// 18
    //var result1 = getNum(10,8,9,15);
    //console.log("函数的结果是:" + result1);//18
    var result2 = getNum(10);
    console.log("函数的结果是:" + result2);//NaN
</script>

在js中如何声明函数?有三种方式：声明普通函数、匿名函数、对象函数。

普通函数的声明

语法格式：

function 函数名(参数列表){
	函数体
}

如何调用普通函数，通过函数名调用即可

<script type="text/javascript">
    function getNum(num1,num2){
        return num1 + num2;
    }
    //通过函数名调用函数
    var sum = getNum(10,2);

    function getTotal(num1,num2){
        console.log("函数的结果是:" + (num1 + num2));
    }
    //通过函数名调用函数
    getTotal(1,1);
</script>

匿名函数

语法格式：

var fn = function(参数列名){
  函数体
}
//通过变量名调用函数即可
fn(实际参数);

<script type="text/javascript">
   //匿名函数
    var fn = function(num1,num2){
        document.write("两个数字之和是:" + (num1 + num2) + "<br>");
    }
    //调用函数
    fn(1,2);

    var fn1 = function(arr) {
      return arr.length;
    }
    var length = fn1("hello");
    document.write("字符串的长度是:" + length);
</script>

对象函数

对象函数在声明的时候，参数列表必须是字符串类型，函数体也必须在双引号当中。

<script type="text/javascript">
	//对象函数
    var fn2 = new Function("a","b","console.log('两个数字之和是:' + (a + b))");
    //调用对象函数
    fn2(10,10);
</script>

1.2.2.2 函数的练习

练习：根据输入的数字，显示当前的月份：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <input type="text" id="time">
    <input type="button" value="查询" id="search" onclick="showTime()">
</body>
<script type="text/javascript">
    function showTime(){
        var inputObj = document.getElementById("time");//获取input输入框的对象。
        var time = inputObj.value; //获取输入框里的value值。
        switch (time) {
            case "1":
                alert("这是" + time + "月份");
                break;
            case "2":
                alert("这是" + time + "月份");
                break;
            case "3":
                alert("这是" + time + "月份");
                break;
            case "4":
                alert("这是" + time + "月份");
                break;
            case "5":
                alert("这是" + time + "月份");
                break;
            case "6":
                alert("这是" + time + "月份");
                break;
            case "7":
                alert("这是" + time + "月份")
                break;
            case "8":
                alert("这是" + time + "月份");
                break;
            case "9":
                alert("这是" + time + "月份");
                break;
            case "10":
                alert("这是" + time + "月份");
                break;
            case "11":
                alert("这是" + time + "月份")
                break;
            case "12":
                alert("这是" + time + "月份");
                break;
            default:
                alert("输入的月份非法");
                break;
        }
    }
</script>
</html>

1.3 js内置对象

内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)。目的就是帮助我们快速开发。JavaScript提供了多个内置对象: Math、 Date、Array. String等。

1.3.1 String内置对象

字符串创建的方式：

在js中字符串创建的方式有3种。创建的方式如下：

var str = 'ABC'; -- 直接赋值
var str1 = String('ABC'); -- 通过字符串的构造函数赋值
var str2 = new String('ABC'); -- new关键字赋值

三种创建字符串方式的数据类型是:

console.log(typeof str);// string
console.log(typeof str1);// string
console.log(typeof str2);// Object

解释：如果js数据类型是基本数据类型(string)。这种数据类型的值存储在栈内存中。如果js数据类型是引用数据类型(Object)。这种数据类型存储在堆内存中，并且栈内存中存储指定对内存的引用。

接下来我们再做如下判断：

<script type="text/javascript">
    var str = 'ABC';
    var str1 = String('ABC');
    var str2 = new String('ABC');
    var str3 = new String('ABC');
    var str4 = "ABC";
    var str5 = String('ABC');
    console.log(typeof str);// string
    console.log(typeof str1);// string
    console.log(typeof str2);// Object
    console.log("-----------------------");
    console.log(str2 == str3);// false 由于是Object对象类型的数据 比较的是内存地址
    console.log(str == str4); // true
    console.log(str == str5);// true
    console.log(str == str2); // true
    console.log(str3 == str5);//true

    console.log("-----------------------");
    console.log(str === str1);// true  === 不仅仅比较值 还比较其数据类型
    console.log(str === str4);// true
    console.log(str1 === str5);//true
    console.log(str === str2);// false   str是string类型 但是str2是object类型 数据类型不一致 所以为false
    console.log(str3 === str5);//false
</script>

字符串常用的方法:

<script type="text/javascript">
    var message = "hello";
    document.write(message.bold());// bold方法 给字符串文字加粗
    document.write("<br>");
    document.write(message.charAt(1));//返回执行索引位置上的字符
    document.write("<br>");
    document.write(message.charCodeAt(2));//返回指定位置字符的编码值
    document.write("<br>");
    document.write(message.concat("world"));//字符串内容的追加
    document.write("<br>");
    var str = "hello,javascript";
    document.write(str.fontsize(20));//设置文字大小
    document.write("<br>");
    document.write(str.fontcolor("red"));//设置文字颜色
    document.write("<br>");
    var username = "LebornJames";
    document.write(username.indexOf("J"));//返回指定字符在字符串中第一次出现的索引值位置
    document.write("<br>");
    document.write(username.lastIndexOf("e"));//返回指定字符在字符串中最后一次出现的索引值位置
    document.write("<br>");
    document.write(username.link("https://www.qq.com"));//给字符串设置超链接
    document.write("<br>");
    document.write(username.slice(6,11));//返回指定区间的字符串(范围是包头不包尾)
    document.write("<br>");
    document.write(username.replace("James","kobe"));//替换字符串内容
    document.write("<br>");
    var strs = username.split("");//切割字符串 返回新的字符串数组
    for(var index in strs){
        console.log(strs[index]);
    }
    document.write(username.substr(0,6));//截取字符串 参数1:字符串的起始索引值  参数2:截取字符串的长度
    document.write("<br>");
    document.write(username.substring(0,6));//截取字符串 参数1:字符串的起始索引值  参数2:截取字符串的结束索引值
    document.write("<br>");
    document.write(username.toUpperCase());//转大写
    document.write("<br>");
    document.write(username.toLowerCase());//转小写
    document.write("<br>");
</script>

1.3.2 Date内置对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 当前系统时间是:<span id="s1"></span>
</body>
<script type="text/javascript">
    var date = new Date(); //创建当前系统时间的日期对象
    console.log('当前系统时间是:' + date);
    var year = date.getFullYear();//获取当前系统时间的年部分
    console.log("年:" + year);
    var month = date.getMonth();//获取当前系统时间的月部分
    console.log("月:" + month);
    var day = date.getDate();//获取当前系统时间的天部分
    console.log("日:" + day);
    var weekDay = date.getDay();//获取当前时间是星期几
    console.log("星期:" + weekDay);
    var hour = date.getHours();//获取当前系统时间的小时部分
    console.log("小时:" + hour);
    var minute = date.getMinutes();//获取当前系统时间的分钟部分
    console.log("分钟:" + minute);
    var second = date.getSeconds();//获取当前系统时间的秒部分
    console.log("秒:" + second);
    //自定义时间格式
    var currentTime = year + "-" + month + "-" + day + "&nbsp;&nbsp;" + hour + ":" + minute + ":" + second;
    //设置日期数据到span标签里面去  innHTML:给HTML标签设置文本内容
    document.getElementById("s1").innerHTML = currentTime;
</script>
</html>

需求：在页面上动态显示当前系统时间

<body>
 当前系统时间是:<span id="s1"></span>
</body>
<script type="text/javascript">
    function getCurrentTime(){
        var date = new Date(); //创建当前系统时间的日期对象
        console.log('当前系统时间是:' + date);
        var year = date.getFullYear();//获取当前系统时间的年部分
        console.log("年:" + year);
        var month = date.getMonth();//获取当前系统时间的月部分
        console.log("月:" + month);
        var day = date.getDate();//获取当前系统时间的天部分
        console.log("日:" + day);
        var weekDay = date.getDay();//获取当前时间是星期几
        console.log("星期:" + weekDay);
        var hour = date.getHours();//获取当前系统时间的小时部分
        console.log("小时:" + hour);
        var minute = date.getMinutes();//获取当前系统时间的分钟部分
        console.log("分钟:" + minute);
        var second = date.getSeconds();//获取当前系统时间的秒部分
        console.log("秒:" + second);
        //自定义时间格式
        var currentTime = year + "-" + month + "-" + day + "&nbsp;&nbsp;" + hour + ":" + minute + ":" + second;
        //设置日期数据到span标签里面去  innHTML:给HTML标签设置文本内容
        document.getElementById("s1").innerHTML = currentTime;
    }
    //定时函数(每隔指定的时间动态调用函数)
    window.setInterval("getCurrentTime()",1000);//参数1:定时执行的函数  参数2:定时执行的时间(单位是毫秒)
</script>

1.3.3 Math对象

<script type="text/javascript">
    var number = Math.abs(-90);//取绝对值
    console.log(number);
    var floor = Math.floor(3.9994);//向下取整
    console.log(floor);
    var round = Math.round(3.14);
    console.log(round);
    var ceil = Math.ceil(3.0004);//向上取整
    console.log(ceil);
    var random = Math.random();//取随机数(0-1)
    console.log(random);
    //需求:在指定区间(i<=R<=j)获取随机的整数  Math.floor(i+Math.random()*(j-i+1));   10-15
    var num = Math.floor(10 + Math.random()*6);
    console.log(num);
    var min = Math.min(21,23,45,67,78);//取最小值
    console.log(min);
    var max = Math.max(21,23,45,67,78);//取最大值
    console.log(max);
    var num1 = Math.trunc(3.14);//返回的是一个数的整数部分,不管正数还是负数,直接去掉小数点及之后的部分.
    console.log(num1);
    var num2 = Math.trunc(-3.14);
    console.log(num2);
    var num3 =4.2167456;
    num3 = num3.toFixed(2); // 四舍五入,并且精确到小数点后2位 输出结果为 4.22
    console.log(num3)
    var num4 =4.2167456;
    num4 = Math.floor(num4 * 100) / 100; // 输出结果为 4.21
    console.log(num4);
</script>

1.3.4 Number对象

<script type="text/javascript">
    var num1 = 0.1 + 0.2; //0.30000000000000004
    console.log(num1);
    console.log(0.3==num1);
    var num2 = new Number(3.1415926);
    console.log(num2.toFixed(3));//四舍五入精确到指定的位数
</script>

1.3.4 Array对象

<script type="text/javascript">
    var arr = [1,2,3,4,5];
    var arr1 = [6,7,8,9];
    var arr = arr.concat(arr1);//arr1中的元素追加到arr数组中
    for(var index in arr){
        console.log(arr[index]);
    }
    var message = arr.join("-");//将数组中的元素安装某种方式串联起来
    console.log(message);
    var last = arr.pop();//将数组中最后一个元素删除并将其返回
    console.log(last);
    console.log(arr.length);
    var arr2 = [10,11,12,13,14,15];
    var length = arr2.push(16,17);//追加指定的元素到数组中 返回数组的长度
    console.log("追加之后的数组长度:" + length);
    for(var i = 0;i<arr2.length;i++){
        console.log(arr2[i]);
    }
    var arr3 = ["A","B","C","D","E"];
    var newArr3 = arr3.reverse();//翻转数组中的元素
    for(var index in newArr3){
        console.log(newArr3[index]);
    }
    console.log("------")
    var arr4 = [11,12,13,14,15];
    var newArr4 = arr4.slice(2,4);//根据指定区间截取数组中的元素返回到一个新数组中
    for(var index in newArr4){
        console.log(newArr4[index]);
    }
    var arr5 = [12,67,54,89,23];
    var newArr5 = arr5.sort();//排序数组中的元素
    console.log("------");
    for(var index in newArr5){
       console.log(newArr5[index]);
    }
</script>

1.3.5 自定义对象

1.3.5.1 通过new关键字构造对象

<script type="text/javascript">
    //创建一个对象
    var person = new Object();
    //给对象设置属性并赋值
    person.name = "铁蛋";
    person.age = 12;
    person.gender = "男";
    
    //给对象定义方法
    person.eat = function() {
      document.write(this.name + "在吃饭" + "<br>");
    }

    person.showInfo = function() {
      document.write("姓名:" + this.name + "年龄:" + this.age + "性别:" + this.gender);
    }
    //调用对象中的属性和方法
    document.write(person.name + "<br>");
    document.write(person.age + "<br>");
    document.write(person.gender + "<br>");

    person.eat();
    person.showInfo();
</script>

1.3.5.2 通过工厂模式创建对象

//使用工厂模式构建对象
function createObject(name,age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.showInfo = function(){
        document.write("姓名:" + this.name + "年龄:" + this.age + "<br>");
    }
    return obj;
}
//通过工厂函数构建对象
var s1 = createObject("张三",12);
console.log(s1.name);
console.log(s1.age);
s1.showInfo();
var s2 = createObject("李四",18);

1.3.5.3 使用自定义构造函数调用对象

//使用自定义构造函数创建对象
function Person(name,age) {
    this.name = name;
    this.age = age;
    this.show = function() {
        document.write("姓名:" + this.name + "年龄:" + this.age + "<br>");
    }
}
//通过构造函数创建对象
var p1 = new Person("铁蛋",2);
p1.show();
var p2 = new Person("铁柱",4);
p2.show();

1.3.5.4 使用原型的思想构建对象

//使用原型的方式构建对象  prototype
function Cat(){

}
//通过原型prototype给对象赋值
Cat.prototype.name = "大橘";
Cat.prototype.color = "橘色";
Cat.prototype.age = 2;
Cat.prototype.showCat = function(){
    console.log("姓名:" + this.name + " 年龄:" + this.age + "颜色:" + this.color);
}
//使用对象的属性和方法
var cat = new Cat();
console.log(cat.name + "  " + cat.age + "  " + cat.color);
cat.showCat();

1.3.5.5 使用字面量的方式创建对象（重点）

var student = {
    name:"小明",
    age:12,
    study:function(){
        console.log(this.name + "在学习JAVA......");
    },
    showInfo:function() {
        console.log("姓名:" + this.name + " 年龄:" + this.age);
    }
}
student.study();
student.showInfo();

在js中，我们经常会遇到一种数据格式，这种数据格式就是{k1:v1,k2:v2,k3:v3....}。这种格式的数据我们称为json数据，这种json数据本质上也是一个js对象。

<script  type="text/javascript">
    //json的格式  {k1:v1,k2:v2,k3:v3....}
    var jsonObj = {
        name:"kobe",
        age:12,
        gender:"男"
    };
	//获取json对象里的属性
    console.log(jsonObj.name + "  " + jsonObj.age + "  " + jsonObj.gender);
	//通过for in循环遍历json对象里面的属性
    for(index in jsonObj){
        console.log(jsonObj[index]);
    }
</script>

练习：js中值传递和引用传递

<script type="text/javascript">
    var num = 10;
    function x(num) { // num是一个拷贝,它传递的不是num本身 这就是一个值传递
      num = 100;
    }
    x(num);
    document.write(num);//10 值没有发生变化

    var obj = {
        name:"铁柱"
    }
    function change(obj) {// 引用类型的传递
      obj.name = "铁蛋";
    }
    change(obj);
    console.log(obj);//值发生了变化
</script>

1.4 事件

什么是事件：事件就是用户通过某种动作或行为(单击、双击、鼠标悬停、表单提交、打开网页等)触发js代码。

事件的三大要素：

事件源：事件需要在哪个HTML元素上触发。

事件本身：单击、双击、获取焦点、失去焦点、鼠标移入移出等

事件处理程序：完成事件触发效果需要执行的js代码。

1.4.1 单击事件–onclick

需求1：单击按钮，触发一个弹框效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!--<input type="button" value="按钮" οnclick="showMessage()"> -->
    <input type="button" value="按钮" id="btn">
</body>
<script type="text/javascript">
    /*function showMessage(){
        alert("hello world....");
    }*/
    
    var btnObj = document.getElementById("btn");
    btnObj.onclick = function(){
        alert("hello world....");
    }
</script>
</html>

需求2：单击按钮，生成新的按钮。

<body>
    <input type="button" value="按钮" onclick="createButton()">
</body>
<script type="text/javascript">
    var i= 1;
    function createButton(){
        //创建一个按钮对象
        var buttonObj = document.createElement("input");
        //给创建好的按钮对象设置属性
        buttonObj.setAttribute("type","button");
        buttonObj.setAttribute("value","按钮"+i);
        i++;
        //在body标签里面追加创建好的按钮对象
        var bodyObj = document.getElementsByTagName("body")[0];
        bodyObj.appendChild(buttonObj);
    }
</script>

1.4.2 鼠标的移入移出事件

鼠标移入事件：onmouseover

鼠标移出事件：onmouseout

需求1：当前系统时间的显示和清除

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <span onmouseover="showTime()" onmouseout="clearTime()">显示当前系统时间:</span>
    <span id="s1"></span>
</body>
<script type="text/javascript">

   function getCurrentTime() {
     var date = new Date();
     var currentTime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + "&nbsp;&nbsp;"
     + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
     var spanObj = document.getElementById("s1");
     spanObj.innerHTML = currentTime;
   }

   var id = 0;
   function showTime(){
       id= window.setInterval("getCurrentTime()",1000);//定时器 让指定的方法每隔1000毫秒就触发1次
   }

   function clearTime(){
       window.clearInterval(id);//通过定时器的id来清除定时器的功能
       var spanObj = document.getElementById("s1");
       spanObj.innerHTML = "";
   }
</script>
</html>

需求2：鼠标移入移出 div的颜色发生变化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div#box1{
        width: 200px;
        height: 200px;
        border:1px solid red;
    }
</style>
</head>
<body>
   <div id="box1" onmouseover="showColor()" onmouseout="clearColor()"></div>
</body>
<script type="text/javascript">

    var divObj = document.getElementById("box1");

    function showColor() {
        //给标签对象设置样式 -- 设置背景颜色
        divObj.style.backgroundColor = "orangered";
    }

    function clearColor() {
        divObj.style.backgroundColor = "skyblue";
    }
</script>
</html>

1.4.3 获取焦点失去焦点事件

获取焦点事件：onfocus

失去焦点事件：onblur

需求：用户获取焦点或失去焦点的时候，给出对应的提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    用户名: <input type="text" id="username" onfocus="showusername()" onblur="checkusername()"><span id="s1"></span><br>
    密码: <input type="password" name="password"><span id="s2"></span><br>
</body>
<script type="text/javascript">

    //获取焦点事件
    function showusername(){
        var spanObj1 = document.getElementById("s1");
        spanObj1.innerHTML = "请输入用户名,用户名的长度必须在4-10位之间".fontcolor("green");
    }

    //失去焦点事件
    function checkusername() {
        var usernameObj = document.getElementById("username");
        var spanObj1 = document.getElementById("s1");
        //获取用户名输入框里面的值
        var username = usernameObj.value;
        if(username.length >=4 && username.length <=10){
            spanObj1.innerHTML = "用户名输入正确".fontcolor("green");
        }else{
            //让鼠标光标自动切换进输入框,并且将输入的内容清除
            usernameObj.focus();//让html对象获取焦点
            usernameObj.value = "";//清空输入框里面的值
            spanObj1.innerHTML = "用户名输入有误".fontcolor("red");
        }
    }
</script>
</html>

1.4.4 下拉框区域改变事件

onchange描述下拉框区域改变事件。

需求：实现省市联动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <select name="" id="area">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gd">广东</option>
    </select>
    <select name="" id="city">
        <option value="hd">海淀区</option>
        <option value="cy">朝阳区</option>
        <option value="xc">西城区</option>
    </select>
</body>
<script type="text/javascript">
    var areaObj = document.getElementById("area");
    var cityObj = document.getElementById("city");
    areaObj.onchange = function(){
        //获取id为area的select下拉框的value值
        var areaValue = areaObj.value;
        switch(areaValue){
            case "bj":
                cityObj.innerHTML = "<option value='hd'>海淀区</option><option value='cy'>朝阳区</option><option value='xc'>西城区</option>";
                break;
            case "sh":
                cityObj.innerHTML = "<option value='hp'>黄浦区</option><option value='pd'>浦东新区</option><option value='hk'>虹口区</option>";
                break;
            case "gd":
                cityObj.innerHTML = "<option value='gz'>广州市</option><option value='sz'>深圳市</option><option value='zh'>珠海市</option>";
                break;
            default:
                alert("error!!!");
                break;

        }
    }
</script>
</html>

1.4.5 窗体加载事件

窗体加载事件：onload

需求：当浏览器窗口一打开的时候，立即显示div标签里面的文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      div#box{
           width: 200px;
           height: 200px;
           background-color: orange;
      }
  </style>
</head>
<body>
   <div id="box"></div>
</body>
<script type="text/javascript">
    window.onload = function(){//窗体加载事件
        document.getElementById("box").innerHTML = "box";
    }
</script>
</html>

1.4.6 键盘事件

keydown：在键盘上按下某个键时触发。

keypress：按下某个键盘键并释放时触发。

keyup：释放某个键盘键时触发。

案例：按住上下左右键，使div不断移动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
       <div id="box"></div>
</body>
<script type="text/javascript">
    var divObj = document.getElementById("box");
    //设置样式属性
    divObj.style.width = "50px";
    divObj.style.height = "50px";
    divObj.style.backgroundColor = "orangered";
    //设置绝对定位
    divObj.style.position = "absolute";
    //注册一个按键事件
    document.onkeydown = function(event){// 上箭头38 右箭头39 下箭头 40 左箭头 37
       switch(event.keyCode){//获取键盘按键的键码值
           case 37: //左
               divObj.style.left = divObj.offsetLeft -5 + "px";
               break;
           case 38: //上
               divObj.style.top = divObj.offsetTop - 5 + "px";
               break;
           case 39://右
               divObj.style.left = divObj.offsetLeft + 5 + "px";
               break;
           case 40://下
               divObj.style.top = divObj.offsetTop + 5 + "px";
               break;
       }
    }
</script>
</html>

1.4.7 阻止事件的默认行为和传播行为

1.4.7.1 阻止事件的默认行为

比如a标签内置有跳转的行为，这就是事件的默认行为。如何阻止事件的默认行为呢?

window.event.returnValue = false ; --如果浏览器是ie浏览器
e.preventDefault(); -- 其他浏览器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <a href="https://www.qq.com" onclick="fn(event)">[跳转到]</a>
</body>
<script type="text/javascript">
    function fn(e) { // event事件对象
      if(e && e.preventDefault){//非ie浏览器
          e.preventDefault();
      }else{// ie浏览器
          window.event.returnValue = false;
      }
    }
</script>
</html>

1.4.7.2 阻止事件的传播行为

window.event.cancelBubble = true -- ie浏览器
e.stopPropagation(); -- 其他浏览器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div#box1{
        width: 400px;
        height: 400px;
        background-color: orangered;
    }

    div#box2{
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
  </style>
</head>
<body>
    <div id="box1" onclick="fn1()">
        <div id="box2" onclick="fn2(event)"></div>
    </div>
</body>
<script type="text/javascript">
    function fn1(){
        alert("box1");
    }

    function fn2(e) {
      if(e && e.stopPropagation){ //非ie浏览器
          e.stopPropagation();
      }else{
          window.event.cancelBubble = true;
      }
      alert("box2");
    }
</script>
</html>

1.5 BOM编程

BOM 操作是指操作浏览器相关的内容，其操作范畴包括了：浏览器滚动条、页面历史会退和前进、开启新标签页和关闭当前标签页等。

BOM 全名为 Browser Object Model，是一整套操作浏览器相关内容的属性和方法，这些方法可以用于操作浏览器历史记录、滚动条、页面跳转、标签页的开启和关闭等。

1.5.1 window对象

window内置对象是对整个浏览器窗口进行描述。

常用的方法：

确认框：confirm();

<script type="text/javascript">
    //弹出一个确认框 返回值是boolean值.点击确定返回为true 点击取消返回为false.
    var flag = window.confirm("确认要删除吗?")
    console.log(flag);
</script>

提示框：alert();

<script type="text/javascript">
	window.alert("hello");
</script>

输入框：prompt();

<script type="text/javascript">
     //输入框,返回值就是用户输入的内容
     var result = window.prompt("请输入姓名:");
     console.log(result);
</script>

打开新的网页标签: open();

<script type="text/javascript">
     // 打开一个新的网页标签，并且根据指定url进行访问
     window.open("https://www.qq.com");
</script>

定时器：setTimeOut(函数，毫秒值)。在指定的时间到了之后，执行对应的函数，但是只会执行1次。

需求：3秒钟之后出发弹框操作。

<script type="text/javascript">
    function open(){
        alert("hello");
    }
    window.setTimeout("open()",3000);
</script>

清除定时器: clearTimeOut()。专门清除setTimeOut触发的定时函数。

需求：定义一个计时器，点击开始就递增，点击结束，就停止递增。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <input type="button" value="开始" onclick="start()"> <span id="s1"></span>
    <input type="button" value="结束" onclick="end()">
</body>
<script type="text/javascript">
   var i = 1;
   var id = 0;
   function start() {//递归调用
     document.getElementById("s1").innerHTML = i;
     i++;
     id = window.setTimeout("start()",1000);
   }

   function end(){
       window.clearTimeout(id);
   }
</script>
</html>

定时器函数:setInterval(函数,毫秒值)：每隔指定时间执行当前函数。

需求1：需求动态显示当前系统时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span id="span2"></span>
</body>
<script type="text/javascript">
    /**定时器函数:setInterval(函数,毫秒值)：每隔指定时间执行当前函数。
     需求1：需求动态显示当前系统时间。
     需求2：动态的新增表格里面的内容*/
    var span2 = document.getElementById('span2')
    span2.innerText=time();
    setInterval(function () {
        span2.innerText=time();
    },1000);
    function time() {
        var date = new Date();
        var Month = date.getMonth();
        if (Month<10){ Month = '0'+Month}
        var Dates = date.getDate();
        if (Dates<10){ Dates = '0'+Dates}
        var Hours = date.getHours();
        if (Hours<10){ Hours = '0'+Hours}
        var Minutes = date.getMinutes();
        if (Minutes<10){ Minutes = '0'+Minutes}
        var Seconds = date.getSeconds();
        if (Seconds<10){ Seconds = '0'+Seconds}
        var times = date.getFullYear()+'-'+Month+'-'+Dates
            +'  '+Hours+":"+Minutes+":"+Seconds;
        console.log(222)
        return times;
    }
    /** 需求2：动态的新增表格里面的内容  */
</script>
</html>

需求2：动态的新增表格里面的内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <table id="tb"  bgcolor="orange" width="400px"  align="center" cellpadding="1" cellspacing="1">
        <tr align="center" bgcolor="white">
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>人品</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
  var i = 1;
  function addColumn() {
    var tbObj = document.getElementById("tb");
    var trObj = document.createElement("tr");
    trObj.setAttribute("align","center");
    trObj.setAttribute("bgcolor","white");
    //var trObj = document.createElement(" <tr align='center' bgcolor='white'><td>测试数据</td><td>测试数据</td><td>测试数据</td><td>测试数据</td></tr>");
    trObj.innerHTML = "<td>张三"+i+"</td><td>年龄"+i+"</td><td>地址"+i+"</td><td>人品"+i+"</td>";
    i++;
    tbObj.appendChild(trObj);
  }

  window.setInterval("addColumn()",1000);
</script>
</html>

需求3：倒计时效果，当倒计时结束之后，页面跳转。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  注册成功,<span id="s1">5</span>秒之后跳转，如不跳转，请点击<a href="https://www.qq.com">[跳转到]</a>
</body>
<script type="text/javascript">
    var time = 5;
    function getTime(){
        var spanObj = document.getElementById("s1");
        if(time >=1){
            spanObj.innerHTML = time;
            time--;
        }else{
            location.href = "https://www.qq.com";//通过浏览器地址栏进行跳转
        }
    }
    window.setInterval("getTime()",1000);
</script>
</html>

清除定时器: clearInterval() 专门清除setInterval触发的定时函数。

需求：点击开始按钮，动态显示当前系统时间，点击暂停按钮，停止时间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <input type="button" value="开始" onclick="showTime()"><span>当前系统时间是:</span><span id="s1"></span>
    <input type="button" value="暂停" onclick="clearTime()">
</body>
<script type="text/javascript">

   function getCurrentTime() {
     var date = new Date();
     var currentTime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + "&nbsp;&nbsp;"
     + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
     var spanObj = document.getElementById("s1");
     spanObj.innerHTML = currentTime;
   }

   var id = 0;
   function showTime(){
       id= window.setInterval("getCurrentTime()",1000);//定时器 让指定的方法每隔1000毫秒就触发1次
   }

   function clearTime(){
       window.clearInterval(id);//通过定时器的id来清除定时器的功能
   }
</script>
</html>

1.5.2 location对象和history对象

location:浏览器地址栏对象。

location.href():

<script type="text/javascript">
    location.href = "https://www.qq.com";
</script>

reload:重新加载网页资源

location.reload():

location.reload();// 从浏览器缓存里面加载
location.reload(true); //从服务器里面加载

hostory.back() 后退

history.forward() 前进

history.go(1) 前进

history.go(-1) 后退

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
   这是第二页, <a href="page3.html">下一页</a>, <a href="page1.html">上一页</a>
   <!--
   <input type="button" value="上一页" οnclick="history.go(-1)">
   <input type="button" value="下一页" οnclick="history.go(1)">  -->
   <input type="button" value="上一页" onclick="history.back()">
      <input type="button" value="下一页" onclick="history.forward()">
</body>
</html>

1.6 DOM

DOM(document object model):文档对象模型。DOM描述了一个层次化的树，这棵树由很多节点(node)组成,允许我们对这棵树中的节点进行添加、删除、修改。我们通过document对象来描述整颗文档树。

下面我们通过document来对文档树进行相关的操作:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com">[超链接1]</a>
    <a href="https://www.qq.com">[超链接2]</a>
    <a href="https://www.sina.com.cn">[超链接3]</a>  <br>
    <img src="C:\Users\kriss\Pictures\Saved Pictures\AudiA7.jpg" alt="">
    <img src="C:\Users\kriss\Pictures\Saved Pictures\AudiA8.jpg" alt="">
    <br>
    <form action="#" method="post">
        用户名: <input type="text" name="username"> <br>
        密码: <input type="password" name="password"> <br>
        <input type="submit" value="提交">
    </form>
</body>
<script type="text/javascript">
    //获取dom树
    var dom = window.document;
    function findDom(){
         var arrDom = dom.all;//通过dom树获取所有的节点的数组对象
         for(var i = 0;i<arrDom.length;i++){
             console.log(arrDom[i].nodeName);//nodeName  通过节点对象获取节点的名称
         }
    }
    //调用方法
    findDom();

    //获取超链接
    function findLinks(){
        var arrLinks = dom.links;
         for(var i = 0;i<arrLinks.length;i++){
             var aObj = arrLinks[i];//获取节点对象
             var value = aObj.href;//获取节点对象的href属性值
             console.log(value);
         }
    }
    findLinks();

    //获取img标签
    function findImgs(){
        var imagesArr = dom.images;
        for(var i = 0;i<imagesArr.length;i++){
            var imgObj = imagesArr[i];
            console.log(imgObj.src);
        }
    }
    findImgs();

    //获取表单
    function findForms(){
       var formArr = dom.forms;
       console.log(formArr.length);
       console.log(formArr[0].nodeName);
    }
    findForms();
</script>
</html>

1.6.1 获取节点对象

document.getElementById(“HTML元素的id值”);

document.getElementsByTagName(“标签名称”);

document.getElementsByName(“标签元素的name属性值”);

document.getElementsByClassName(“class属性值”)；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
   <div id="box"></div>

   <p>段落1</p>
   <p>段落2</p>
   <p>段落3</p>

   <input type="text" name="username" value="eric"> <br>

   <div class="box2">div1</div>
   <div class="box2">div2</div>
</body>
<script type="text/javascript">
    //根据标签的id值获取节点对象的集合
    var divOj = document.getElementById("box");
    console.log(divOj.id);

    //根据标签名称获取节点对象的集合
    var pArrs = document.getElementsByTagName("p");
    for(var i = 0;i<pArrs.length;i++){
        var pObj = pArrs[i];
        console.log(pObj.innerHTML);//获取节点对象的文本内容
    }

    //根据标签的name属性值获取对应的节点对象
    var inputArrs = document.getElementsByName("username");
    for(var i = 0;i<inputArrs.length;i++){
        var inputObj = inputArrs[i];
        console.log(inputObj.value);
    }

    //根据class属性值获取对应的节点对象
    var divs = document.getElementsByClassName("box2");
    for(var i = 0;i<divs.length;i++){
        var divObj = divs[i];
        console.log(divObj.innerHTML);
    }
</script>
</html>

案例1：获取任意一个节点对象的子节点的nodeName、nodeType、nodeValue。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div id="box1">
        <span id="s1">span1</span>
        <div id="box2">box2</div>
        <!--hello-->
    </div>
</body>
<script type="text/javascript">
    var divObj = document.getElementById("box1");
    var arr = divObj.childNodes;
    for(var i = 0;i<arr.length;i++){
        var obj = arr[i];
        console.log("节点名称: " + obj.nodeName + "  节点类型: " + obj.nodeType + "  节点的值:" + obj.nodeValue);
    }
</script>
</html>

nodeType:描述节点的类型类型是数字编号的。

nodeType:1 描述的就是普通的HTML节点(div span p).

nodeType:3 描述的是空文本节点(元素与元素之间换行了，换的行就是空文本节点)

nodeType:8 描述的是注释节点

案例2：设置复选框的全选和反选状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <div>商品列表</div>
    <input type="checkbox" name="item" value="1000">手机1000元<br>
    <input type="checkbox" name="item" value="2000">手机2000元<br>
    <input type="checkbox" name="item" value="3000">手机3000元<br>
    <input type="checkbox" name="item" value="4000">手机4000元<br>
    <input type="checkbox" name="item" value="5000">手机5000元<br>
    <input type="checkbox" name="item" value="6000">手机6000元<br>
    <input type="checkbox" name="all" onclick="checkAll()">全选 <br>
    <input type="button" value="总金额" onclick="getSum()">
    <span id="s1"></span>
</body>
<script type="text/javascript">
    function checkAll(){
        var checkObj = document.getElementsByName("all")[0];
        var itemsObj = document.getElementsByName("item");
        var flag = checkObj.checked;//复选框的的状态  true 选中状态 false 未选中状态
        if(flag){
            for(var i = 0;i<itemsObj.length;i++){
                itemsObj[i].checked = true; //设置被选中状态
            }
        }else{
            for(var i = 0;i<itemsObj.length;i++){
                itemsObj[i].checked = false; //设置不选中状态
            }
        }
    }

    var sum = 0;
    function getSum(){
      var itemsObj = document.getElementsByName("item");
      for(var i = 0;i<itemsObj.length;i++){
         if(itemsObj[i].checked){
            sum += parseInt(itemsObj[i].value);
         }
      }
      var str = sum + "元";
      document.getElementById("s1").innerHTML = str;
    }
</script>
</html>

1.6.2 通过节点关系查找节点

parentNode 获取当前节点元素的父节点

childNodes 获取当前元素的所有下一级元素

firstChild 获取当前节点的第一个子节点

lastChild 获取当前节点的最后一个子节点

nextSibling 获取当前节点的下一个兄弟节点

previousSibling 获取当前节点的上一个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="box2">盒子2</div>
  <form action="#" id="form1">
    <label>姓名:</label>
    <input type="text">
  </form>
  <div id="box1">盒子1</div>
</body>
<script type="text/javascript">
   var form = document.getElementById("form1");
   var childArr = form.childNodes;
   //alert(childArr.length);
   var first = form.firstChild;//通过父节点获取第一个子节点
   console.log(first);
   var last = form.lastChild;//通过父节点获取最后一个子节点
   console.log(last);
   var next = form.nextSibling.nextSibling; //获取下一个兄弟节点
   console.log(next);
   var previous = form.previousSibling.previousSibling;//获取上一个兄弟节点
   console.log(previous);
</script>
</html>

1.6.3 节点操作–创建新节点

document.createElement(“标签名称”)；创建新元素节点

element.setAttribute(“属性名称”,“属性值”); 设置元素的属性和属性值

element.appendChild(e); 给元素添加子节点，添加到末尾

element.insertBefore(new,child); 将元素添加到child的前面

element.removeChild(child);删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td>
                <input type="button" value="0">
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="添加" onclick="add()">
            </td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    function add(){
        //创建按钮对象
        var inputObj = document.createElement("input");
        //给按钮对象设置属性值
        inputObj.setAttribute("type","button");
        inputObj.setAttribute("value","按钮");
        var bodyObj = document.getElementsByTagName("body")[0];
        //将创建好的按钮对象追加到body标签的内部(body标签内部的末尾处)
        bodyObj.appendChild(inputObj);
    }
</script>
</html>

<script type="text/javascript">    
var i = 1;
    function add(){
        //创建tr节点
        var trObj = document.createElement("tr");
        //创建td节点
        var tdObj = document.createElement("td");
        //创建input节点
        var inputObj = document.createElement("input");
        inputObj.setAttribute("type","button");
        inputObj.setAttribute("value","按钮"+i);
        i++;
        tdObj.appendChild(inputObj);
        trObj.appendChild(tdObj);
        //获取tbody节点对象
        var tbody = document.getElementsByTagName("tbody")[0];
        var button1 = document.getElementById("b1");
        tbody.insertBefore(trObj,button1);
    }
</script>

案例：实现省市联动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <select id="selid" id="" onchange="selectCity()">
        <option value="">---请选择---</option>
        <option value="">北京市</option>
        <option value="">上海市</option>
        <option value="">广东省</option>
    </select>
    <select id="cityid" id="">
        <option value="">---请选择---</option>
    </select>
</body>
<script type="text/javascript">
   function selectCity(){
       var bj = ["海淀区","朝阳区","大兴区","密云区"];
       var sh = ["黄浦区","杨浦区","闵行区","虹口区"];
       var gd = ["广州市","深圳市","珠海市","中山市"];
       var selectNode = document.getElementById("selid");
       var cityNode = document.getElementById("cityid");
       var index = selectNode.selectedIndex;
       //console.log(index);
       if(index == 1){
           cityNode.options.length = 0;//清除select下拉框里的option
           for(var i = 0;i<bj.length;i++){
               var optionObj = document.createElement("option");
               optionObj.innerHTML = bj[i];
               cityNode.appendChild(optionObj);
           }
       }
       if(index == 2){
          cityNode.options.length = 0;//清除select下拉框里的option
          for(var i = 0;i<sh.length;i++){
              var optionObj = document.createElement("option");
              optionObj.innerHTML = sh[i];
              cityNode.appendChild(optionObj);
          }
       }
       if(index == 3){
         cityNode.options.length = 0;//清除select下拉框里的option
         for(var i = 0;i<gd.length;i++){
             var optionObj = document.createElement("option");
             optionObj.innerHTML = gd[i];
             cityNode.appendChild(optionObj);
         }
      }
   }
</script>
</html>

案例：动态显示年月日

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    生日:
      <select id="year">
            <option>年</option>
      </select>

      <select id="month">
            <option>月</option>
      </select>
      <select id="day">
            <option>日</option>
      </select>
</body>
<script type="text/javascript">
    //获取year
    function getYear(){
        var yearObj = document.getElementById("year");
        var minYear = 1980;
        var maxYear = new Date().getFullYear();
        for(var i = minYear;i <= maxYear;i++){
            //创建节点
            var optionObj = document.createElement("option");
            optionObj.innerHTML = i;
            optionObj.value = i;
            //追加节点
            yearObj.appendChild(optionObj);
        }
    }

    //获取月份
    function getMonth(){
        var monthObj = document.getElementById("month");
        for(var i = 1;i<=12;i++){
             var optionObj = document.createElement("option");
             if(i < 10){
                  optionObj.innerHTML = "0" + i;
                  optionObj.value = i;
             }else{
                  optionObj.innerHTML = i;
                  optionObj.value = i;
             }
             monthObj.appendChild(optionObj);
        }
        monthObj.onchange = getDay;
    }

    //获取日期
    function getDay(){
        // 1  3  5  7  8 10 12   31天   闰年2月29天 非闰年的是28天  其余的30天
        //闰年:年份可以被4整除但是不能被100整除 或者年份可以被400整除
        //获取用户选定的年和月的值
        var dayObj = document.getElementById("day");
        var optArr = dayObj.childNodes;
        for(var i = optArr.length -1 ; i >= 0 ; i--){
            dayObj.removeChild(optArr[i]);
        }
        var year = document.getElementById("year").value;
        var month = document.getElementById("month").value;
        if(year == ""){
            alert("请选择年");
            return;
        }
        if(month == ""){
            alert("请选择月");
            return;
        }
        //1个月至少有28天
        for(var i = 1;i<=28;i++){
            var opt = document.createElement("option");
            if(i < 10){
                opt.innerHTML = "0" + i;
                opt.value = "0" + i;
            }else{
                opt.innerHTML = i;
                opt.value = i;
            }
            dayObj.appendChild(opt);
        }
        //大月
        var bigMonth = (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12);
        //小月
        var smallMonth = (month == 4 || month == 6 ||  month == 9 || month == 11);
        //闰年
        var runYear = (year % 4 == 0 && year % 100 != 0) || (year % 400 ==0);
        console.log(year + "---" + month);
        if(bigMonth){
            for(var i = 29;i<=31;i++){
                var opt = document.createElement("option");
                opt.innerHTML = i;
                opt.value = i;
                dayObj.appendChild(opt);
            }
        }else if(smallMonth){
            for(var i = 29;i<=30;i++){
                var opt = document.createElement("option");
                opt.innerHTML = i;
                opt.value = i;
                dayObj.appendChild(opt);
            }
        }else if(runYear && month == 2){
            var opt = document.createElement("option");
            opt.innerHTML = 29;
            opt.value = 29;
            dayObj.appendChild(opt);
        }
    }

    function getBirthday(){
        getYear();
        getMonth();
    }

    getBirthday();
</script>
</html>

案例：生成一个验证码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <span id="codeSpan"></span> <a href="#">点击查看</a>
</body>
<script type="text/javascript">
    var datas = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","M","N","O","P"
    ,"Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n"
    ,"o","p","q","r","s","t","u","v","w","x","y","z"];
    var code = "";//保存验证码
    for(var i = 0;i<4;i++){
        var index = Math.floor(Math.random()*(datas.length))
        code += datas[index];
    }
    var codeSpan = document.getElementById("codeSpan");
    codeSpan.style.color = "red";
    codeSpan.style.fontSize = "20px"
    codeSpan.style.backgroundColor = "gray";
    codeSpan.style.textDecoration = "line-through";
    codeSpan.innerHTML = code;
</script>
</html>

1.6.4 正则表达式

正则表达式的格式:

^ 开头

$ 结尾

次数：* 0个或多个 + 1个或多个 ? 0个或1个 {n} 就是n个 {n,m} 最少n个最多m个

通配符: \d 任意的数字 \D 任意的非数字 \s 任意的空白 \S 任意的非空白

. 任意字符(\n除外)

组合： [a-z][0-9]

标志：i 忽略大小写

方法： Regexp.test(message)

案例：使用正则表达式进行表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <form action="success.html" method="post" onsubmit="return checkForm()">
        姓名: <input type="text" name="username" id="username" onfocus="getName()" onblur="checkUserName()"> <span id="s1"> </span>  <br>
        密码: <input type="password" name="password" id="password" onfocus="getPwd()" onblur="checkPassword()"> <span id="s2"> </span>  <br>
        确认密码: <input type="password" name="pwd" id="pwd" onfocus="getConfirm()" onblur="checkConfirm()"> <span id="s3"> </span>  <br>
        邮箱: <input type="text" name="email" id="email" onfocus="getEmail()" onblur="checkEmail()"> <span id="s4"></span>  <br>
        <input type="submit" value="提交">
    </form>
</body>
<script type="text/javascript">

  var s1Obj = document.getElementById("s1");
  var s2Obj = document.getElementById("s2");
  var s3Obj = document.getElementById("s3");
  var s4Obj = document.getElementById("s4");

  //校验用户信息是否输入正确
  // 获取焦点
  function getName(){
      s1Obj.innerHTML = "请输入用户名,用户名4-16位包含数字、字母、下划线、减号".fontcolor("green");
  }

  //失去用户名输入框焦点
  function checkUserName(){
    var username = document.getElementById("username").value;
    var reg = /^[a-zA-Z0-9_-]{4,16}$/;
    if(reg.test(username)){//输入的用户名和正则表达式匹配
        s1Obj.innerHTML = "用户名输入正确".fontcolor("green");
        return true;
    }else{
         s1Obj.innerHTML = "用户名输入格式不正确".fontcolor("red");
        return false;
    }
  }

  //校验密码框
  //获取密码框焦点  ^[a-zA-Z]\w{5,9}$
  function getPwd(){
       s2Obj.innerHTML = "请输入密码以字母开头，长度在6~10之间，只能包含字母、数字和下划线".fontcolor("green");
  }
  //失去密码输入框焦点
  function checkPassword(){
       var password = document.getElementById("password").value;
       var reg = /^[a-zA-Z]\w{5,9}$/;
       if(reg.test(password)){//输入的用户名和正则表达式匹配
           s2Obj.innerHTML = "密码输入正确".fontcolor("green");
           return true;
       }else{
            s2Obj.innerHTML = "密码输入格式不正确".fontcolor("red");
           return false;
       }
  }

  //确认密码
  function getConfirm(){
       s3Obj.innerHTML = "请输入确认密码".fontcolor("green");
  }

  //失去焦点
  function checkConfirm(){
      var password = document.getElementById("password").value;//第一次输入的密码
      var confirmPwd = document.getElementById("pwd").value;//第二次输入的密码
      if(password == confirmPwd){
           s3Obj.innerHTML = "确认密码输入正确".fontcolor("green");
           return true;
      }else{
          s3Obj.innerHTML = "确认密码输入有误".fontcolor("red");
          return false;
      }
  }

  //校验邮箱
  function getEmail(){
       s4Obj.innerHTML = "请输入邮箱".fontcolor("green");
  }

  function checkEmail(){
      var email = document.getElementById("email").value;
      var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if(reg.test(email)){//输入的用户名和正则表达式匹配
         s4Obj.innerHTML = "邮箱输入正确".fontcolor("green");
         return true;
      }else{
         s4Obj.innerHTML = "邮箱输入格式不正确".fontcolor("red");
         return false;
      }
  }

  //校验表单
  function checkForm(){
      if(checkUserName() && checkPassword() && checkConfirm() && checkEmail()){
          console.log(true)
          return true; //允许表单提交
      }else {
          return false; //不允许表单提交
      }
  }
</script>
</html>

2 Jquery

jquery是一个古老的js框架,主要是对原生的js进行了封装，提供了一系列操作DOM元素的方法。让我们更加方便的对DOM进行操作。

2.1 搭建Jquery环境

第一种：在项目中，引入jquery的库文件。

<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

第二种：在线引入。

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

在这里给大家提供一些在线引入jquery的网址
<!-- 官网jquery压缩版引用地址: -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<!-- 百度压缩版引用地址: -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!-- 微软压缩版引用地址: -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

开发第一个jquery程序

<script type="text/javascript">
     $(function(){
         alert("hello,jquery");
     })
</script>

解读：

$(function(){})： jquery的工厂函数。功能类似于window.onload = function(){}

2.2 Jquery选择器

通过Jquery选择器能够帮助我们快速定位到指定的HTML元素，生成一个Jquery对象(你可以理解成原生js的dom对象)。通过这个jquery对象，我们可以对指定元素进行各种dom相关的操作。

Jquery选择器的格式: $(“css选择器”)。

2.2.1 Jquery基本选择器

基本选择器包括id选择类选择器标签选择器。

id选择器 $(“#id的属性值”)

addClass(): 给节点对象添加类样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width:200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("#box").addClass("a");//给id为box的标签添加一个类样式 类样式的名称为a
            var message = $("div#box1").text();//获取值
            console.log(message);
        })
  </script>
</head>
<body>
   <div id="box"></div>
</body>
</html>

标签选择器 $(“标签名称”)

<script type="text/javascript">
    $(function(){
    	$("p").addClass("p"); // 标签选择器
	})
</script>

类选择器 $(“.class属性值”)

<script type="text/javascript">
    $(function(){
    	$(".box2").addClass("a");
	})
</script>

对样式进行操作，还有一些方法 css()

<script type="text/javascript">
    $(function(){
    $("span#s1").css("color","red");//1个样式属性的写法
    $("span#s2").css({"color":"red","background-color":"skyblue"}); //多个样式属性的写法
})
</script>

移除类样式: removeClass(“”);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .box3{
        width: 200px;
        height: 200px;
        background-color: orangered;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div.box3").removeClass("box3");//移除类样式
        })
  </script>
</head>
<body>
  <div class="box3"></div>
</body>
</html>

2.2.2 jquery的高级选择器

并集选择器 $(“选择器1,选择器2,选择器3…”)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div#box1,p#p1").addClass("a");//并集选择器
        })
  </script>
</head>
<body>
     <div id="box1"></div>
     <p id="p1"></p>
</body>
</html>

后代选择器 $(“选择器1 选择器2 选择器3 …”)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div#box2 div#box4").addClass("a");//后代选择器
        })
  </script>
</head>
<body>
    <div id="box2">
        <div id="box3">
            <div id="box4">盒子4</div>
        </div>
     </div>
</body>
</html>

子父级选择器 $(“选择器1 > 选择器2”)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div#box2 > div#box3").addClass("a");//子父级选择器
        })
  </script>
</head>
<body>
     <div id="box2">
        <div id="box3">box3</div>
     </div>
</body>
</html>

相邻兄弟选择器 $(“选择器1 + 选择器2 + 选择器3…”)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div#box1+div").addClass("a");// 相邻兄弟选择器
        })
  </script>
</head>
<body>
     <div id="box1">盒子1</div>
     <div id="box2">盒子2</div>
     <div id="box3">盒子3</div>
     <div id="box4">盒子4</div>
</body>
</html>

通用兄弟选择器 $(“选择器1 ~ 选择器2 ~ 选择器3…”)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div#box1~div").addClass("a");// 相邻兄弟选择器
        })
  </script>
</head>
<body>
     <div id="box1">盒子1</div>
     <div id="box2">盒子2</div>
     <div id="box3">盒子3</div>
     <div id="box4">盒子4</div>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            //$("li:first").css({"color":"red"}); //选择第一个li
            //$("li:last").css({"color":"green"});//选择最后一个li
            //$("li:eq(3)").css({"color":"blue"});//选择编号是3的li 从0开始编号
            //$("li:even").css({"color":"blue"});//从0开始编号 选择偶数编号的li
            //$("li:odd").css({"color":"yellow"});//从0开始编号 选择奇数编号的li
            //$("li:gt(1)").css({"color":"yellow"});// 大于 greater then  
            //$("li:lt(3)").css({"color":"yellow"});// 小于 less then
            $("li:not(:eq(3))").css({"color":"yellow"});
            $(":header").css({"color":"yellow"});// 给所有的h标签设置样式
        })
  </script>
</head>
<body>
   <ul>
       <li>列表1</li>
       <li>列表2</li>
       <li>列表3</li>
       <li>列表4</li>
       <li>列表5</li>
   </ul>
   <h2>标题1</h2>
   <h3>标题2</h3>
   <h4>标题3</h4>
   <h5>标题4</h5>
</body>
</html>

内容选择器

:contains 匹配标签中文本内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div:contains('John')").css({"color":"red"}); //选择div内容中包含John的元素
        })
  </script>
</head>
<body>
    <div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
</body>
</html>

:empty 匹配内容为空的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("td:empty").text("单元格");//给指定的元素设置文本内容
        })
  </script>
</head>
<body>
    <table>
      <tr>
        <td>Value 1</td>
        <td></td>
      </tr>
      <tr>
        <td>Value 2</td>
        <td></td>
      </tr>
    </table>
</body>
</html>

:has 匹配包含某个指定标签的标签对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            $("div:has(p)").addClass("a");
        })
  </script>
</head>
<body>
    <div>
        <p>Hello</p>
    </div>
    <div>Hello again!</div>
</body>
</html>

:parent 匹配包含子元素或者文本的标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
           $("td:parent").css("color","red");//匹配包含文本的td标签
        })
  </script>
</head>
<body>
<table>
  <tr>
    <td>Value 1</td>
    <td></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td></td>
  </tr>
</table>
</body>
</html>

可见性选择器

：hidden 选中隐藏的标签元素

：visible 选中显示的标签元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
           //$("tr:hidden").show();//tr:hidden 匹配隐藏的元素  show()显示隐藏的匹配元素。
           $("tr:visible").hide(); //tr:visible 匹配显示的元素  hide() 隐藏显示的元素

        })
  </script>
</head>
<body>
<table>
  <tr style="display:none">  <!--style="display:none" 隐藏元素-->
      <td>Value 1</td>
  </tr>
  <tr>
      <td>Value 2</td>
  </tr>
</table>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .a{
        width: 200px;
        height: 200px;
        background-color: deeppink;
    }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
            //$("div[id]").addClass("a"); //匹配div中包含id属性的元素
            //$("div[id='test2']").addClass("a");//匹配div中id的属性是test2的元素
            //$("div[id!='test2']").addClass("a");//匹配div中id的属性不是test2的元素
            //$("div[id^='box']").addClass("a");//匹配div中id的属性以box开头的元素
            //$("div[id$='2']").addClass("a");//匹配div中id的属性以2结尾的元素
              $("div[id*='box']").addClass("a");//匹配div中id的属包括box的元素
        })
  </script>
</head>
<body>
     <div>
       <p>Hello!</p>
     </div>
     <div id="test2">元素1</div>
     <div id="box1">盒子1</div>
     <div id="box2">盒子2</div>
</body>
</html>

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
        $(function(){
             // $("ul li:nth-child(2)").css("color","red");//匹配li中第二个li元素
              $("ul li:first-child").css("color","red");//匹配li中第1个li元素
              $("ul li:last-child").css("color","green");//匹配li中最后个li元素
              $("ul li:only-child").css("color","blue");//匹配ul中的唯一的li
        })
  </script>
</head>
<body>
    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>
    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>
    <ul>
        <li>James</li>
    </ul>
</body>
</html>

表单选择器

:input 匹配所有的input控件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
         var arr = $(":input");
        /* for(var i = 0;i<arr.length;i++){
             console.log(arr[i].value);
         }*/
        $(arr).each(function(){
           console.log(this.value); // this 循环遍历的每个元素
        });
     })
  </script>
</head>
<body>
  用户名: <input type="text" value="admin">
  密码:<input type="password" value="123">  <br>
</body>
</html>

:text 选中input输入框的type="text"的控件。

:password 选中密码控件

:radio:checked 获取单选按钮被选中的控件

:checkbox:checked 选中复选框被选中的按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        var value = $(":text").val();//获取juquery对象的value值
        console.log(value);
        var pwd = $(":password").val(); //选中密码框
        console.log(pwd);
        var gender = $(":radio:checked").val();//选中的单选按钮
        console.log(gender);
        var hobbies = $(":checkbox:checked"); //选中复选框
        $(hobbies).each(function() {
          console.log(this.value);
        })
     })
  </script>
</head>
<body>
  用户名: <input type="text" value="admin">
  密码:<input type="password" value="123">  <br>
  性别: <input type="radio" value="man" name="gender" checked> 男
        <input type="radio" value="woman" name="gender">女
  兴趣爱好: <input type="checkbox" value="football" checked> 足球
  <input type="checkbox" value="basketball" checked> 篮球
  <input type="checkbox" value="swimming"> 游泳  <br>
</body>
</html>

表单属性对象

:checked 被选中的单选按钮或者复选框

:selected 被选中的下拉框选项

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
       //jquery中的事件--单击事件
       $("#btn").click(function(){
           var value = $("select option:selected").val();//获取被选中的下拉框
           console.log(value);
       })
     })
  </script>
</head>
<body>
  <select>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
  </select>
  <input type="button" value="提交" id="btn">
</body>
</html>

:disabled 选中不可用的标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
       var username = $("input:disabled").val();
       console.log(username);
     })
  </script>
</head>
<body>
  用户名: <input type="text" value="admin" disabled>
  密码:<input type="password" value="123">  <br>
</body>
</html>

2.3 jquery中的事件

2.3.1 单击事件 click

需求：用户点击button按钮，根据用户输入的内容给出不同的提示信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
         $("input:button").click(function() {
            var username = $("input:text").val();
            if(username.length >= 4 && username.length <= 6){
                $("span#s1").html("用户名输入正确").css("color","green"); // jquery中的链式编程
                //$("span#s1").css("color","green");
            }else{
                $("span#s1").html("用户名输入有误").css("color","red");
                //$("span#s1").css("color","red");
            }
         })
     })
  </script>
</head>
<body>
    <form action="#" method="post">
        用户名: <input type="text" name="username"> <span id="s1"></span> <br>
        <input type="button" value="提交">
    </form>
</body>
</html>

2.3.2 change事件

改变下拉框区域的时候会触发效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("select#s1").change(function(){
            var value = $("select option:selected").val();
            if(value == "bj"){
                $("select#s2").html("");//清空select标签内部的所有内容
                var arr = ["朝阳区","海淀区","西城区","大兴区"];
                for(var i = 0;i<arr.length;i++){
                    $("select#s2").append("<option>"+arr[i]+"</option>");
                }
            }
            if(value == "sh"){
                $("select#s2").html("");//清空select标签内部的所有内容
                var arr = ["黄浦区","虹口区","闵行区","杨浦区"];
                for(var i = 0;i<arr.length;i++){
                    $("select#s2").append("<option>"+arr[i]+"</option>");
                }
            }
            if(value == "gd"){
                $("select#s2").html("");//清空select标签内部的所有内容
                var arr = ["广州市","深圳市","珠海市","东莞市"];
                for(var i = 0;i<arr.length;i++){
                    $("select#s2").append("<option>"+arr[i]+"</option>");
                }
            }
        })
     })
  </script>
</head>
<body>
    <select id="s1">
        <option>--请选择--</option>
        <option value="bj">北京市</option>
        <option value="sh">上海市</option>
        <option value="gd">广东省</option>
    </select>
    <select id="s2">
        <option>--请选择--</option>
    </select>
</body>
</html>

2.3.3 获取焦点失去焦点事件

focus 获取焦点

blur 失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("input:text").focus(function(){//获取焦点
            $("span#s1").html("请输入用户名").css("color","green");
        }).blur(function(){
            var reg  =/^[a-zA-Z]\w{5,10}$/;
            var username = $("input:text").val().trim();
            if(username.length != 0){
                if(!reg.test(username)){
                    $("span#s1").html("用户名输入格式不正确").css("color","red");
                }else{
                    $("span#s1").html("用户名输入正确").css("color","green");
                }
            }else{
                $("span#s1").html("用户名不能为空").css("color","red");
            }
        })  
       //校验密码
     })
  </script>
</head>
<body>
   <form action="#" method="post">
     用户名: <input type="text"> <span id="s1"></span> <br>
     密码: <input type="password"> <span id="s2"></span> <br>
   </form>
</body>
</html>

2.3.4 鼠标移入移出事件

mousemove 鼠标移入 mosueout 鼠标移出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      div#box{
        width: 200px;
        height: 200px;
        border: 1px solid red;
      }
  </style>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
       //鼠标移入移出事件
       $("div#box").mouseover(function() {
            console.log("hello");
            $("div#box").css({"background-color":"orangered"});
       }).mouseout(function() {
           console.log("out");
            $("div#box").css({"background-color":"deepskyblue"});
       })
     })
  </script>
</head>
<body>
   <div id="box">盒子1</div>
</body>
</html>

2.4 Jquery中的DOM操作

append(): 向元素的内部追加新的内容，在元素内部的末尾处追加。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("div#box1").append("<p class='p1'>段落1</p>").append("<p class='p2'>段落2</p>");
     })
  </script>
</head>
<body>
     <div id="box1"></div>
</body>
</html>

appendTo()

第一种：新建一个标签，然后将标签放在指定元素内部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        var box2 = $("div#box2");
        $("<p class='p3'>段落3</p>").appendTo(box2); //将新增的段落3标签追加到box2这个div中。
     })
  </script>
</head>
<body>
     <div id="box1"></div>
     <div id="box2"></div>
</body>
</html>

第二种：将已经存在的标签移动指定标签的内部

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("p#p1").appendTo("div#box2"); //将已经存在的标签移动到指定标签的内部
     })
  </script>
</head>
<body>
     <p id="p1">段落</p>
     <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

prepend() 在元素的内部前置追加内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("div#box").prepend("<div id='box3'></div>"); //前置追加 追加在box1的前面
     })
  </script>
</head>
<body>
    <div id="box">
        <div id="box1"></div>
    </div>
</body>
</html>

prependTo() 将指定的元素前置追加到另外一个元素的内部

第一种：元素存在就是移动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("p").prependTo("#foo");
     })
  </script>
</head>
<body>
    <p>段落</p><div id="foo">盒子1</div>
</body>
</html>

第二种：元素不存在就是创建之后前置追加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("<p class='p1'>段落</p>").prependTo("#foo");
     })
  </script>
</head>
<body>
   <div id="foo">盒子1</div>
</body>
</html>

after() 将指定元素追加到另外一个指定元素的后面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("div#box1").after("<div id='box2'>盒子2</div>");
     })
  </script>
</head>
<body>
   <div id="box1">盒子1</div>
</body>
</html>

before() 将指定元素追加到另外一个指定元素的前面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("div#box1").before("<div id='box0'>盒子0</div>");
     })
  </script>
</head>
<body>
   <div id="box1">盒子1</div>
</body>
</html>

replaceWith() 将所有节点替换成新节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){ 
        $("p").replaceWith("<div>kobe</div>")
     })
  </script>
</head>
<body>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
</body>
</html>

empty() 清空指定元素的所有子节点
remove()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
        $("#box1").empty();// 删除box1内部的所有元素
         $("#box2").remove();  // 删除box2
     })
  </script>
</head>
<body>
   <div id="box1">
       <div id="box2">
            <a href="#">[跳转到]</a>
       </div>
   </div>
</body>
</html>

clone() 元素的复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
       $("div#box1").clone().prependTo($("div#box2"));
     })
  </script>
</head>
<body>
    <div id="box1" onclick="alert('hello')">盒子1</div>
    <div id="box2">盒子2</div>
</body>
</html>

Jquery对象和DOM对象之间互相转换的问题。

var divObj = document.getElementById(“box”) – DOM 对象

var $divObj = $(“div#box1”); – Jquery对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
     $(function(){
       var $divObj = $("div#box"); // jquery对象
       // 将jquery对象转换成js对象  方式1: var obj = jquery对象[0]  var obj = jquery对象.get(0);
       //var divObj = $divObj[0];
       var divObj = $divObj.get(0); //js对象
       divObj.innerHTML = "hello";

       //js对象转换成jquery对象   $(dom对象)
       var pObj = document.getElementById("p1"); // js对象
       var $pObj = $(pObj); //jquery对象
       $pObj.html("段落");
     })
  </script>
</head>
<body>
    <div id="box"></div>
    <p id="p1"></p>
</body>
</html>