前端学习第二阶段：javascript

青旅半醒 2022-05-26 07:38 333阅读 0赞

1. JS代码写在哪里：script里面；写在外部.js后缀文件里面，通过script标签引入；写在标签里面

注意：在引入js文件的script里面，一定不能再写js代码；

标签里面写js代码一般情况下不推荐（在某些插件里面，可能全部都是通过这种方式引入）

script标签的放置位置：

body或者head里面，只要注意一点：如果script里面涉及到操作后面的元素，而script又非得放前面的话，需要加上：window.οnlοad=function()\{//这里再写代码\};

如果说没什么特别的要求，一般script标签放在Body结束之前。

2.写JS代码需要注意什么：

a.严格区分大小写（引号里面是没有这个规则）；b.语句字符都是半角字符；（字符里面可以使用任意字符）；c.某些完整语句后面要写分号；d.代码要缩进，缩进要对齐。

3 系统的三种不同类型弹窗

4.获取元素以及修改内容

a.获取元素方式

独有标签可以直接获取到，例如：document.body           ;             document.title

body里面的结构标签可以用ID名、class名、标签名、name名、选择器获取

document.getElementById()

obj.getElementsByClassName()（通过class名获取，不兼容IE8及以下）

obj.getElementsByTagName()

obj.getElementsByName()

obj.querySelector()（通过选择器获取，不兼容IE7及以下）

obj.querySelectorAll()（通过选择器获取，不兼容IE7及以下）

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
    	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
    	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    	<div id="box"></div>
    	<div class="wrap"></div>
    	<div class="wrap"></div>
    	<div id="alisa">
    		<p class="kk">
    			<i class="fly"></i>
    		</p>
    		<i class="fly"></i>
    	</div>
    	<p></p>
    	<p></p>
    	<script type="text/javascript">
    		//document.title="修改页面title信息";
    		//document.body.innerHTML="<p>修改别的标签的内容，得用innerHTML或者innerText插入内容</p>";
    		//document.body.innerText="<p>innerText与innerHTML的区别是：innerText无法解析p标签</p>";
    		//box.innerHTML="因为id是唯一的，所以可以直接添加内容.(不推荐！)";
    		document.getElementById("box").innerHTML="推荐使用！";
    		//document.getElementsByClassName("wrap").innerHTML="因为class有很多个，所以element需要+s。获取的是确切的某个元素，可以直接操作这个元素";
    		document.getElementsByClassName("wrap")[0].innerHTML="获取的是一堆元素的集合，设置内容时要通过下标（索引/序号）拿到对应的某一个再用";
    		document.getElementsByClassName("wrap")[1].innerHTML="获取第二个类";
    		//alert(document.getElementsByClassName("wrap").length);
    		document.getElementsByTagName("p")[0].innerHTML="通过标签名获取";
    		document.querySelector("#alisa .kk .fly").innerHTML="通过选择器获取，获取第一个对应的元素";
    		document.querySelectorAll("#alisa .fly")[1].innerHTML="通过选择器获取，获取的是一个集合，该选择器下所有对应的元素";
    	</script>
    </body>
    </html>

作业：点击一个盒子之后，变成一个a标签

5.函数+构造函数

默认值+解构赋值，函数的设定与默认值，方法一：

方法二：

最新箭头函数写法：去掉function，后面加一个=>

6.onclick事件

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<script>
    		function myFunction(){
    			document.getElementById("demo").innerHTML="my first javascript function";
    		}
    	</script>
    </head>
    <body>
    	<h1>onclick</h1>
    	<p id="demo">paragraph</p>
    	<button type="button" onclick="myFunction()">try it!</button>
    </body>
    </html>

7.document.write()在文档流关闭之前，给Body部分新增内容；在文档流关闭之后，修改整个HTML的内容。

8.JS里的事件

<body>
    	<div id="box"></div>
    </body>
        <script>
            //事件：响应用户的操作,元素.事件-函数
            //鼠标事件：*左键单击onclick；*左键双击ondbclick；右键单击oncontextmenu；无右键双击。*鼠标移入onmouseover/onmouseenter;*鼠标移出:onmouseout/onmouseleave。鼠标按下onmousedown。鼠标移动onmousemove。鼠标抬起onmouseup。鼠标滚轮onmousewheel
            //键盘事件：按键按下onkeydown,onkeypress;按键抬起onkeyup
            //表单事件：获得焦点onfocus：失去焦点onblur;内容改变onchange...
            //系统事件：加载完成onload;内容滚动onscroll;窗口改变大小onresize
            //函数：有名函数;匿名函数
            //function hanshu(){alert("有名函数");};
            //hanshu();//有名函数可以加括号自执行，执行的位置可以再定义的前面
            //document.getElementById("box").onclick = hanshu;//有名函数可以把名字放到事件后，充当一个事件函数，事件触发的时候执行
            document.getElementById("box").onclick = function(){alert("匿名函数");};
        </script>

9.简单认识

10.定义变量

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    	<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
    	
    	<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
        <style type="text/css">
            #box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
        </style>
    </head>
    <body>
    	<div id="box"></div>
    </body>
        <script>
            //定义变量:规则-1.不能使用关键字或者保留字（js里面已经赋予它有意义的词，或者留着备用的词）2.只能包含数字/字母/_/$，并且不能以数字开头3.严格区分大小写4.尽量见名知意
            var bianliang = document.getElementById('box');
            //添加鼠标点击事件
            bianliang.onclick=function(){
                this.innerHTML="鼠标点击！";
            }
            //添加鼠标移入事件
            bianliang.onmouseenter=function(){
                this.innerHTML="鼠标移入！";
            }
            //添加鼠标移出事件
            bianliang.onmouseleave=function(){
                this.innerHTML="鼠标移出！";
            }
            // var x=1;var y=2;var z=3;
            // alert(x+y+z);
            //用，可以让一个var定义多个变量
            //Var变量时并不要求立马赋值
            var x=10,y=20,z=30;
            alert(x+y+z);
        </script>
    </html>

11.prompt弹窗，document.write()

12.拼接

13.作业

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
        <style type="text/css">
            #box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
    <script>
        var obox1=document.getElementById("box1"),obox2=document.getElementById("box2");
        obox1.onclick=function(){
            this.innerHTML="我被点击了！";
            obox2.innerHTML="#box1被点击了！";
        };
        obox2.onclick=function(){
            this.innerHTML="我被点击了！";
            obox1.innerHTML="#box2被点击了！";
        };
        obox1.onmouseenter=function(){
            this.innerHTML="我被移入了！";
            obox2.innerHTML="#box1被移入了！";
        }
        obox2.onmouseenter=function(){
            this.innerHTML="我被移入了！";
            obox1.innerHTML="#box2被移入了！";
        }
    </script>
    </html>

14.js操作标签属性和自定义属性

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
        <style type="text/css">
            #box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com/" id="box" afei="123">百度</a>
    </body>
    <script>
                /*
                js操作元素的标签属性：
                    符合规范的标签属性：
                        . 符号直接操作（可读可写）
    
                    不规范（自定义）的标签属性：
                        获取：.getAttribute()
                        设置：.setAttribute()
                        移除：.removeAttribute()
    
                    注意：
                        所有的 路径/颜色 获取的结果不一定是你写的内容
                        通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素
                        自定义标签属性的操作方式，同样可以操作符合规范的标签属性
                 */
        var abox=document.getElementById("box");
        alert(abox.getAttribute("afei"));
    </script>
    </html>

15.不规范的属性

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
        <style type="text/css">
            #box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com/" id="box" afei="123">百度</a>
    </body>
    <script>
        // 当元素.操作属性时，假设该属性名称是，规范的标签属性，那么这个操作是针对于标签属性的
                            //假设该属性名称不是，规范的标签属性，那么这个操作就和标签属性没有任何关系
        //访问一个从来没有定义过的变量的时候，会报错
        //访问一个对象从来没有设定过的自定义属性的时候，不会报错，值是undefined
        var obox=document.getElementById("box");
        obox.afei="456";//s对象的自定义属性
        alert(obox.afei);
        //当var没有放在某个函数内部的时候，我们可以理解为window.后面的变量称之为全局变量 ------  var x=10等价于window.x=10;
        //当var处于函数内部的时候，不能理解为window.，后面的变量称之为局部变量
    </script>
    </html>

16.js基础数据类型

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        //数据类型：
        //var a=10;//number数字
        //var a = "20";//string字符串
        //var a = true;//boolean布尔值
        //var a = document;//object对象
        //var a = document.getElementById("box");//object对象
        //var a = [1,2,3,"45"];//object对象
        //var a=[];//object对象
        //var a= null;//object对象,在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型
        //function a(){};//function对象
        //var a;//undefined未定义
        alert( typeof a);
    </script>
    </html>

17.操作样式

控制元素的样式：

外部样式表：js不能操作外部文件

内部样式表：js可以操作，很麻烦，所以不常用。优先级高。

行内样式标签属性：优先级最高。大部分情况下，Js都是通过操作行内样式达到修改样式的目的

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
        <style type="text/css" id="style">
            #box{width:200px;height:200px;background:red;}/*外部样式表*/
        </style>
    </head>
    <body>
        <div id="box" style="background: green;height: 100px;width: 100px;"></div>
    </body>
    <script>
        //var ostyle = document.getElementById("style");
        //ostyle.innerHTML += "#box{width:100px;height:100px;background:pink;}";// 内部样式表
    </script>
    </html>

18.操作样式另外的途径

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        // 操作复合属性时，要注意用驼峰写法（去掉-号，-后面的第一个单词大写）
        var oBox = document.getElementById("box");
        oBox.style.width = "200px";
        oBox.style.height = "200px";
        oBox.style.backgroundColor = "pink";
    </script>
    </html>

19.作业：01-作业-QQ说说发表功能

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="潭州教育-阿飞老师">
            <title>Title</title>
            <style>
                *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
                li{ list-style-type: none;}
                #box{
                    position: relative;
                    width: 500px;
                    height: 140px;
                    margin: 50px auto;
                    background: #ccc;
                    border-radius: 5px;
                    padding-top: 10px;
                }
                #txt{
                    display: block;
                    width: 480px;
                    height: 80px;
                    margin: 0 auto;
                    resize: none;
                    border-radius: 5px;
                }
                #box .img{
                    position: relative;
                    width:40px;
                    height: 40px;
                    border: 1px solid #fff;
                    margin: 7px 0 0 10px;
                    cursor: pointer;
                }
                #box .img img{
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
                #box .btn{
                    position: absolute;
                    bottom:10px;
                    right: 10px;
                    width: 80px;
                    height: 30px;
                    background: #f60;
                    color: #fff;
                    font-size: 12px;
                    line-height:30px;
                    text-align: center;
                    font-weight: bold;
                    border-radius: 5px;
                    cursor: pointer;
                }
                #list{
                    width: 500px;
                    margin: 50px auto;
                }
                #list ul li {
                    overflow: hidden;
                    border-bottom: 1px solid #eee;
                    padding: 5px 0;
                }
                #list ul li img{
                    float: left;
                    width: 40px;
                    height: 40px;
                }
                #list ul li p{
                    float: right;
                    width: 440px;
                    font-size: 12px;
                    text-indent: 2em;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <textarea id="txt"></textarea>
                <div class="img">
                    <img src=images/tx1.jpg style="display: block" alt="">
                    <img src="images/tx3.jpg" alt="">
                </div>
                <div class="btn">发表</div>
            </div>
            
            <div id="list">
                <ul>
                    
                </ul>
            </div>
            <script>
    
                var oBox = document.getElementById("box"),
                    aImg = oBox.querySelectorAll(".img img"),
                    oBtn = oBox.querySelector(".btn"),
                    oUl = document.querySelector("#list ul"),
                    oTxt = document.getElementById("txt"),
                    src = "images/tx1.jpg";
    
                //点击第 1 个img的时候，让第 2 个显示，自己隐藏
                aImg[0].onclick = function () {
                    aImg[1].style.display = "block";
                    this.style.display = "none";
                    src = aImg[1].src;
                };
    
                //点击第 2 个img的时候，让第 1 个显示，自己隐藏
                aImg[1].onclick = function () {
                    aImg[0].style.display = "block";
                    this.style.display = "none";
                    src = aImg[0].src;
                };
    
                //点击发表，往ul里面加内容
                oBtn.onclick = function () {
                    var val = oTxt.value; //获取textarea的内容
                    //if ( val ){
                        oUl.innerHTML += "<li><img src='"+src+"'><p>"+val+"</p></li>";
                        oTxt.value = "";//清空textarea的内容
                    //}
                };
    
            </script>
        </body>
    </html>

