JavaScript

############################################################
var
const
onclick
console.log
typeof
alert
prompt
confirm
parseInt()
toString()
indexOf
Number(param)
charCodeAt()
innerHTML
innerText
value
setAttribute
removeAttribute
document.write()
document.getElementById("")
document.getElementsByClassName("")
document.getElementsByTagName("")
setInterval
clearInterval
location.href
oninput
change
prop
attr
onsubmit
this
sibling
append

学习过程：

1. 变量 基础数据类型 运算符
2. if switch while do-while for 函数 作用域
3. 内置对象 { } {“name”:“shibw”}
   array string RegExp Math Date
4. BOM 和 DOM
   BOM 弹框 定时器 history location
   DOM 获取页面元素 修改内容 修改属性 修改样式
5. jQuery
   DOM操作
   数据处理
   事件绑定 $(function{}) $(“parent”).on(“click”,“chlid”,function(){})

JavaScript介绍：

简称JS，主要用来实现网页的动态效果，用户交互及前后端的数据传输等

三部分组成：

1. 核心语法** -ECMAScript 规范了JS 的基本语法
2. 浏览器对象模型 -BOM**
   Brower Object Model ，提供了一系列操作浏览器的方法
3. 文档对象模型 -DOM**
   Ducement Object Model 提供了一系列操作的文档的方法

使用方法：
常用事件： onclick（单击事件）

 例： <！--实现点击按钮在控制台输出-->
 `<button οnclick="console.log('Hello world');">点击</button>` //在控制台输出内容，可以浏览器console查看

2. 文档内嵌。
   使用标签书写JS 代码
   语法：

 *             <script type="text/javascript">
                    alert("网页管理框");              //点击的时候显示 
              </script>

3. 外部链接

<script src="demo.js"></script>         //外置文件 

|
|
|

基础语法

基本语法：

JS 是由语句组成，语句由关键字，变量，常量，运算符，方法组成，分号可以作为语句结束的标志，也可以省略
JS严格区分大小写
注释语法
单行注释 //
多行注释 /* 注释内容 */

JS的变量与常量

1. 变量

作用： 用于存储程序运行过程中可动态修改的数据
语法：使用关键字 var 声明，自定义变量名
var a; //变量声明
a =100; //变量赋值
var b = 200； //声明并赋值
var m,n,k; //同时声明多个变量
var j = 10,c =20; //同时声明并赋值多个变量
命名规范：
变量名，常量名，函数名，方法名自定义，可以由数字字母，下划线， $ 组成，禁止以数字开头
禁止与关键字冲突（var const function if else for while do break case switch return class）
变量名严格区分大小写
变量名尽量见名知意，多个单词组成采用小驼峰；例如"userName"

2. 常量(const )

常量名一般采用大写字母
作用: 存储一经定义就无法修改的数据
语法： 必须声明的同时赋值
const PI = 3.14;

|

数据类型

1. 基本数据类型（简单数据类型）

number 数值类型
整数：1. 十进制表示 var a =100；
2. 八进制 var b = o21； //0位前缀
3. 十六进制 var c = ox35； //结果为十进制的 53
控制台会一律显示十进制

小数点类型
1. 小数点表示 var m = 1.2343；
2. 科学计数法 例： 1.5e3 //e表示10为底，e后面的数值表示10的次方数
1.5e3 等价于 1.5 * 10^3

string 字符串类型
var s = “100”;
var s1 = “张三”;

boolean 布尔类型
只有真和假 ，布尔值可以与number 值 互相转换， true 为 1 ，false 为 0 ；
var isSave = true；
var isChecked = false;

undefind （程序返回的值）
var a；
console.log(a); // undefind

null 空类型（主动使用的）
解除对象引用时使用 null, 表示对象为空

|

2.引用数据类型

主要指对象，函数等

3.检测数据类型

typeof 变量或表达式
typeof （变量或表达式）

例： var n = “asda”；
console.log(typeof n); //string

|

数据类型转换

1.强制类型转换

1. 转换字符串类型 —任意类型 ----string
   方法：toString()
   返回转换后的字符串
   例： var a = 100；
   a = a.toString(); // “100”

2. 转换number类型

Number(param)

例：
console.log(Number(“123”));
console.log(Number(“true”)); // 1
console.log(Number(“null”)); //0
console.log(Number(“undefined”)); // NaN (Not a Number)

3 parseInt(param)

//从数据中解析整数值
例：
console.log(parseInt(“123.456”));

隐式类型转换（自动转换）

1. 当字符串与其他数据类型进行 + 运算时，表示字符串的拼接，不再是数学运算
   转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串

2. 其他情况下，一律将操作数转 number 进行数字运算
   console.log(“10”+1); //"10 " +1 = “101”
   console.log(“10” -1); // 10 -1 = 9

例：
接收用户输入一个数值，将数值加10 后面打印
var num = prompt(“请输入一个数值”);
console.log(num+10)

//假装从服务器获取的数据
var age = 18;
console.log(“QTX的年龄为”+age);

运算符

（1）赋值运算符

= 将右边的值赋给左边变量

（2）算数运算符

" + - * / % "加 减 乘 除 取余

例：
var a = 10
console.log(a+=1)
var a = 10；
a++； // a+=1
a – ; //a -=1

（3）复合运算符

*+= -= =

（4）自增或自减运算符

++ – 变量的自增和自减指的是在自身基础上进行 +1 或 -1的操作

（5）关系运算符/比较运算符

// > < <= >= = =(相等) !=(不相等) = = =（全等） !==（不全等)
返回 true 或 false

（6）逻辑运算符

1. && 逻辑与 条件 1 && 条件2 （and）
   表达式同时成立，最终结果才为true，全1则 1
   例：
   var year = prompt(“请输入一个年份”);
   console.log(year %4 == 0 && year % 100 !=0 || year %400 ==0);

2. || 逻辑或 条件1 || 条件2 （or）
   表达式中只要有一个成立，最终结果即为true; 有1 则 1

3. **逻辑非 ！**条件（not）
   对已有表达式的结果取反
   注意：除零值以外，所有值都为真

（7）三目运算符

语法： 表达式 1 ？ 表示2 ：表达式3；
过程：
判断表达式1 是否成立，返回布尔值
如果表达式1成立，执行表达式2；
如果表达式不成立，执行表达式3；

例：
var a =10;
var b = 20;
a>b?console.log(a):console.log(b);

流程控制

作用：
控制代码的执行顺序
分类

（1）分支、选择结构

if 语句简单if 结构

if （条件表达式）{
表达式成立时执行的代码段
}