20.简单认识数组

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>test</title>
    </head>
    <body>
    	<script>
    		//数组
    		/* var shuzu=[
    	        50,"shuzu",[7,8,9]
    	    ];
    	    alert(shuzu[2][1]);//下标 / 序号 / 索引*/
    	    /* json的属性可以加引号，也可以不加引号
               在用json来传输数据的时候，属性必须加双引号，并且值一般都是字符串*/
            var shuzu={
            	name:"alisa",// 属性可以加""引号，也可以不加，例如此处也可以是"name"
            	age:23,
            	sex:'女',
            };
            alert(shuzu.age);
    	</script>
    </body>
    </html>

21.判断语句

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        /* 条件==>布尔值;判断符：>  <  >=  <=  ==  !=  ===  !==;==只判断值是否一样，===不仅仅判断值，还判断类型是否一样*/
        /* if (3<5) {
            //这里的代码只有当条件为true的时候才执行
        }else{
            //这里的代码只有当条件为false的时候才执行
        }*/
        //第二种写法
        var x = 20;
        if (x>60) {
            alert("x大于60");
        }else if (x>40) {
            alert("x大于40");
        }else if (x>10) {
            alert("x大于10");
        }
        /*当if的条件，运算完后不是布尔值的时候，会被强制性的转换为布尔值。
        ***哪些值，在转换为布尔值的时候为false(数字除了0，其他都为真)
        *   0           (number)
        *   false       (boolean)
        *   ""          (string)
        *   null        (object/null)
        *   undefined   (undefined)
        *   NaN         (number)
    
    
        在if里面，能用布尔值做判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
        在两个值比较的时候，能用三等（===）判断的时候，就用三等判断
        */
    </script>
    </html>

22.if的简写方式

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        /*  */
        var x;
        //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件（）后面
        /*if (3<5) {
            x=10;
        }*/
        //if (3<5) x=10;
        //真语句一行，假语句一行，可以采用三目运算写法
        /*if (5<4) {
            x=10;
        }else{
            x=20;
        }*/
        //5<4?x=10:x=20;//条件？真语句:假语句；
        //当三目的真假语句都是给同一个变量赋值的时候，可以更进一步简写
        x=5<4?10:20//条件5<4为真时，结果是10，条件为假时，结果为20
    </script>
    </html>

23.switch

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        var name = "alisa";
        /*if(name==="alisa"){
            alert(name+"超级美")
        }else if(name === "ACR"){
            alert( name +"超级漂亮！");
        }else if(name === "小粉红"){
            alert( name + "超级可爱");
        }else if(name === "小仙女"){
            alert( name + "巴啦啦小魔仙");
        }else{
            alert("变身！");
        }*/
        //全等
        switch ( name ){
            case "alisa":
                alert( name + "超级美");
                break;
            case "ACR":
                alert( name + "超级漂亮！" );
                break;
            case "小粉红":
                alert( name + "超级可爱" );
                break;
            case "小仙女":
                alert( name + "巴啦啦小魔仙" );
                break;
            default:
                alert( "变身！" );
                break;
        }
    </script>
    </html>

24.图片选项卡切换

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="潭州教育-阿飞老师">
            <title>Title</title>
            <style>
                *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
                li{ list-style-type: none;}
                #box{
                    width: 418px;
                    margin: 50px auto;
                }
                #box .title{
                    overflow: hidden;
                }
                #box .title p {
                    float: left;
                    width: 75px;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 12px;
                    color: #fff;
                    background: #000;
                    margin-right: 5px;
                    cursor: pointer;
                }
                #box .title p.goudan{
                    background: #f60;
                }
                #box .wrap{
                    position: relative;
                    width: 418px;
                    height: 194px;
                    margin-top: 20px;
                }
                #box .wrap .pic{
                    position: relative;
                    width: 100%;
                    height: 100%;
                }
                #box .wrap .pic img{
                    display: none;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
                #box .wrap .pic img.on{
                    display: block;
                }
                #box .info p{
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                    text-align: center;
                    color: #fff;
                    background: rgb(0,0,0);
                    background: rgba(0,0,0,.7);
                }
                #box .info p.infoTop{
                    top: -20px;
                }
                #box .info .infoBot{
                    bottom: -20px;
                }
                #box .btn div{
                    position: absolute;
                    top: 50%;
                    margin-top: -15px;
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    background: rgb(0,0,0);
                    background: rgba(0,0,0,.7);
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                }
                #box .btn div.left{
                    left: 0;
                }
                #box .btn div.right{
                    right: 0;
                }
            </style>
        </head>
        <body>
            <div id="box">
                <div class="title">
                    <p class="goudan">循环切换</p>
                    <p>单边切换</p>
                </div>
                <div class="wrap">
                    <div class="pic">
                        <img class="on" src="./p1.png" alt="">
                        <img src="./p2.png" alt="">
                        <img src="./p3.png" alt="">
                        <img src="./p4.png" alt="">
                        <img src="./p5.png" alt="">
                        <img src="./p6.png" alt="">
                    </div>
                    <div class="info">
                        <p class="infoTop"><span>1</span>/6</p>
                        <p class="infoBot">第<span>一</span>张</p>
                    </div>
                    <div class="btn">
                        <div class="left"> < </div>
                        <div class="right"> > </div>
                    </div>
                </div>
            </div>
            <script>
    
                var aTitle = document.querySelectorAll("#box .title p"),//获取两个切换按钮
                    oWrap = document.querySelector("#box .wrap"),
                    aBtn = oWrap.querySelectorAll(".btn div"),//两个按钮
                    aInfo = oWrap.querySelectorAll(".info p span"),//两个信息条
                    aImg = oWrap.querySelectorAll(".pic img"),//6个图片
                    xx = 0,//用来表示当前显示的是哪个图片
                    length = aImg.length,
                    flag = true, //我们通过flag的真假，来判断当前处于 循环切换（true） 还是 单边切换（false）
                    arr = ["一" , "二" , "三" , "四" , "五" , "六"];
    
                aTitle[0].onclick = function () {
                    this.className = "goudan"; //给自己加名字，以显示颜色
                    aTitle[1].className = ""; //去掉另外一个的名字，以清楚颜色
                    flag = true;
                };
                aTitle[1].onclick = function () {
                    this.className = "goudan";
                    aTitle[0].className = "";
                    flag = false;
                };
    
                //右按钮被点击的时候
                aBtn[1].onclick = function () {
    
                    //先处理前一个
                    aImg[xx].className = ""; //去掉图片的类名
    
                    xx++;//xx = xx + 1;
    
                    //当序号遇到临界值得时候，就会执行这个if
                    if ( xx > length-1 ){
    
                        //判断当前是处于哪种切换状态
                        if ( flag ){
                            xx = 0;//回到初始0
                        }else{
                            alert("已经是最后以一个了！！");
                            xx = length-1;
                        }
    
                    }
    
                    //再处理当前应该显示的
                    aImg[xx].className = "on";//给当前应该显示的添加类名
                    aInfo[0].innerHTML = xx+1;//处理上面的信息条
                    aInfo[1].innerHTML = arr[xx];//处理下面的信息条*/
                };
    
                //左按钮的点击事件
                aBtn[0].onclick = function () {
                    //先处理前一个
                    aImg[xx].className = ""; //去掉图片的类名
    
                    xx--;//xx = xx - 1;
    
                    //当序号遇到临界值得时候，就会执行这个if
                    if ( xx < 0 ){
    
                        //判断当前是处于哪种切换状态
                        if ( flag ){
                            xx = length - 1;//回到最后
                        }else{
                            alert("已经是第一个了！！");
                            xx = 0;
                        }
    
                    }
    
                    //再处理当前应该显示的
                    aImg[xx].className = "on";//给当前应该显示的添加类名
    
                    aInfo[0].innerHTML = xx+1;//处理上面的信息条
                    aInfo[1].innerHTML = arr[xx];//处理下面的信息条
                };
            </script>
        </body>
    </html>