例：
var age = prompt(“请输入一个年龄”)
if (age>=18){
alert(‘可以访问’);
};

if esle 多重分支语句 ：

语法：
if (条件1) {
//条件1成立时执行;
}else if (条件2) {
//条件2成立时执行；
}else if （条件3）{
//条件3成立时执行；
}；
例1 ：
var age = prompt(“请输入一个年龄”)
if (age>=18){
document.write(‘可以访问’);} //方法二
// alert(‘可以访问’);} 方法一
else{ //alert(‘访问青少年模式’);
document.write(‘访问青少年模式’);
};

例 2：

var score =prompt("请输入分数")
          if (score>=90){
               document.write("优秀");}
               else if (score>=70){
               document.write("良好");}
               else if (score>=60){
               document.write("及格");}
               else{
             document.write("不及格");
};

switch 语句

语法：
switch（value）{
case 值1：
// value 与值1 匹配全等时，执行的代码段
break; //结束匹配
case 值2：
// value 与 值2 匹配全等时，执行的代码段
break;
case 值3：
// value 与 值3 匹配全等时，执行的代码段
break;
default：
// 所有case匹配失败后默认执行的语句
break;
}

例：

*          var month = prompt("输入月份")
             switch(month){
             case "1":
           alert("31天");
         break;
          case "2":
         alert("29天")
          break;
         default:
       alert("30天");
 }

（2）循环结构

作用: 根据条件，重复执行某段代码

1. while 循环

while （循环条件）{
条件满足是执行的代码段
更新循环变量;
}

例：
var i =0;
while(i<10){
if(i%2==0){
console.log(i);}
i++;
}

2. do-while 循环

do{ 循环体;
更新循环变量
}while(循环条件);

例：
do{
var uname = prompt(“请输入用户名”);
}while(uname !=“admin”){ document.write(“你好”);}

3. for 循环

for (定义循环变量；循环条件；更新循环变量){
循环体;
}

循环控制：

1. break 强制结束循环
2. continue 结束当次循环，开始下一次循环

例：
for (var i = 0;i<10;i++){
console.log(i);
}

break : 强制结束循环
continue ：结束当次循环，开始下一次循环
循环嵌套：
break：，语句可用于跳出循环，跳出循环后，会继续执行循环之后的代码，
用于for · while · switch
continue：语句中端循环中的遍历，当满足条件条件后继续进行下一次遍历

练习：

//求水仙花数
//1000以内的数字 每一位的数字的3次幂的和相加等于原数字
//比如：153 = 13 + 53 + 3**3
//求个位的数字 求十位的数字 求百位的数字

for(var i =100;i<1000;i++){
var ge = i%10;
var shi = parseInt(i/10 %10);
var bai = parseInt(i/100);
if(ge3+shi3+bai**3==i){
console.log(i)
}
}

或

for(var ge=0;ge<10;ge++){
for(var shi = 0;shi<10;shi++){
for (var bai = 1;bai<10;bai++){
if(ge3+shi3+bai**3 ==(bai100+shi10+ge)){
console.log(bai100+shi10+ge)
}
}
}
}

|
|
|

函数

1. 作用
封装一段待执行的代码

2. 语法
//函数声明
function 函数名(参数列表){
函数体
return 返回值;
}
//函数调用
函数名（参数列表）

** 3. 使用**

例（1）：

function fun(name){
document.write("hello "+name);
}
fun(“QTX”)

** 例（2）：**

function myMax(a,b){
// if(a>b){
// return a
// }else{
// return b
// }
return a>b?a:b
}

myMax(10,20)

匿名函数

匿名函数：省略函数名的函数，语法为：
匿名函数自执行
（function （形参）{
}）(实参)；

例：
(function (){
alert(“ok”)
})();

定义变量接收匿名函数
var fn = function () {} ;
fn(); //函数调用

例：

<button id="btn">
    click me!
</button>

    <script>
        var btn =document.getElementById("btn");
btn.onclick = function(){
      alert("hello world");}
    </script>    

作用域

1. 全局变量和全局函数
变量没有定义直接赋值是全局

2. 局部变量/局部函数

3. 作用域

例 ：
var a =1;
function fun(){
a =10;
b = 20;}
fun();
console.log(b)
console.log(a)

|
|

获取多个DOM

获取多个DOM元素和控制属性 （通过class id 标签名）

1. 根据 标签名 获取元素节点列表

var elems = document.getElementsByTagName("");
/*
参数：标签名
返回值：节点列表，需要从节点列表中获取具体的元素节点对象，添加相应下标。
*/

例：
var butt = document.getElementsByTagName(“button”);
console.log(butt[0]);

2. 根据class 属性值获取元素节点列表

var elems = document.getElementsByClassName("");
/*
参数：类名(class属性值)
返回值：节点列表
*/

例：
var div = document.getElementsByClassName(“title”);
console.log(div[0]);

例1：
<ul>
      <li class="first">难度:</li>
       <li class="items">全部</li>
       <li class="items">初级</li>
      <li class="items active">中级</li>
      <li class="items">高级</li>
</ul>
<script>
     var items = document.getElementsByClassName("items")
      for(var i = 0;i<items.length;i++){
      items[i].onclick = function(){
     alert("hello  world");}}
    </script>


例2 ：
使用一个函数调用