效果图如下：

![70][]

25.for循环

26.do while循环

27.案例一：for循环生成十个div

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            #box div{
                width: 50px;
                height: 50px;
                float: left;
                background: pink;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
            var aDiv = document.getElementById("box");
            for(var i=0;i<10;i++){
                aDiv.innerHTML+="<div class='div "+  i +"'></div>";
            }
        </script>
    </body>
    </html>

28.生成左尖括号的图形

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            #box div{
                width: 50px;
                height: 50px;
                background: green;
                position: absolute;
                color: #fff;
                font-size: 12px;
                text-align: center;
                line-height: 50px;
                font-weight: bold;
            }
            #box{
                border: 1px dashed pink;
                position: relative;
                margin: 50px auto;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <script>
            var oBox = document.getElementById("box"),
                length=8,
                mid=length/2;
            oBox.style.width=(length/2+1)*50+'px';
            oBox.style.height=length*50+'px';
            for(var i=0;i<length;i++){
                if (i<mid) {
                    var oLeft = i*50;
                    var oHeight = i*50;
                }else{
                    var oLeft = (length-1-i)*50;
                    var oHeight = i*50;
                }
                oBox.innerHTML += "<div style='left: "+oLeft+"px;top: "+oHeight+"px;'>"+(i+1)+"</div>";
            }
        </script>
    </body>
    </html>

29.正立和反立的金字塔

<div id="box"></div>
        <script>
            var length=5,oBox=document.getElementById("box");
            //金字塔形*
            /*for (var i = 0;i<length;i++) {
                for(var k=0;k<length-1-i;k++){
                    oBox.innerHTML+=" ";
                }
                for(var j=0;j<2*i+1;j++){
                    oBox.innerHTML+="*";
                }
                oBox.innerHTML+="<br/>";
            }*/
            //倒金字塔形*
            for (var i = 0;i<length;i++) {
                for(var k=0;k<i;k++){
                    oBox.innerHTML+=" ";
                }
                for(var j=0;j<2*(length-1-i)+1;j++){
                    oBox.innerHTML+="*";
                }
                oBox.innerHTML+="<br/>";
            }                                                        
        </script>

30.二级以下下拉菜单

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #box{border: 1px dashed #eee;width: 200px;margin: 50px;}
            #box ul{width: 100%;list-style: none;height: 31px;overflow: hidden;}
            #box ul.show{height: auto;}
            #box ul li{background: #fff;font-weight: bold;font-size: 12px;text-indent: 10px;color: #000;border-bottom: 1px solid #eee;height: 25px;width: 100%;line-height: 25px;cursor: default;}
            #box ul li:hover{background: green;}
            #box ul li.title{background: pink;font-size: 14px;text-indent: 5px;color: #fff;line-height: 30px;height: 30px;cursor: pointer;}
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="show">
                <li class="title">同事</li>
                <li>同事1</li>
                <li>同事2</li>
                <li>同事3</li>
            </ul>
            <ul>
                <li class="title">好友</li>
                <li>好友1</li>
                <li>好友2</li>
            </ul>
            <ul>
                <li class="title">陌生人</li>
                <li>陌生人1</li>
                <li>陌生人2</li>
            </ul>
        </div>
        <script>
            var aUl=document.querySelectorAll("#box ul"),
            aTitle=document.getElementsByClassName('title'),
            length=aTitle.length,
            index=0;
            for(var i=0;i<length;i++){
                //自定义属性
                aTitle[i].goudan=i;
                aTitle[i].onclick=function(){
                    //前一个ul去掉名字
                    aUl[index].className="";
                    //index变成当前序号
                    index=this.goudan;
                    //当前ul添加名字
                    aUl[index].className="show";
                }
            }
        </script>
    </body>
    </html>

31.作业：九九乘法表

![70 1][]

32.复选框

效果图如下：

![70 2][]

<div id="box">
            <p>你最喜欢的英雄</p>
            <ul>
                <li>复选框1</li>
                <li>复选框2</li>
                <li>复选框3</li>
                <li class="newcolor">复选框4</li>
                <li class="newcolor">复选框5</li>
                <li>复选框6</li>
                <li>复选框7</li>
                <li>复选框8</li>
            </ul>
        </div>
        <script>
            var aLi = document.querySelectorAll("#box ul li"),
                length = aLi.length;
            for (var i=0;i<length;i++){
                aLi[i].ifcheck=false;
                aLi[i].startClass=aLi[i].className;
                aLi[i].onclick=function(){
                    if (this.ifcheck) {
                        this.className=this.startClass;
                        this.ifcheck=false;
                    }else{
                        this.className="checked";
                        this.ifcheck=true;
                    }
                }
            }
        </script>

33.选项卡的实现

效果图如下：

![70 3][]

代码如下：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #box{width: 360px;height: 580px;margin: 50px auto;position: relative;}
            .pic{height: 100%;position: relative;}
            .pic ul{height: 100%;width: 326px;position: absolute;top: 0;left: 0;list-style: none;}
            .pic ul li{width: 100%;height: 100%;display: none;}
            .pic ul li img{display: block;}
            .pic ul li.show{display: block;}
            #box .tab{width:34px;display: block;position: absolute;top: 0;right: 0;}
            #box .tab ul{list-style: none;}
            #box .tab ul li{height: 34px;width: 100%;background:#000;margin-bottom: 10px;color: #fff;text-align: center;line-height: 34px;font-weight: bold;cursor: pointer;}
            #box .tab ul li.on{background:orange;}
            #box .info{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 326px;
                    height: 30px;
                    background: #000;
                    background: rgba(0,0,0,.5);
                    text-align: center;
                    line-height: 30px;
                    color: #fff;
                    font-size: 14px;
                    font-weight: bold;
                }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="pic">
                <ul>
                    <li class="show"><img src="./img/g1.jpg"></li>
                    <li><img src="./img/g2.jpg"></li>
                    <li><img src="./img/g3.jpg"></li>
                    <li><img src="./img/g4.jpg"></li>
                </ul>
            </div>
            <div class="tab">
                <ul>
                    <li class="on">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
            <p class="info"><span>1</span>/4</p>
        </div>
        <script>
            var aContent=document.querySelectorAll("#box .pic ul li"),
                aTabLi=document.querySelectorAll("#box .tab ul li"),
                length=aContent.length,
                aspan=document.querySelector("#box .info span"),
                apre=0;
            for(var i=0;i<length;i++){
                aTabLi[i].index=i;
                aTabLi[i].onclick=function(){
                    aTabLi[apre].className="";
                    aContent[apre].className="";
                    apre=this.index;
                    aTabLi[apre].className="on";
                    aContent[apre].className="show";
                    aspan.innerHTML=apre+1;
                }
            }
        </script>
    </body>
    </html>

34.左侧伸缩导航

假定一个元素 div ， div 的className = “div”；this.className+= 'a' 之后，div的className变成了 “diva”（注意，这个类名变了，在后面加了个a，如果你的本意是再添加一个a 的类，那么你应该写成 this.className += " a"（a前有一个空格）），如果你用了this.className = 'a', 那么 div的className 就成为了“a”,之前的类名被清除了

效果图如下：

![70 4][]

代码如下：

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #box{width: 50px;height: 100%;position: fixed;background: #666666;left: -50px;}
            #box ul{width: 50px;height: 350px;position: absolute;top: 20%;}
            #box ul li{width: 50px;height: 50px;margin-bottom: 40px;position: relative;}
            #box ul li img{position: absolute;top: 7px;left: 7px;}
            #box ul li:hover{background: #ffc;}
            #box ul li .hidden{width: 200px;height: 180px;background: #ffc;border: 1px solid #000;border-left: none;position: absolute;top: -1px;left: 50px;display: none;}
            #box ul li:hover .hidden{display: block;}
            #box .btn{width: 50px;height: 50px;background-image: url("./img/icon.png");background-position: 0px 50px;position: absolute;bottom: 50px;left: 50px;}
            #box .btn.on{background-position: 0 0;left: 0px;}
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    <img src="./img/bq1.png" />
                    <div class="hidden"></div>
                </li>
                <li>
                    <img src="./img/bq2.png" />
                    <div class="hidden"></div>
                </li>
                <li>
                    <img src="./img/bq3.png" />
                    <div class="hidden"></div>
                </li>
                <li>
                    <img src="./img/bq4.png" />
                    <div class="hidden"></div>
                </li>
                <li>
                    <img src="./img/bq5.png" />
                    <div class="hidden"></div>
                </li>
            </ul>
            <div class="btn"></div>
        </div>
        <script>
            var oBtn=document.querySelector("#box .btn"),
                oBox=document.getElementById("box");
            oBtn.flag=false;
            oBtn.onclick=function(){
                if (this.flag) {
                    oBox.style.left="-50px";
                    this.className="btn";
                    this.flag=false; 
                }else{
                    oBox.style.left="0px";
                    this.className += " on";
                    this.flag=true; 
                }
            };
        </script>
    </body>
    </html>

35.QQ下拉面单

效果图如下：

![70 5][]