```javascript
<body>
<div id="d1"></div>
<p id="p1"></p>
<span id="s1"></span>

<script>
    function $$(id){
        return document.getElementById(id)
    }
    $$("d1").innerHTML = "Hello";
</script>

3. 元素节点对象提供了以下属性来操作元素内容**

innerHTML: 读取或设置元素文本内容，可识别标签语法
innerText：设置元素文本内容，不能识别标签语法
value ： 读取或设置表单控件的值

例：

        <p>
            The open source web server
             that powers more than 400 million websites
         </p>
<script>
       var p = document.getElementsByTagName("p")[0];
        var str = p.innerText;
      console.log(str)      //这里面的内容就是p标签的全部内容 
</script>   

例：

<div>
    <input id="text" type="text">
    <button id="btn1">click me</button>
    <h1 id="show"></h1>
</div>
<script>
var text = document.getElementById("text")  //找文本框
var btn1 = document.getElementById("btn1")  //找按钮
var h1 = document.getElementById("show")    //找h1

btn1.onclick = function(){
   // h1.innerText = text.value;
}
</script>

例2 ：

<ul>
    <li class="first">难度:</li>
    <li class="items">全部</li>
    <li class="items">初级</li>
    <li class="items active">中级</li>
    <li class="items">高级</li>
</ul>
<script>
var items = document.getElementsByClassName("items")
for(let i = 0;i<items.length;i++){
    //使用let声明变量 ，let声明循环变量只能在循环中使用表示当前的变量
    items[i].onclick = function(){
    console.log(this.innerHTML)  
    //this 表示调用函数的当前HTML(dom)对象}}
</script>

4. 获取DOM 树的属性值

elem.getAttribute(“attrname”); // 根据指定的属性名返回对应属性值
elem.setAttribute(“attrname”,“value”); // 为元素添加属性，参数为属性名和属性值
elem.removeAttribute(“attrname”); // 移除指定属性

例如：
div.getAttribute(“class”)
div.setAttribute(“class”,"");
div.setAttribute(“class”,“red”);

例：

<style>
     .red{
       color: red;
     }
</style>
<body>
<div id="content">
       Learn how MemberCentral stabilized its applications
    by replacing hardware load balancers with NGINX Plus.
</div>
<button id="btn">变红</button>
<button id="clear">还原</button>
<script>
    var div =document.getElementById("content")
    var btn =document.getElementById("btn")
    var clear =document.getElementById("clear")
    btn.onclick = function(){
    div.setAttribute("class","red");  //为div 添加class red
    }
    clear.onclick = function(){
      div.setAttribute("class","");  //删除div 的class
      //div.removeAttribute("class");  //和上面效果一样
    }
</script>

简单DOM操作

•        内置对象
  

（1）对象

 例：  
<script>
        var obj = {uname:"QTX",age:18};   //没有带引号是一个js 对象
          console.log(obj.uname,obj.age);
        console.log(obj["age"])
        for(var i in obj){
         console.log(i,obj[i])
      } 
</script>      

例2 ：

var json = {“uname”:“QTX”,“age”:18} // 带双引号 变 json 格式
console.log(json)

（2 ）数组

数组用于存储若干数据，自动为每位数据分配下标，从 0 开始 没有反索引
数组中的元素不限数据类型，长度可以动态调整
动态操作数组元素：根据元素下标读取或修改数组元素，arr[index]
属性和方法
例：
var arr = new Array(1,2,3,4,5);
console.log(arr);

或：

var arr = [1,2,3,4];
console.log(arr);

1. 属性：length 表示数组长度，可读可写
   数组.length //数组长度

var arr = [1,21.3,4,5]
for (var i=0;i<arr.length;i++){
console.log(arr[i]); //遍历数组，遍历数组的全部内容，如果对应索引值为空
}

或
for (var i in arr){ // 遍历数组中全部的值，获取到对应的索引
console.log(i,arr[i]) //i 索引值
}

2. 方法： push (data)
   在数组的末尾添加一个或多个元素，多个元素之间使用逗号隔开
   返回添加之后的数组长度

例:
var arr =[0,1]
arr.push(2,3,4) //末尾添加

pop()
移除末尾元素
返回被移除的元素
例：var last = arr.pop()
console.log(last)

unshift(data)
移除数组的第一个元素
返回被移除的元素
例： arr.unshift(-1) //开始位置添加
console.log(arr)
shift()
移除数组的第一个元素
返回被移除的元素
例：var first = arr.shift()
console.log(arr,first)

splice(index,num) 截取
从数组中添加/ 删除项目
返回被删除的项目
例：
var arr =[1,2,3,4,5,6]
var res = arr.splice(2,2) //从arr索引值为2的位置开始，截取两个值，放在新的数组
var res = arr.splice(2,2,"?","?") //还可以按照位置替换原来的内容
arr.splice(2,0,3,4); //从arr索引值为2的位置开始，截取0个值，添加3,4
console.log(res)
console.log(arr)

toString()
将数组转换成字符串类型
返回字符串结果
例：
var arr = [1,2,3]
console.log(arr.toString()); //“1,2,3”

join(param)
将数组转换成字符串，可以指定元素之间的连接符，如果参数省略，默认按照逗号连接
返回字符串
例：
var arr = [2021,1,3];
console.log(arr.join("/")); // 2021/1/3

reverse（）
反转数组，倒序重排
返回重排的数组，注意该方法直接修改原数组的结构

sort（）
对数组中元素排序，默认按照Unicode编码升序排序
返回重排后的数组，直接修改原有数组
参数：可选，自定义排序算法
例：
var arr = [10,2,5,77,300];
arr.sort();
console.log(arr) // [10, 2, 300, 5, 77]

例： // 自定义升序
var arr = [10,2,5,77,300];
function sortASC(a,b){
return a-b
}
arr.sort(sortASC)
console.log(arr) // [2, 5, 10, 77, 300]

例2：//自定义降序
var arr = [10,2,5,77,300];
function sortDESC(a,b){
return a-b
}
arr.sort(sortDESC)
console.log(arr) // [300, 77, 10, 5, 2]

（3）字符串

(4) 二维数组

数组中的每个元素又是数组

var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作数组元素
var r1 = arr2[0] //内层数组
var num = r1[0]; //值 1
// 简写
var num2 = arr2[1][0]

String对象

定义 ： var str1 = “hello”
循遍：
var str1 = “hello”
for (var i in str1){
console.log(i,str1[i])
}

转换字母大小写

toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串，不影响原始字符串

例：var str1 = “hello”;
console.log(str1.toUpperCase());

获取字符或者字符编码

charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标，可以省略，默认为0

例：
var str1 = “hello”;
console.log(str1.charCodeAt(1)) //101

获取指定字符的下标

indexOf(str,fromIndex)
作用：获取指定字符的下标，从前向后查询，找到即返回
参数：
str 表示要查找的字符串，必填
fromIndex 表示起始下标，默认为 0
返回 ：
返回指定字符的下标，查找失败返回 -1

例：
var str1 = “hello”;
console.log(str1.indexOf(“ll”,3)) //-1
console.log(str1.indexOf(“ll”)) // 2
console.log(str1.indexOf(“ll”,1))

截取字符串

substring(startIndex,endIndex)
作用：根据指定的下标范围截取字符串， startIndex ~ endIndex -1
参数：
startIndex 表示起始下标
endIndex 表示借宿下标，可以省略，省略表示截止末尾
例:
var str1 = “This is a test string”;
console.log(str1.substring(4,10)); // is a

substr(startIndex,len)
作用 ：根据下标截取指定字符串
例：
var str1 = “This is a test string”;
console.log(str1.substr(4,10)); // is a test

例2：

<input id="email" type="text" placeholder="请输入邮箱地址">
<button id="btn">获取用户名和服务商</button>
<table>
    <thead>
    <tr>
        <th>用户名</th>
        <th>服务商</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<script>
    var email = document.getElementById("email");
    var btn = document.getElementById("btn");
    var tbody = document.getElementsByTagName("tbody")[0];
    btn.onclick = function(){
        var str = email.value;
        console.log(str);
        var index = str.indexOf("@");
        var u = str.substring(0,index);
        var f =str.substring(index+1) ;

        var html ='';
        html+="<tr>" ;
        html+='<td>'+u+'<td>';
        html+='<td>'+f+'<td>';
        html+='</tr>';
        tbody.innerHTML = html;
    }
</script>

分割字符串

split(param)
作用：将字符串按照指定的字符进行分割，以数组形式返回分割结果
参数：指定分隔符，必须是字符串中存在的字符，如果字符串不存在，分割失败，仍然返回数组

例：
var email = “shibw@tedu.com”;
console.log(“email.split(”@")") //得到一个数组 [“shibw”, “tedu.com”]
var today = “2020-01-01”
console.log(today.split("-")) // [“2020”, “01”, “01”]

例2 ：

<input id="email" type="text" placeholder="请输入邮箱地址">
<button id="btn">获取用户名和服务商</button>
<table>
    <thead>
    <tr>
        <th>用户名</th>
        <th>服务商</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<script>
    var email = document.getElementById("email");
    var btn = document.getElementById("btn");
    var tbody = document.getElementsByTagName("tbody")[0];
    btn.onclick = function(){
        var str = email.value;
        console.log(str);
        var res = str.split("@");

        var html ='';
        html+="<tr>" ;
        html+='<td>'+res[0]+'<td>';
        html+='<td>'+res[1]+'<td>';
        html+='</tr>';
        tbody.innerHTML = html;
    }

</script>

模式匹配

正则表达式对象 RegExp
RegExp ：Regular Expression
语法：
var reg1 = /微软/ig; 方式1 // 双斜杠里面表示要查询的字符 ig是修饰符
var reg2 = newRegExp(“匹配模式”,“修饰符”)； 这种方法比较好用
正则表达式对象可以接收一个变量
修饰符：i ：ignorecase 忽略大小写
g ：global 全局范围

例：
var reg1 = /this/ig ； //加ig 在后面忽略大小写和全局搜索
var reg2 = new RegExp(“this”, “ig”);
属性：
lastIndex : 可读可写，表示一次匹配的起始索引
方法：
test(str) : 验证字符串中是否存在满足正则匹配模式的内容，存在则返回true，
不存在返回false 参数为要验证的字符串。
例：
var str = “this is a test string” ;
console.log(reg1.test(str)) ;
作用： 借助正则表达式实现字符串中固定格式内容的查找和替换

正则表达式：

字符串方法：
match(regExp/subStr)
作用：查找字符串中满足正则格式或满足指定字符串的内容
返回：数组，存放查找结果

例：
var reg1 = /this/ig;
var str = “this is a test string” ;
console.log(reg1.test(str)) ;
console.log(str.match(str.match(“this”)));
console.log(str.match(str.match(reg1)));

replace(regExp/subStr/newStr)
作用：根据正则表达式或字符串查找相关内容并进行替换
返回：替换后的字符串，不影响原始字符串

例:
var reg1 = /this/i;
var res = str.replace(reg1,“that”);
console.log(res);

例：

<style>
        p>span{
            color:red;
        }
    </style>
</head>
<body>
<input id="key" type="text" >
<button id="btn">查找</button>
<p>
    The open source web server
    that powers more than 400 million websites <br>
    Learn how MemberCentral stabilized its applications
    by replacing hardware load balancers with NGINX Plus.
</p>
<script>
    //1. 用户在文本框中，输入内容点击按钮是，alert显示
    var key = document.getElementById("key");
    var btn = document.getElementById("btn");
    var p = document.getElementsByTagName("p")[0];

    btn.onclick = function (){
    var reg = new RegExp(key.value,"ig"); //将用户的输入变成正则表达式
    var str = p.innerText;

    //检测页面文本是否有符合正则表达式模式的内容
    reg.test(str)?alert("有可匹配的内容"):alert("没有匹配的内容");

    //2. 将找到的所有内容变成红色显示
    //将用户输入的内容找到以后替换成带有span标签的字符串
    //使用str.replace() 把“搜索内容” ==》<span>内容</>span>
    var res = str.replace(reg,"<span>"+key.value+"</span>");
    p.innerHTML = res     //将替换好的字符串放入p中显示
    }
</script>

|
|

(4)Math 对象

1. 定义：Math对象主要提供一系列数学运算的方法
2. 属性
   圆周率：Math.PI
   自然对数：Math.E
3. 方法
   Math.random() ; 生成 0-1 之间的随机数
   Math.ceil(x) ; 对x向上取整，忽略小数位，整数位+1
   Math.floor(x); 对x向下取整，舍弃小数位，保留整数位
   Math.round(x); 对x四舍五入取整数

例：
console.log(Math.random())
console.log(Math.random()) //0-3 之间的随机数
console.log(Math.floor(Math.random()*3)) //向下取整最适合取随机数
console.log(Math.floor(Math.random()*3 +1)) //1 -3 之间的随机数

例：换图片功能

<style>
    ul,li{
    padding:0;
    margin:0;
    }
    ul{
    list-style:none;
    }
    li{
    float:left;
    border:1px solid red;
    }
</style>
<body>
<ul>
    <li><img src="../0.jpg"></li>
    <li><img src="../0.jpg"></li>
    <li><img src="../0.jpg"></li>
    <li><img src="../0.jpg"></li>
    <li><img src="../0.jpg"></li>
</ul>
<script>
    var srcArr = [0,1,2,3,4,5,6,7,8,9]; //0-9随机数组
    var randArr = [];  //保存取出的随机数

    while (randArr.length<5){
        var i = parseInt(Math.random()*10);
        //如果随机数在数组中 就不添加 不在就添加
        if (randArr.indexOf(i)<0){
            randArr.push(i)
        }
    }
    console.log(randArr)
    //通过随机产生的数组，替换页面中图片的路径
    //通过随机数获取路径
    function getImgUrl(num){
        return "../"+num+".jpg"
    }
    var imgs =document.getElementsByTagName("img");
    for (var i=0;i<randArr.length;i++){
       imgs[i].src = getImgUrl(randArr[i])

     //或者以下方法获取随机数值
        function getRandElements(arr,len){-->
<!--            var res = [];-->
<!--            // 打乱数组的顺序-->
<!--            // sort会根据传入的函数的返回值交换两个值的位置-->
<!--            // Math.random()和0.5运算获取随机的正数或负数-->
<!--            // 如果是正数 sort会交换两个值的位置-->
<!--            arr.sort(function(){-->
<!--                return 0.5-Math.random()-->
<!--            })-->
<!--            // 休息：09:55～10:10-->
<!--            // console.log(arr)-->
<!--            // 获取数组前面len个值-->
<!--            for(var i=0;i<len;i++){-->
<!--                res.push(arr[i])-->
<!--            }-->
<!--            return res;-->
<!--        }-->
<!--        getRandElements([0,1,2,3,4,5,6],5)
}

|
|
|

数字对象和日期

1. 创建日期对象
var date2 = new Date(“2011/11/11”);
var date3 = new Date(“2011/11/11 11:11:11”);
例：
var now = new Date(); // 获取现在的时间
console.log(now)
var f = new Date(“2020/1/1 12:00:00”) //设置时间日期 set xxx
console.log(f) //Wed Jan 01 2020 12:00:00 GMT+0800 (中国标准时间)

2. 日期对象方法
getTime() : 读取或设置当前时间的毫秒数
例：
var now = new Date();
var f = new Date(“2020/1/1 12:00:00”)
var leftTime = f -now; //获取当前时间和指定日期对象的时间差(毫秒) 1000ms =1s
//或 var leftTime =f.getTime() - now.getTime()

例2：
//计算当前时间距离今天中午12:00 还有多久
//时：分：秒
var start = new Date();
var end = new Date(“2021/5/1 00:00:00”);
var leftTime =parseInt((end -start)/1000);
var d = parseInt(leftTime/86400)
var h = parseInt(leftTime%86400/3600);
var m = parseInt(leftTime%3600/60)
var s = leftTime%60;
console.log(${d}天 ${h}:${m}:${s})

获取时间分量
getFullYear()
getMonth()
getDate()

例：
var now = new Date();

var y = now.getFullYear() //获取年
var m = now.getMonth() //获取月份 0-11
var d = now.getDate() //获取日期
console.log(${y}/${m+1}/${d}); //得到2021/3/21

now.getDay() //获取星期
now.getHours() //获取小时
now.getMinutes() //获取分钟
now.getSeconds() //获取秒钟

例2 ：

<body>
<h1 id="timeBox"></h1>
<script>
    function addZero(num){
        //接收数字，如果输入的是一位数字补零显示
        return num<10?"0"+num:num+""
    }

    //启动周期性定时器，每隔一秒在页面中显示倒计时
    //时间差为0时，停止定时器 提示用户倒计时结束
    var h1 = document.getElementById("timeBox");
    var timer = setInterval(function(){
    //计算当前时间距离今天中午12:00 还有多久 显示在页面上
    //时：分：秒
    var start = new Date();
    var end = new Date("2021/4/1 00:00:00");
    var leftTime =parseInt((end -start)/1000);
    if (leftTime <=0){
        clearInterval(timer);  //停止定时器
        h1.innerHTML = "活动倒计时结束";
        return    //退出函数
    }

    var d = addZero(parseInt(leftTime/86400));
    var h = addZero(parseInt(leftTime%86400/3600));
    var m = addZero(parseInt(leftTime%3600/60));
    var s = addZero(leftTime%60);
    h1.innerHTML = "活动剩余时间: "+`${d}天 ${h}:${m}:${s}`;
},1000)
</script>
</body>

|
#######################################################################
|

BOM操作

一. BOM对象

1.BOM介绍

BOM 全称为 Browser Object Model ，浏览器对象模型，提供一系列操作浏览器的
属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接
使用，在使用时可以省略书写

2. 对象方法

1. 网页弹框 alert() //警告框
confirm() // 确认框
prompt(“请输入”)

例：
alert(“hello”)
var res = confirm(“确定要删除吗?”)
console.log(res)

2. 定时器

周期性定时器
作用：每隔一段时间就执行一次代码
// 开启定时器：
var timerID = setInterval(function,interval);
function ：需要执行的代码，可以传入函数名； 或匿名函数
interval：时间间隔，默认以毫秒为单位 1s = 1000ms

返回值： 返回定时器的ID，用于关闭定时器

关闭定时器：
// 关闭指定id 对应的定时器
clearInterval (timerID);

例：
//一秒钟执行一次

var timeId = setInterval(function(){
console.log(“hello”);
},1000) //1000毫秒

clearInterval(timeId);

例：

<button id="btn1">启动定时器</button>
<button id="btn2">停止定时器</button>
<script>
    var btn1 =document.getElementById("btn1")
    var btn2 = document.getElementById("btn2")
    var timeId = null;

    btn1.onclick = function (){
        timeId = setInterval(function(){
        console.log("hello");
    },1000)}
    btn2.onclick = function(){
    clearInterval(timeId)
    }
</script>  

一次性定时器

作用：等待多久之后执行一次代码
var timerId = setTimeout(function,timeout); // 开启超时调用：
clearTimeout(timeId); // 关闭超时调用：

例：

<head>
    <meta charset="UTF-8">
    <title>右下角小广告</title>
    <style>
        div{
            width:200px;
            height:300px;
            background-color:red;
            position: fixed;
            right:3px;
            bottom:-301px;
           /* display:none;*/
           transition:all 1s;
        }
        .show{
            bottom:0;
        }
        b{
        font-size:18px;
        }
    </style>
</head>
<body>
<div id="$">
    <b>关闭</b>
</div>
<script>
    //找到b标签 点击移除div 的class show
    var b = document.getElementsByTagName("b")[0];
    b.onclick = function(){
        div.className = "";
        var timer = setTimeout(function(){
        div.setAttribute("class","show")
        },5000)
    }

    //3S之后为div添加class show
    var div = document.getElementById("$");
    var timer = setTimeout(function(){
        div.setAttribute("class","show")
    },3000)
</script>
</body>    

3. 对象属性

window的大部分属性又是对象类型

1. history
作用：保存当前窗口所访问过的URL
属性：length 表示当前窗口访问过的URL数量
方法：
back() 对浏览器窗口的后退按钮，访问前一个记录
forward() 对应前进按钮，访问记录中的下一个URL

2. location
作用：保存当前窗口的地址栏信息（URL）
属性：href 设置或读取当前窗口的地址栏信息 页面跳转
方法：
reload（param）重载页面（刷新）
参数为布尔值，默认为false，表示从缓存中加载，设置为true，强制从
服务器根目录加载

例：

<h1>历史记录1</h1>
<a href="history2.html">百度</a>
<button onclick="history.forward()">前进</button>
<script>
    setTimeout(function(){
        location.href = "http://www.baidu.com"
    },3000)
</script>

//history2.html
<h1>历史记录2</h1>
<a href="history1.html">百度</a>
<button onclick="history.forward()">前进</button>
<button onclick="history.back()">后退</button>

例2：  
<script>
    var url =location.href;
    var data = url.split("?")[1]; //将url按?分割,?前是地址?后是数据
    var datas = data.split("&")  //将data按&分割，获取每一个键值对
    for (var i in datas){
    var res = datas[i].split("=");
    console.log(`${res[0]}的值时${res[1]}`)
    }
</script>

|
|

######################################################################
|

DOM操作

DOM 全称为Document Object Model，文档对象模型，提供操作HTML文档的方法，
（注：每个html文件在浏览器中都视为一篇文档，操作文档实际是操作页面元素）

1. 节点对象

Javescript 会对html文档中的元素、属性、文本、甚至注释进行封装，称为节点
对象，提供相关的属性和方法。

2. 访问节点

元素节点（操作标签）
属性节点（操作标签属性）
文本节点（操作标签的文本内容）
标签属性都是元素节点对象的属性，可以使用点语法访问，例如：
h1.id = “d1”; //set 方法
console.log(h1.id) //get 方法
h1.id = null; /remove 方法

注意:

例：
         <script>
              var div = document.getElementById("d1");
                // div.className = "title";
                div.setAttribute("class",title);        //建议使用这个方法函数
               console.log(div)
              div.removeAttribute("class"); 
              //div.className = "";
              console.log(div)
         </script>

3. 操作元素样式

1. 为元素添加id 、class 属性，对应选择器样式
2. 操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式
   对象中包含CSS属性，使用点语法操作
   p.style.color = “white”;
   p.style.width = “300px”;
   p.style.fontSize= “20px”;
   注意：
   如果CSS属性名包含连接符，使用JS访问时，一律去掉连接符，改为
   驼峰，font-size -> fontSize

例：图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>轮播图</title>
    <style>
        /* 父容器 */
        #sildeBar{
            width: 739px;
            height: 419px;
            position: relative;
        }
        /* 所有要轮播的图片 */
        #sildeBar>img{
            position: absolute;
            top: 0;
            z-index: 1;
            opacity: 0;
            transition: all 0.5s;
        }
        /* 要显示的图片 */
        #sildeBar>img.active{
            opacity: 1;
            z-index: 2;
        }
        /* 左右小箭头 */
        #ll,#rr{
            position: absolute;
            z-index: 6;
            top:50%;
            margin-top: -20px;
        }
        #rr{
            right: 0;
        }
    </style>
</head>
<body>
    <div id="sildeBar">
        <img class="item active" src="./imgs/gm1-6.jpg" alt="">
        <img class="item" src="./imgs/gm2-6.jpg" alt="">
        <img class="item" src="./imgs/gm3-6.jpg" alt="">
        <img class="item" src="./imgs/gm4-6.jpg" alt="">
        <img class="item" src="./imgs/gm5-6.jpg" alt="">
        <div>
            <img id="ll" src="./imgs/l1-6.png" alt="">
            <img id="rr" src="./imgs/r1-6.png" alt="">
        </div>
    </div>
    <script>
        var ll = document.getElementById('ll');
        var rr = document.getElementById('rr');
        // 点击左侧箭头时 向左切换图片
        // 1-->5-->4  3  2  1  5
        var i = 0;//第几张图片
        // 找到当前的i所表示的图片对象  移除class active
        // 找到下一个i所表示的图片对象  添加class active
        var imgs = document.getElementsByClassName('item');
        ll.onclick = function(){
            imgs[i].className = 'item';
            // 求下一个图片的i
            i--;//向左移动索引值
            if(i==-1){
                // 如果是第一张图向左移动 切换到最后一张
                i = imgs.length-1;
            }
            imgs[i].className = 'item active';
        }
        rr.onclick = function(){
            imgs[i].className = 'item';
            i++;
            if(i == imgs.length){
                i = 0;
            }
            imgs[i].className = 'item active';
        }

        // 使用周期性定时器 每隔2s自动向右切换图片
         var timer =setInterval(rr.onclick,2000);

        //鼠标移动到图片或左右小箭头是 停止定时器
        //鼠标移出图片或左右小箭头，启动定时器
        //onmouseover鼠标移入 onmouseout鼠标移出
        var sildeBar = document.getElementById("sildeBar");
        sildeBar.onmouseover = function(){
            clearInterval(timer)
        }
        sildeBar.onmouseout = funcetion(){
            timer =setInterval(rr.onclick,2000);
        }
    </script>
</body>
</html>

|
|

#################################################################
|

jQuery 选择器

查找函数：id 标签 类 群组 后代子代 相邻兄弟 通用兄弟 过滤选择器
操作内容函数：html() text() val()
操作属性 ： attr() prop() removeAttr()
操作样式： addClass() removeClass() css()

1. 介绍

               jQuery 是JavaScript 的工具库，对原生JavaScript的DOM操作，事件处理、包括数据处理
               和Ajax技术等进行封装，提供更完善，更便捷的方法。

2. 使用

（1）引入

先引入jQuery文件，才能使用jQuery语法

（2）工厂函数 -$()

"$()" 函数 用于获取元素节点，创建元素节点或将原生JavaScript 对象转换为jQuery对象，
返回jquery对象。jquery 对象实际是一个类数组对象，包含了一系列jQuery 操作方法。

例：

// $() 获取元素节点，需传入字符串的选择器 
$("h1")
$("#d1")
$(".c1")
$("body,h1,p")
//选择器的特点，与样式选择器一致
                          
<script>
      var div = document.getElementsByTagName("div")[0];
       $(div).html("hello world") js方法  可以转为js对象使用
        var $div = $('div');
      console.log($div)
      $div.html("hello")
    //jq对象中，索引值为0的位置保存着js对象
      $div[0].onclick = function(){
      alert("你好")
                              } 
</script>

（3）原生JavaScript 对象与jQuery对象

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换：
1. 原生 JavaScript 转换jQuery 对象
$(原生对象) ，返回jQuery对象

2. jQuery对象转换为原生JavaScript 对象
方法一：根据下标取元素，取出即为原生对象
var div = $(“div”)[0] ;

方法二：使用jQuery的get(index)取原生对象
var div2 =$(“div”).get(0);

（4）jQuery 获取元素

jQuery通过选择器获取元素，$(“选择器”)
选择器分类：

1. 基础选择器：**

标签选择器：$(“div”)
ID选择器: KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲d1") 类选择器：(".c1")
群组选择器：$(“body,p,h1”)**

2. 层级选择器**

后代选择器: $(“div .c1”)
子代选择器: $("div>span")相邻兄弟选择器：$(“h1+p”) 匹配选择器1后的第一个兄弟元素，同时要求兄弟元素满足选择器2
通用兄弟选择器：$(“h1~h2”) 匹配选择器1后所有满足选择器2的兄弟元素

3. 过滤选择器**，需要结合其他选择器使用

:first 匹配第一个元素 例：$(“p:first”)
:last 匹配最后一个元素 例： $(“p:last”)
:odd 匹配奇数下标对应的元素
:even 匹配偶数下标对应的元素
:eq(index) 匹配指定下标的元素
:lt(index) 匹配下标小于index的元素
:gl(index) 匹配下标大于index的元素
:not(选择器) 否定筛选，除()中选择器外，其他元素

例：

（5）操作元素内容**

html() //设置或读取标签内容，等价于原生innerHTML ，可识别标签语法
text() // 设置或读取标签内容，等价于innerText，不能识别标签
val() // 设置或读取表单元素的值，等价于原生 value 属性

例：
         <script>
           // oninput当用户输入内容是触发的事件
         /*    $("#key")[0].oninput(function(){
              console.log($("#key").val())
         })*/
           //onchange值改变是触发的事件 和oninput功能一样
              $("#key").change(function(){
           //console.log($("#key").val());
                $("h1").text($("#key").val());
                                                })
       </script>

（6）操作标签属性**

1. attr(“attrName”,“value”) // 设置或读取标签属性
2. prop(“attrName”,“value”) // 设置或读取标签属性 通常用这个
   注意：
   在设置或读取元素属性是，attr() 和 prop() 基本没有区别，但是在读取
   或设置表单元素(按钮)的选中状态，必须用prop() 方法，attr() 不会监听按钮选中
   状态的改变，只看标签属性checked是否书写
3. removeAttr(“attrName”) // 移除指定属性

例：
console.log($(“div”).attr(“id”)) //获取属性的值
$(“div”).prop(“id”,“title”)
$("div").attr("id","title")console.log($(“div”).attr(“id”))

例2 ：

<body>
         <input type="text">
          <input id="canLogin" type="checkbox">阅读并同意 <a href="#">协议</a>
         <button id="btn">click me</button>
           <script src="./js/jquery.min.js"></script>
           <script>
          //当按钮被点击时，如果用户勾选同意协议就弹框ok
           //如果用户没有勾选 提示请阅读协议
          $("#btn").click(function(){
          //console.log( $("#canLogin").attr("checked")); //用这个要在input加上checked值默认勾上
          //console.log( $("#canLogin").prop("checked"));
         //prop获取的标签原型内部的属性
         $("#canLogin").prop("checked")?alert("ok"):alert("请阅读协议")
  })
</script>

例3：
<body>
    <form action="#" onsubmit="return checkForm()">
    <div>姓名: <input name="uname" type="text"></div>
   <div>密码: <input name="pwd" type="password"></div>
   <div><input id="canLogin" type="checkbox">阅读并同意 <a href="#">协议</a></div>
   <button id="btn">登录</button>
    <!--    <input id="btn" type="submit" value="登录">-->
    </form>
    <script src="./js/jquery.min.js"></script>
     <script>
         //form表单 数据提交时会检测onsubmit属性的值，如果返回值为false则阻止本次提交
          //如果返回true 允许提交
           function checkCanload(){  //检测复选框是否被选中
                 return $("#canLogin").prop("checked")
                                                          }
                   function checkPassWord(){ //检测密码是否符合规则
                           return true;
                    }
                  function checkUname(){ //检测用户名是否符合规则
                         return true;
                    }
            function checkForm(){     //检测表单能否提交
                        return checkCanload()&&checkUname()&&checkPassWord();
                }
</script>

（7）操作标签样式**

1. 为元素添加id / class 属性，对应选择器样式

2. 针对类选择器，提供操作class属性值的方法
   addClass(“className”) // 添加指定类名
   removeClass(“className”) // 移除指定的类型，如果参数省略，表示清空class属性值

3. 操作行内样式
   css(“属性名”,“属性值”) // 设置行内样式
   css(JavaScriptON对象) // 设置行内样式
   JavaScript 对象：常用数据传输格式

语法：
$(“div”).css{
“width”: “200px”,
“height”: “200px”,
“background-color”: “red”
}

例：

<script>
         $("#title").css("color","red").css("text-align","center");
         $(".item").css("background-color","yellow"); //所有带有item的元素背景颜色 yellow
         $(".item+li").css("font-size","30px").css("color","red") //找到item 类的后面的第一个li 字体放大变红
         $("#title~li").css("text-align","center"); //item 后的所有的li居中
         $("item:first").css("text-align","center");
         $("li:last").css("background-color","pink");
         $("li:eq(3)").css("background-color","pink");  //等于
          $("li:lt(3)").css("background-color","orange"); //小于
          $("li:not(li:first)").css("font-size","20px");  //找到除了第一个以外的所有li
        $("li:not(.item)").css("font-size","20px") //除了item以外的所有li
</script>

例2.

<style>
        ul,li{
            padding: 0;
            margin:  0;
            float: left;
        }
        ul{
           list-style:none;
           border: 1px solid red;
        }
        .first{
            color: red;
            margin: 5px 0;
        }
        .items{
            margin: 5px 50px;
            padding: 0 5px;
            transition: all 0.3s;
        }
        .items:hover{
            background-color: #f00;
            color: #fff;
            cursor: pointer;
        }
        .active{
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>
<body>
<ul>
    <li class="first">难度:</li>
    <li class="items">全部</li>
    <li class="items">初级</li>
    <li class="items active">中级</li>
    <li class="items">高级</li>
</ul>
<script src="./js/jquery.min.js"></script>
<script>
    $(".items").click(function(){
        // $(".items").removeClass("active")
        //$(this).addClass("active") //方法一

        $(this).addClass("active").siblings().removeClass("active") //方法二

       //$(this).toggleClass("active") //方法三
    })
</script>

（8）元素的创建，添加，删除**

1. 创建：使用$(“标签语法”)，返回创建好的元素
var div = $("

") ; //创建元素
div.html(“动态创建”).attr(“id”,“d1”).css(“color”,“red”); //链式调用，设置内容和属性
var h1= $(‘h1 id=“d1”>一级标题’) //创建的同时设置内容，属性和样式

2. 作为子元素添加
$obj.append(newobj); // 在obj 的末尾添加子元素newobj
$obj.prepend(newobj);//作为第一个子元素添加至$obj中

例：
$(“body”).append(‘

hello world

’) //反撇号
$(“body”).prepend(‘

显示的在第一位

’) //现在在第一位

3. 作为兄弟元素添加
**$obj.after(newobj);\ast \ast //在$obj的后面添加兄弟元素
**$obj.before(newobj);\ast \ast //在$obj 的前面添加兄弟元素

例：

<script>
      $("body").append('<div id="title">hello world</div>')  //作为子元素追加
      $("body").prepend('<div>显示的在第一位</div>')
     $("#title").after('<div>hello world下面的兄弟</div>')    //作为兄弟元素追加
     $("#title").before('<div>hello world上面的兄弟</div>')
       $("body").html("nihao");    // 覆盖所有
</script>

4. 移除元素
**$obj.remove();\ast \ast //移除$obj

例：
$(“btn”).click(function(){
$(“title”).remove("")
})

（9）动画效果

1. 显示和隐藏
show(speed,callback)显示
hide(speed,callback)隐藏
speed 可选，规定元素从隐藏到完全可见的速度，默认为0
callback 可选。show函数执行完之后，要执行的函数

2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（只针对块元素）
slideDown(speed,callback) 下拉
slideUp(speed,callback) 上推

3.通过使用淡隐淡现方式显示效果，显示隐藏的被选元素
fadeOut(speed,callback) 淡隐
fadeIn(speed,callback) 淡现

例： 显示和隐藏 .下拉和上推 .淡隐淡现

<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <style>
        div{
             width:200px;
             height:200px;
             background-color:red;
          }
    </style>
</head>
<body>
    <div><img src="../test.jpg" alt=""></div>
    <button class="btn1">隐藏</button>
    <button class="btn2">上推</button>
    <button class="btn3">淡隐</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        //当btn1 被单击时，如果按钮的内容是隐藏  调用hide()隐藏div 将按钮的内容改为显示
        //如果按钮为显示 调用show() 将按钮的内容变为隐藏
         $(".btn1").click(function(){
            if($(this).text()=="隐藏"){
                $("div").hide(3000,function(){
                   $(".btn1").text("显示")
                });
            }else{
                $("div").show(3000,function(){
                    $(".btn1").text("隐藏");
                });
            }
        })

        $(".btn2").click(function(){
            if($(this).text()=="上推"){
                $("div").slideUp(3000,function(){
                   $(".btn2").text("下拉")
                });
            }else{
                $("div").slideDown(3000,function(){
                    $(".btn2").text("上推");
                });
            }
        })

        $(".btn3").click(function(){
            if($(this).text()=="淡隐"){
                $("div").fadeOut(3000,function(){
                   $(".btn3").text("淡现")
                });
            }else{
                $("div").fadeIn(3000,function(){
                    $(".btn3").text("淡隐");
                });
            }
        })
    </script>
</body>

4.动画函数，可以实现自定义动画animate
animate(styles,speed,callback)
styles 必需。规定产生动画效果的CSS样式和值
speed 可选。规定动画的速度。默认是 “normal”

例：自定义动画animate

<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <style>
        #ball{
            width:200px;
            height:200px;
            background-color:orange;
            border-radius:50%;
        }
    </style>
</head>
<body>
<div id="ball"></div>
<script src="./js/jquery.min.js"></script>
<script>
    $("#ball").animate({
        "margin-left":"500px",
        "width":"100px"
        //"color":"red"
    },2000,function(){
       $("#ball").animate({
        "margin-left":"0px",
        "width":"200px"
    },2000,function(){
       $("#ball").fadeOut(2000)
    })
    })
</script>
</body>

**

（10）数据与对象遍历**

1. $(selector).each() 方法规定为每个匹配元素规定运行的函数
   $(selector).each(function(index,element){})
   必需。为每个匹配元素规定运行的函数。
   index - 选择器的index位置
   element 当前的元素

例：
<script>
         //遍历页面元素
        $("li").each(function(index,obj){
         //index是each 函数，传入的当前元素的索引值
        //obj是当前元素
       console.log(index,obj)
      });
</script>

2. **$.each()**函数式框架提供的一个工具类函数，通过它，你可以遍历对象。数组的属性值并进行处理
   $.ecach(object,function(index,data){});
   必需。为每个匹配元素规定运行的函数。
   index - 选择器的index 位置
   element - 当前的元素

例：

<script>
 // 遍历数据格式内容
     var arr = [1,2,3,4];
   $.each(arr,function(i,o){
         console.log(i,o);
    })
// 遍历对象
    var obj = {name:"maria",age:18}
    $.each(obj,function(i,o){
            console.log(i,o)
     })
</script>

（11）jQuery 事件处理

1. 文档加载完毕
原生JavaScript 方法： window.onload
jQuery:
//语法一
$(document).ready(function(){
//文档加载完毕后执行
})

//语法二
$().ready(function(){
//文档加载完毕后执行
})

//语法三
$(function(){
//文档加载完毕后执行
})
区别：
原生onload 事件不能重复书写，会产生覆盖问题；jQuery中对事件做了优化，
可以重复书写ready方法，依次执行

2. 事件绑定方式
事件名称省略on前缀
//on (“事件名称”,function)
$(“div”).on(“click”,function(){}); //新版本使用的多些
//bind(“事件名称”，function)
$(“div”).bind(“click”,function(){}); //1.6.-1.8间的版本
//事件名作为方法名
$(“div”).click(function(){});

3. this表示事件的触发对象，
在jQuery中可以使用，注意转换类型。this为原生对象只能
使用原生的属性和方法，可以使用$(this) 转换为jQuery对象，使用jQuery方法。

实战

<head>
    <meta charset="UTF-8">
    <title>级联下拉菜单</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/data.js"></script>
</head>
<body>
<select name="" id="prov"></select>
<select name="" id="city"></select>
<select name="" id="area"></select>

<script>
    console.log(data);
    //初始化页面结构
    $("#prov").html('<option value="0">请选择</option>')
    $("#city").html('<option value="0">请选择</option>')
    $("#area").html('<option value="0">请选择</option>')
    //显示省份下拉菜单
    $.each(data,function(i,o){
       //console.log(o.provname)   //省份名
        $("#prov").append(`<option value="${o.provId}">${o.provname}</option>`)
    })

    //省份选择完成后，加载省份对应的城市
    $("#prov").on("change",function(){
       //console.log($(this).val())
       //遍历数据 通过值找到当前的省份
       //获取当前省份对应的城市数组，遍历数组的对象添加到页面上
       $.each(data,function(i,o){
           if(o.provId == $("#prov").val()){
               //初始化菜单
               $
               $.each(o.citys,function(i,o2){
                   $("#city").append(`<option value="${o2.cityId}">${o2.cityname}</option>`)
               })
           }
       })

    })
</script>
</body>