代码如下：

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
        <style type="text/css">
            *{margin: 0;padding:0;}
            #box{margin: 50px auto;width: 200px;}
            ul{height: 31px;overflow: hidden;cursor: pointer;}
            ul.new{height: auto;}
            li{width: 190px;height: 30px;color: #fff;font-size: 14px;background: pink;list-style: none;line-height: 30px;border-bottom: 1px solid #000;padding-left: 10px;}
            li.list{width: 180px;height: 25px;color: #000;font-size: 12px;background: #eee;
                line-height: 25px;padding-left: 20px;}
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>同事</li>
                <li class="list">同事1</li>
                <li class="list">同事2</li>
                <li class="list">同事3</li>
                <li class="list">同事4</li>
            </ul>
            <ul>
                <li>好友</li>
                <li class="list">好友1</li>
                <li class="list">好友2</li>
                <li class="list">好友3</li>
            </ul>
            <ul>
                <li>同学</li>
                <li class="list">同学1</li>
                <li class="list">同学2</li>
                <li class="list">同学3</li>
            </ul>
        </div>
        <script>
            var aUl=document.querySelectorAll("#box ul"),
                length=aUl.length,
                check=false;
            for(var i=0;i<length;i++){
                aUl[i].onclick=function(){
                    if (check) {
                        this.className="";
                        check=false;
                    }else{
                        this.className="new";
                        check=true;
                    }
                }
            }
        </script>
    </body>
    </html>

36.动态方法和静态方法

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
    </head>
    <body>
        <div id="box"></div>
        <p class="ptext"></p>
        <p class="ptext"></p>
        <script>
            //只认对象，不认属性的，称为：静态方法
            //静态的：document.getElementById();.querySelector();.querySelectorAll();
            // var oBox = document.getElementById("box");
            // oBox.id="new";
            // oBox.innerHTML="我是div";
            //一旦用到这个变量，重新按照规则找一次。称为：动态方法
            //动态的：.getElementsByClassName();
            var oPtext = document.getElementsByClassName("ptext");
            var obj = oPtext[0];
            oPtext[0].className="new";
            obj.innerHTML="div";
        </script>
    </body>
    </html>

37.算数运算符

38.赋值运算符

39.逻辑运算符

40.作业：颜色顺序

![70 6][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="">
            <title>study</title>
            <style type="text/css">
                *{margin: 0;padding:0;}
                #box{width: 300px;height: 400px;margin: 50px auto;}
                ul{list-style: none;}
                li{width: 100px;height: 100px;text-align: center;font-weight: bold;font-size: 14px;line-height: 100px;float: left;}
                .l1{background: #ffc0cb;}
                .l2{background: #ffb447;}
                .l3{background: #31ff9d;}
                .l4{background: #bc28ff;}
                li:hover{background: #c8faff;}
            </style>
        </head>
        <body>
            <div id="box">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <script>
                var aLi=document.getElementById("box").getElementsByTagName("li");
                length=aLi.length;
                for(var i=0;i<length;i++){
                    aLi[i].className="l"+(i%4+1);
                    aLi[i].innerHTML=i+1;
                }
            </script>
        </body>
    </html>

41.作业：刮刮乐

![70 7][]

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>练习</title>
        <style type="text/css">
            *{margin: 0;padding :0;}
            #box{width: 420px;height: 200px;margin: 50px auto;position: relative;}
            #box .content{width: 100%;height: 100%;}
            #box .content img{width: 100%;height: 100%;display: block;}
            #box .cover{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
            #box .cover span{width: 10px;height: 10px;background: #939393;display: block;float: left;}
            #box .cover span.pt{background: transparent;}
        </style>
    </head>
    <body>
        <div id="box">
            <div class="content">
                <img src="./images/p1.png">
            </div>
            <div class="cover"></div>
        </div>
        <script>
            var str="";
            var aCover=document.querySelector("#box .cover");
            var aSpan=aCover.getElementsByTagName("span");
            var length=42*20;
            for(var i=0;i<length;i++){
                str+="<span></span>";
            }
            aCover.innerHTML=str;
            for(var i=0;i<length;i++){
                aSpan[i].onmouseenter=function(){
                    this.className="pt";
                }
            }
        </script>
    </body>
    </html>

42.toString()   toFixed()

43.Math方法

44.作业：全选

效果图

![70 8][]

代码

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="">
            <title>study</title>
            <style type="text/css">
                *{margin: 0;padding:0;}
                li{list-style: none;}
                #box{width: 400px;margin: 100px auto;}
                #box ul li{position: relative;width: 100%;height: 30px;border-bottom: 1px solid #fff;cursor: pointer;}
                #box ul li.list:nth-child(odd){background: #99f;}
                #box ul li.list:nth-child(even){background: #96c;}
                #box ul li:hover{background: pink!important;}
                #box ul li.all p{color: #000;}
                #box ul li i{position: absolute;top: 5px;left: 10px;display: block;width: 20px;height: 20px;background-image: url("./img/ckbg1.jpg");}
                #box ul li i.check{background-image: url("./img/ckbg2.jpg");}
                #box ul li p{overflow: hidden;width: 360px;height: 30px;margin-left: 40px;line-height: 30px;font-size: 12px;color: #fff;}
            </style>
        </head>
        <body>
            <div id="box">
                <ul>
                    <li class="list">
                        <i></i>
                        <p>Kevin</p>
                    </li>
                    <li class="list">
                        <i></i>
                        <p>Kevin2</p>
                    </li>
                    <li class="all">
                        <i></i>
                        <p>全选</p>
                    </li>
                </ul>
            </div>
            <script>
                var oBox=document.getElementById("box"),
                    aList=oBox.querySelectorAll(".list"),
                    aListI=oBox.querySelectorAll(".list i"),
                    oAll=oBox.querySelector(".all"),
                    oAllI=oAll.querySelector("i"),
                    length=aList.length;
                for(var i=0;i<length;i++){
                    aList[i].ifcheck=false;//每个.list 都添加自定义属性ifCheck，用来表示是否被选中
                    aList[i].index=i;//自定义属性 存下标
                    aList[i].onclick=function(){
                        if (this.ifcheck) {
                            aListI[this.index].className="";
                            this.ifcheck=false;
                        }else{
                            aListI[this.index].className="check";
                            this.ifcheck=true;
                        }
                        var bool=true;
                        for(var k=0;k<length;k++){
                            if(!aList[k].ifcheck){//!是取反的意思，当括号中的表达式结果为true（真），则运行。
                                bool=false;
                                break;
                            }
                        }
                        oAll.ifcheck=bool;
                        if(bool){
                            oAllI.className="check";
                        }else{
                            oAllI.className="";
                        }
                    };
                }
                oAll.ifcheck=false; //同理，用来表示全选按钮是否勾选
                oAll.onclick=function(){
                    var bool=this.ifcheck;
                    for(var j=0;j<length;j++){
                        if(bool){
                            aListI[j].className="";
                            aList[j].ifcheck=true;
                        }else{
                            aListI[j].className="check";
                            aList[j].ifcheck=false;
                        }
                    }
                    this.ifcheck=!bool;
                    if(bool){
                        oAllI.className="";
                    }else{
                        oAllI.className="check";
                    }
                }
            </script>
        </body>
    </html>

45.作业：全选，反选，清空

效果图

![70 9][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="">
            <title>study</title>
            <style type="text/css">
                *{margin: 0;padding:0;}
                #box{width: 500px;margin: 100px auto;}
                ul{overflow: hidden;}/*清除浮动*/
                li{float: left;list-style: none;margin-right: 20px;font-size: 14px;}
                p{overflow: hidden;}
                span{width: 45px;height: 28px;color: #fff;background: #ff6600;font-size: 12px;display: block;text-align: center;line-height: 28px;float: left;margin-right: 6px;cursor: pointer;}
            </style>
        </head>
        <body>
            <div id="box">
                <ul>
                    <li><input type="checkbox" name="" id="inp1"><label for="inp1">西瓜</label></li>
                    <li><input type="checkbox" name="" id="inp2"><label for="inp2">苹果</label></li>
                    <li><input type="checkbox" name="" id="inp3"><label for="inp3">桃子</label></li>
                    <li><input type="checkbox" name="" id="inp4"><label for="inp4">柠檬</label></li>
                    <li><input type="checkbox" name="" id="inp5"><label for="inp5">草莓</label></li>
                </ul>
                <p>
                    <span>全选</span>
                    <span>反选</span>
                    <span>清空</span>
                </p>
            </div>
            <script>
                var aSpan=document.querySelectorAll("span"),
                    aInput=document.querySelectorAll("input"),
                    length=aInput.length;
                aSpan[0].onclick=function(){
                    for(var i=0;i<length;i++){
                        aInput[i].checked=true;
                    }
                }
                aSpan[1].onclick=function(){
                    for(var i=0;i<length;i++){
                        aInput[i].checked=!aInput[i].checked;
                    }
                }
                aSpan[2].onclick=function(){
                    for(var i=0;i<length;i++){
                        aInput[i].checked=false;
                    }
                }
            </script>
        </body>
    </html>

46.有名函数，匿名函数

<div id="box">函数</div>
    	<script>
    		// 有名函数，匿名函数
    		//匿名函数：function(){}
    		// 有名函数的执行方法：
    		// 1.
    		document.getElementById('box').onclick=youming;
    		// 2.
    		// youming();
    		function youming(){
    			var oBox=document.getElementById('box');
    			oBox.innerHTML="有名函数";
    		}
    	</script>

47.函数定义、函数表达式

<div id="box">函数</div>
    	<script>
    		// 定义一个有名函数，就叫做函数的定义function youming(){}
    		//函数表达式：var youming = function(){}
    		// youming();可以写在函数定义前面或者后面
    		// youming();
    		// function youming(){
    		// 	var oBox=document.getElementById('box');
    		// 	alert("有名函数");
    		// }
    		// youming();
    		/*var youming = function(){
    			alert("函数表达式");
    		}
    		youming();*/// youming();只能放在函数表达式后面
    		// 函数表达式的特点，可以直接在后面加括号执行
    		/*var biaoda=function(){
    			alert("函数表达式的特点，可以直接在后面加括号执行")
    		}();*/
    		//给匿名函数加括号包起来，就是函数表达式的另外一种形式
    		/*(function(){
    			alert("给匿名函数加括号包起来，就是函数表达式的另外一种形式");
    		})();*/
    		/*(function(){
    			alert("自执行的()可以放在大括号前也可以放在大括号后");
    		}());*/
    		//在匿名函数前添加+,!,~,-，都是函数表达式的另外一种形式
    		+function(){
    			alert("在匿名函数前添加+，就是函数表达式的另外一种形式");
    		}();
    	</script>

48.参数

49.不定参

50.return

<div id="box"></div>
        <script>
            //return 是javascript里函数返回值的关键字，一个函数内处理的结果可以使用return 返回，这样在调用函数的地方就可以用变量接收返回结果。return 关键字内任何类型的变量数据或表达式
            //函数中的return：1.return 值;返回一个值,这个值单独作为一个整体2.return终止函数的执行：return之后的代码将不再执行.retrun true； 返回正确的处理结果。return false；返回错误的处理结果，终止处理。return；把控制权返回给页面。
            /* 每个函数默认return undefined ,默认是没有返回值的，在有需求的情况下，我们可以修改函数的return*/
            /* var x= Fn();
            alert(x);
            function Fn(){
                var oBox = document.getElementById('box');
                oBox.innerHTML="函数";
                return "阿飞";
            }*/
            Fn()()(5);//首先执行第一个return x;此处的x是一个函数，所以执行函数需要用Fn()(),然后再执行第二个return，还需要再加一个括号。
            function Fn(){
                var x=function(){
                    alert(2);
                    return function(q){
                        alert(q);
                    }
                }
                return x;
            }
        </script>

51.案例-购物车

![70 10][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
                li{ list-style-type: none;}
                table{
                    width: 1000px;
                    border-collapse: collapse;
                    border-color: #930;
                    margin: 50px auto 0;
                    user-select: none;
                }
                table tr td{
                    width: 250px;
                    height: 100px;
                    text-align: center;
                }
                table tr.title td{
                    height: 50px;
                    background: #c36;
                    color: #fff;
                    font-weight: bold;
                    font-size: 14px;
                }
                table tr td img{
                    display: block;
                    width: auto;
                    height: 70px;
                    margin: 0 auto;
                }
                table tr td.number span{
                    display: inline-block;
                    font-size: 12px;
                    text-align: center;
                }
                table tr td.number span.down,table tr td.number span.add{
                    width: 30px;
                    height: 30px;
                    background: #ddd;
                    line-height: 30px;
                    cursor: pointer;
                    font-weight: bold;
                    font-size: 14px;
                }
                table tr td.number span.num{
                    width: 50px;
                    height: 28px;
                    border-top: 1px solid #ddd;
                    border-bottom: 1px solid #ddd;
                    line-height: 28px;
                    color: #c36;
                }
                .box{
                    width: 1000px;
                    height: 50px;
                    background: #c36;
                    margin: 10px auto;
                }
                .box p{
                    float: right;
                    width: 250px;
                    height: 50px;
                    line-height: 50px;
                    color: #fff;
                    font-size: 14px;
                }
                .box p span{
                    color: #f4e5a9;
                    font-size: 16px;
                    font-weight: bold;
                }
            </style>
        </head>
        <body>
            <table border="1">
                <thead></thead>
                <tbody>
                    <tr class="title">
                        <td>商品</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>小计</td>
                    </tr>
                    <tr>
                        <td><img src="img/shop1.jpg" alt=""></td>
                        <td class="danjia">8</td>
                        <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                        <td class="price">0</td>
                    </tr>
                    <tr>
                        <td><img src="img/shop2.jpg" alt=""></td>
                        <td class="danjia">10</td>
                        <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                        <td class="price">0</td>
                    </tr>
                    <tr>
                        <td><img src="img/shop3.jpg" alt=""></td>
                        <td class="danjia">12.5</td>
                        <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                        <td class="price">0</td>
                    </tr>
                    <tr>
                        <td><img src="img/shop4.jpg" alt=""></td>
                        <td class="danjia">23</td>
                        <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
                        <td class="price">0</td>
                    </tr>
                </tbody>
            </table>
    
            <div class="box">
                <p class="totalPrice">合计费用： <span>0</span> ￥</p>
                <p class="totalNum">已选中商品： <span>0</span> 个</p>
            </div>
            <script>
    
                var aDown = document.querySelectorAll("table .number .down"),
                    aAdd = document.querySelectorAll("table .number .add"),
                    aNum = document.querySelectorAll("table .number .num"),
                    aDanjia = document.querySelectorAll("table .danjia"),
                    aPrice = document.querySelectorAll("table .price"),
                    oTotalNum = document.querySelector(".box .totalNum span"),
                    oTotalPrice = document.querySelector(".box .totalPrice span"),
                    length=aDown.length;
    
                for (var i = 0; i < length; i++) {
                    aDown[i].index = i;
                    aAdd[i].index = i;
    
                    aDown[i].onclick = function(){
                        clickEvent(this , false);
                    };
                    aAdd[i].onclick = function () {
                        clickEvent(this , true);
                    };
                }
    
                function change( j , num ) {
                    //单个商品小计
                    aPrice[j].innerHTML = aDanjia[j].innerHTML * num;
    
                    //计算总个数 总价格
                    var tNum = 0;
                    var tPrice = 0 ;
                    for (var i = 0; i < length; i++) {
                        tNum += aNum[i].innerHTML * 1;
                        tPrice += aPrice[i].innerHTML * 1;
                    }
                    oTotalNum.innerHTML = tNum;
                    oTotalPrice.innerHTML = tPrice;
                }
    
                function clickEvent(This , bool){
                    var index = This.index,
                        num = aNum[index].innerHTML - 0;
                    if (bool){
                        num ++;
                    }else{
                        num --;
                        num = Math.max( num , 0 );
                    }
                    aNum[index].innerHTML = num;
                    change(index , num);
                }
    
    
                /*aDown[i].onclick = function () {
                 //得到对应的num的值
                 var index = this.index,
                 num = aNum[index].innerHTML - 0;
    
                 //改变
                 num --;
                 num = Math.max( num , 0 );//Math.max取 num和0 两者的最大值，控制了num的最小值0
    
                 //重新赋值
                 aNum[index].innerHTML = num;
    
                 //改变小计总价等
                 change(index , num);
                 };
    
                 aAdd[i].onclick = function () {
                 //得到对应的num的值
                 var index = this.index,
                 num = aNum[index].innerHTML - 0;
    
                 //改变
                 num ++;
    
                 //重新赋值
                 aNum[index].innerHTML = num;
    
                 //改变小计总价等
                 change(index , num);
                 };*/
    
            </script>
        </body>
    </html>

52.评分

![70 11][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="">
            <title>study</title>
            <style type="text/css">
                *{padding: 0;margin: 0;}
                #box{width: 310px;height: 75px;margin: 30px auto;line-height: 75px;}
                .pinfen{color: red;float: left;}
                ul{float: left;height: 20px;width: 100px;margin-top: 27px;}
                li{list-style: none;background-image: url(./image/star.png);width: 20px;height: 20px;float: left;cursor: pointer;}
                li.new{background-position: 0 -27px;}
                .note{border: 1px #eee solid;width: 120px;height: 70px;float: right;line-height: 20px;}
            </style>
        </head>
        <body>
            <div id="box">
                <span class="pinfen">星级评分：</span>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <p class="note">提示：请认真给当前文章打分</p>
            </div>
            <script>
                var aLi=document.querySelectorAll("li"),
                    arr=['提示：请认真给当前文章打分','很差','较差','还行','推荐','力荐'],
                    aP=document.querySelector("p"),
                    length=aLi.length,
                    b=-1;
                for(var i=0;i<length;i++){
                    aLi[i].index=i;
                    aLi[i].onmouseenter=function(){
                        change(this.index);
                    }
                    aLi[i].onmouseleave=function(){
                        change(b);
                    }
                    aLi[i].onclick=function(){
                        b=this.index;
                        change(b);
                    }
                }
                function change(n){
                    aP.innerHTML=arr[n+1];
                    for(var i=0;i<length;i++){
                        aLi[i].className="";
                    }
                    for(var i=0;i<=n;i++){
                        aLi[i].className="new";
                    }
                }
            </script>
        </body>
    </html>

53.地址栏功能

![70 12][]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="author" content="">
            <title>study</title>
            <style type="text/css">
                *{padding: 0;margin: 0;}
                #box{width: 100%;height: 210px;}
                li{list-style: none;border-bottom: 1px solid blue;margin-left:46px;height: 46px;line-height: 46px;font-size: 12px; }
                li.new{height: 35px;line-height: 35px;}
                .text{float: left;}
                .inputtext{float: left;color: #eee;margin-top: 15px;display: none;}
                .button{float: left;background-color: #000;width: 50px;height: 25px;line-height: 25px;text-align: center;color: #fff;margin-top: 10px;margin-left: 20px;cursor: pointer;}
            </style>
        </head>
        <body>
            <div id="box">
                <ul>
                    <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
                    <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
                    <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
                    <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
                </ul>
            </div>
            <script>
                var aButton=document.querySelectorAll(".button"),
                    aText=document.querySelectorAll(".text"),
                    aInput=document.querySelectorAll(".inputtext"),
                    aLi=document.querySelectorAll("li"),
                    length=aButton.length;
                for(var i=0;i<length;i++){
                    aButton[i].index=i;
                    var flag=true;
                    aButton[i].onclick=function(){
                        index=this.index;
                        if (flag) {
                            aButton[index].innerHTML="确认";
                            aText[index].style.display="none";
                            aInput[index].style.display="block";
                            aLi[index].className+=" new";
                            flag=false;
                        }
                        else{
                            index=this.index;
                            aButton[index].innerHTML="修改";
                            aText[index].innerHTML=aInput[index].value;
                            aText[index].style.display="block";
                            aInput[index].style.display="none";
                            aLi[index].className="";
                            flag=true;
                        }
                    }
                }
            </script>
        </body>
    </html>

54.作用域

*  **javascript解析顺序**

1.  （定义）先解析var、function、参数；
    
    1.  该步骤的var只定义变量，后面的 = 赋值不解析
    2.  该步骤的函数只定义函数，函数的执行不解析
    3.  重名的只留一个，var和函数重名函数优先
2.  （执行）再从上至下执行其他代码。

*  **作用域**

1.  最大的作用域为script标签；
2.  遇到函数执行产生新的作用域；
3.  产生新的作用域后同样按照定义-执行的规则解析该作用域的代码；
4.  子作用域可以访问父作用域的参数和变量，反之不行；
5.  每个作用域要访问变量时，先从自身找，找不到再往上一级找。

55.域

56.关于域的作业

57.闭包，通过链接学习：[http://www.ruanyifeng.com/blog/2009/08/learning\_javascript\_closures.html][http_www.ruanyifeng.com_blog_2009_08_learning_javascript_closures.html]

58.length和charAt

59.indexOf()

60.charCodeAt()、fromCharCode()

61.substring()和slice()

62.split() 方法和join() 方法

63.

64.

65.

66.

67.

68.

69.

70.

[70]: /images/20220526/68ddf44da0c9446f8838f156d19eaf81.png
[70 1]: /images/20220526/9a31834a30c54473838c267eeeb47e76.png
[70 2]: /images/20220526/ee99f321fc244b7f85208e64f2091640.png
[70 3]: /images/20220526/6368a4a2aa1649b28ea706e6235b7862.png
[70 4]: /images/20220526/53051a5abc184712b3a8839f424ceb7a.png
[70 5]: /images/20220526/32586fdba33444afbec215e042808e74.png
[70 6]: /images/20220526/ae2e9ab5720740f681e4b138a50d015c.png
[70 7]: /images/20220526/aa27ca8417b34e129c847df684407eea.png
[70 8]: /images/20220526/fd3306da0d2d4a879b19e663ab685258.png
[70 9]: /images/20220526/9adee0ff91b34bb2981e03530df167ef.png
[70 10]: /images/20220526/d8924ac973de4d738162d1a38504b404.png
[70 11]: /images/20220526/b53a48a15dc14de995527da959b28363.png
[70 12]: /images/20220526/582279c2f6b546859972cca090370f8e.png
[http_www.ruanyifeng.com_blog_2009_08_learning_javascript_closures.html]: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html