WEB基础之JS

最新推荐文章于 2022-03-25 09:39:48 发布
最新推荐文章于 2022-03-25 09:39:48 发布
阅读量393 收藏 3
点赞数 1
分类专栏： Java 文章标签： JavaScript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daycym/article/details/79391340
版权

JS

一、JS使用方式（事件定义式、嵌入式、文件调用式）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.嵌入式:在script标签里写js,该标签可以放在网页的任意位置
    但通常放在head里比较多 -->
<script>
    //js注释是这样的
    /*也可以是这样的*/
    //function是关键字,用来声明函数,f2是函数名,小括号内可以声明参数,大括号内是函数体
    //js中函数都是公有的,不需要修饰符.
    //js中的函数不需要声明返回值类型.
    function f2(){
        //js不区分单引号和双引号
        alert("云南省");
    }
</script>
<!-- 3.文件调用式:在单独的js文件内写js,需要引入到网页上才能使用
    1)该标签必须写成双标签,哪怕没有内容
    2)该标签不能既引入js有写js,只能二选一 -->
<script src="my.js"></script>
</head>
<body>
    <!-- 事件:用户在做出什么操作时调用js,它就是js调用的时机,
        如单击、双击等 -->
    <!-- 1.事件定义式 -->
    <input type="button" value="按钮1" onclick="alert('江苏省');"/>
    <input type="button" value="按钮2" onclick="f2();"/>
    <input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>

my.js代码

function f3(){
    alert("浙江省");
}

这里写图片描述

这里写图片描述

这里写图片描述

二、JS语法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //1.将js封装成函数,点击某按钮时调用
    //2.不把js封装成函数,直接在此处写js,在网页加载(执行)时立刻调用
    //该js执行时机甚至比body还早
    //alert(1);
    console.log("控制台打印");
    //1.声明变量
    var x;
    console.log(x);
    x = 3;
    console.log(x);
    var y = "hello";
    console.log(y);
    //2.隐式转换
    var s = "hi";
    var n = 3.14;
    var b = true;
    console.log(s+n);
    console.log(s+b);
    console.log(n+b);
    console.log(b+b);
    //3.强制转换toString/parseInt/parseFloat
    console.log(n.toString()+1);
    console.log(parseInt(n));
    console.log(parseInt("5.7"));
    console.log(parseInt("abc"));
    console.log(isNaN(5.6));//判断是否为数字，是返回false
    console.log(isNaN("ac"));//不是数字返回true
    //4.运算符
    console.log(5/2);//2.5
    //5.条件表达式
    //js中可以用任何数据做条件，当使用非布尔值做条件时，所有的
    //空值都等价于false，非空值等价于true。
    //空值：null/0/""/undefined/NaN
    //这样设计的目的是为了简化条件表达式
    var k = 5;
    //var k = undefined;
    if(k){
        console.log("ok!");
    }
    k && console.log("yes");
</script>
</head>
<body>
    <p>js语法和Java十分相似</p>
</body>
</html>

这里写图片描述

1. 练习1（求平方）

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function pf(){
        //获取文本框
        var input = document.getElementById("num");
        console.log(input);
        //获取框内的值
        var n = input.value;
        console.log(n);
        //获取span
        var span = document.getElementById("result");
        //判断该值是否为数字
        if(isNaN(n)){
            //不是数字，给予提示
            span.innerHTML = "请输入数字";
        } else {
            //是数字，计算平方
            span.innerHTML = n*n;
        }
    }
</script>
</head>
<body>
    <input type="text" id="num"/>
    <input type="button" value="平方" onclick="pf();"/>
    =<span id="result"></span>
</body>
</html>

这里写图片描述

2. 练习2（猜数字）

这里写图片描述

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //网页加载时直接生成随机数
    //该数在body加载前就有了，所以用户点击猜时在对应函数内可以用
    //0<=x<1 -> 0<=x<100 -> 0,1....99
    var ran = parseInt(Math.random()*100);
    //无论函数写在前面还是这里，它都是在用户点击按钮时调用
    function guess(){
        //获取文本框里的值
        var n = document.getElementById("num").value;
        var span = document.getElementById("result");
        //判断该值是否为数字
        if(isNaN(n)){
            //不是数字，给予提示
            span.inerHTML = "请输入数字";
        }else {
            //是数字，和随机数比较
            if(n<ran){
                span.innerHTML = "小了";
            }else if(n>ran){
                span.innerHTML = "大了";
            }else {
                span.innerHTML = "对了";
            }
        }
    }
</script>
</head>
<body>
    <input type="text" id="num"/>
    <input type="button" value="猜" onclick="guess();"/>
    <span id="result"></span>
</body>
</html>

这里写图片描述

这里写图片描述

这里写图片描述

3.练习3（求阶乘）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function jc(){
        //获取文本框值
        var n = document.getElementById("num").value;
        //获取span
        var span = document.getElementById("result");
        //判断该值是否为数字
        if(isNaN(n)){
            //不是数字，给予提示
            span.innerHTML = "请输入数字";
        } else {
            //是数字，计算阶乘
            if(n<0){
                span.innerHTML = "负数没有阶乘！"
            } else if(n == 0){
                span.innerHTML = 1;
            } else {
                var s = 1;
                //使用i可以做条件，当i递减到0时，就相当于false，则循环终止。
                for(var i=n;i;i--){
                    s *= i;
                }
                span.innerHTML = s;
            }
        }
    }
</script>
</head>
<body>
    <p>n的阶乘=1*2*3*4*...*n</p>
    <p>0的阶乘固定为1</p>
    <p>
        <input type="text" id="num"/>
        <input type="button" value="阶乘" onclick="jc();"/>
        =<span id="result"></span>
    </p>
</body>
</html>

这里写图片描述

三、 JS对象

Number、Array、Math、Date、RegExp、Function

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //1.Number
    var n = 3.1415926;
    console.log(n.toFixed(3));
    //2.Array(js中的数组都是Object数组)
    //2.1如何创建数组
    //1)若创建数组时就已知数据
    var a1 = ["zhangsan",25,true];
    console.log(a1[0]);
    //2)未知数据,创建一个空数组
    var a2 = new Array();
    a2.push("lisi");
    a2.push(28);
    a2.push(false);
    console.log(a2[1]);
    //2.2数组倒转
    var arr = [5,18,1,6,3,9];
    arr.reverse();
    console.log(arr);
    //2.3数组排序
    //数组默认按照字符串由小到大排序
    //可以通过替换比较方法改变排序结果，在JS里方法也是对象，可以做参数
    //默认按unicode排序
    arr.sort();
    console.log(arr);
    //按数字排序
    arr.sort(function x(a,b){
        return a-b;
    });
    console.log(arr);
    //3.Math
    console.log(Math.PI);
    console.log(Math.round(3.56));//取整 4
    //4.Date
    //创建客户机的当前时间
    var d1 = new Date();
    console.log(d1);
    //创建指定的时间（一般来源于服务器）
    var d2 = new Date("2017/12/12 12:12:12");
    console.log(d2);
    //转换为本地日期/时间格式的字符串
    console.log(d1.toLocaleDateString());
    console.log(d1.toLocaleTimeString());
    //读写时间分量（时间上的某个部位的值）
    //读：getXXX()    写：setXXX()
    var y = d1.getFullYear();
    var m = d1.getMonth();
    var d = d1.getDate();
    var today = y+"年"+(m+1)+"月"+d+"日";
    console.log(today);
    //5.RegExp(正则)
    var str = "you can you up,no can no bb.";
    //5.1创建正则对象
    var reg = /no/;
    //5.2正则对象的方法
    //1)reg.exec(str)
    //普通模式：从str中找出与reg匹配的第一个子串
    console.log(reg.exec(str));
    //全局模式：第n次调用则从str中找出与reg匹配的第n个字串
    reg = /no/g;
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    //1)reg.test(str)
    //判断str中是否包含与reg匹配的子串
    console.log(reg.test(str));//true
    //字符串支持正则的方法
    //1)replace
    console.log(str.replace(reg,"bu"));
    //字符串是不可变的，修改字符串的方法，并没有改变原字符串，而是生成了新的字符串
    console.log(str);
    //2)match
    console.log(str.match(reg));
    //3)search
    console.log(str.search(reg));
    //6.Function
    //通过function关键字所声明的是一个函数（Funciton）对象
    //浏览器加载网页到此处，并没有调用此对象，仅仅是创建了对象而已
    function sum(){
        var s = 0;
        if(arguments.length>0){
            for(var i=0;i<arguments.length;i++){
                s += arguments[i];
            }
        }
        return s;
    }
    //一般是在点击按钮时调用函数对象，也可以在页面加载时直接调用
    console.log(sum(1,2,3));
    console.log(sum(1,5,3,6,5));
    //结论，js的函数没有重载，但可以实现和重载一样的调用方式
</script>
</head>
<body>

</body> 
</html>

这里写图片描述

4. 练习4（登录验证功能）

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    .ok {color:green;}
    .error {color:red;}
</style>
<script>
    //验证帐号的格式
    function checkCode(){
        //获取帐号
        var code = document.getElementById("code").value;
        //获取span
        var span = document.getElementById("code_msg");
        //判断帐号格式
        var reg = /^\w{5,10}$/;//^开头 $结尾
        if(reg.test(code)){
            //格式对了，变绿
            span.className = "ok";
            returntrue;
        }else {
            //格式错了，变红
            span.className = "error";
            return false;
        }
    }
    function checkPassword(){
        var password = document.getElementById("pw").value;
        var span = document.getElementById("pw_msg");
        var reg = /^\w{10,20}$/;
        if(reg.test(password)){
            span.className = "ok";
            return true;
        }else {
            span.className = "error";
            return false;
        }
    }
</script>
</head>
<body>
    <form action="http://www.baidu.com" onsubmit="return checkCode()+checkPassword()==2;">
        <p>
            帐号:<input type="text" id="code" onblur="checkCode();"/>
            <span id="code_msg">5-10位字母、数字、下划线</span>
        </p>
        <p>
            密码:<input type="password" id="pw" onblur="checkPassword();"/>
            <span id="pw_msg">10-20位字母、数字、下划线</span>
        </p>
        <p>
            <input type="submit" value="登录"/>
        </p>
    </form>
</body>
</html>

这里写图片描述

这里写图片描述

这里写图片描述

5. 练习5（简单计算器实现）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function cal(){
        //获取文本框
        var input = document.getElementById("num");
        //获取框中的值
        var num = input.value;
        //开始计算
        //在使用eval时，建议前后加括号，避免奇怪的问题
        try{
            var result = eval("("+num+")");
            input.value = result;
        }catch(e){
            input.value = "Error";
        }

    }
</script>
</head>
<body>
    <input type="text" id="num"/>
    <input type="button" value="=" onclick="cal();"/>
</body>
</html>

这里写图片描述

这里写图片描述

四、 window对象（弹出框、定时器）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //调用window对象的属性或方法，可以省略"window."
    //1.弹出框
    //1)弹出框
    function f1(){
        alert("你好！");
    }
    //2)确认框
    function f2(){
        var v = confirm("你吃了吗？");
        console.log(v);
    }
    //3)输入框
    function f3(){
        var v = prompt("你吃的什么？");
        console.log(v);
    }
    //2.定时器
    //1)周期性定时器
    //每隔N毫秒执行一次函数，反复执行，直到达到停止条件为止
    function f4(){
        var n = 5;
        //启动定时器,返回定时器的id，用来停止定时器
        var id = setInterval(function(){
            console.log(n);
            n--;
            if(!n){
                //停止这个定时器
                clearInterval(id);
                console.log("boom");
            }       
        },1000);
        //启动定时器就相当于启动了一个支线程，当前方法f4相当于主线程，2个线程并发执行
        //不互相等待，因此主线程在启动完支线程后立刻向下执行，而支线程却需要在1秒后才执行
        console.log("boom");
    }
    //2)一次性定时器
    //推迟N毫秒执行一次函数，执行完之后，自动停止，也可以在为执行前手动停止
    var id;
    function f5(){
        //启动定时器,若想在为执行前停止定时器，需要使用id
        id = setTimeout(function(){
            console.log("叮叮叮");
        },3000);
    }
    function f6(){
        //若定时器已经执行，则取消无效，若定时器还未执行，则可以执行
        clearTimeout(id);
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="按钮1" onclick="f1();"/>
        <input type="button" value="按钮2" onclick="f2();"/>
        <input type="button" value="按钮3" onclick="f3();"/>
    </p>
    <p>
        <input type="button" value="按钮4" onclick="f4();"/>
        <input type="button" value="按钮5" onclick="f5();"/>
        <input type="button" value="按钮6" onclick="f6();"/>
    </p>
</body>

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

6. 练习6（控制时钟开始与停止）

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    #clock {
        border: 1px solid red;
        width: 200px;
        text-align: center;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
    }
</style>
<script>
    var id;
    //开始
    function start(){
        //若id非空，则定时器已启动过，那么就不要再次启动
        if(id){
            return;
        }
        id = setInterval(function(){
            //获取当前客户端的时间
            var d = new Date();
            //获取本地格式的时间
            var now = d.toLocaleTimeString();
            //将时间写入clock
            var p = document.getElementById("clock");
            p.innerHTML = now;
        },1000);
    }
    //停止
    function stop(){
        //id非空时定时器处于启动状态，此时停止它才有效
        if(id){
            clearInterval(id);
            //为了再次启动，将id清空
            id = null;
        }       
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="开始" onclick="start();"/>
        <input type="button" value="停止" onclick="stop();"/>
    </p>
    <p id="clock"></p>
</body>
</html>

这里写图片描述

这里写图片描述

7. 练习7（模拟邮件发送功能）

  • 点击发送时，若未发送成功可以点击取消发送
  • 若发送成功，则不能点击取消发送

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    var id;
    //发送
    function send(){
        //若id非空，则定时器已启动过，那么就不要再次启动
        if(id){
            return;
        }
        //显示正在发送
        var p = document.getElementById("msg");
        p.innerHTML = "正在发送";
        //推迟3秒显示已发送
        id = setTimeout(function(){
            p.innerHTML = "已发送";
            //为了能再次启动要清空id
            id = null;
        },3000);
    }
    //撤销
    function cancel(){
        //id非空时定时器处于启动状态，此时停止它才有效
        if(id){
            //显示为已撤销
            var p = document.getElementById("msg");
            p.innerHTML = "已撤销";
            //停止定时器
            clearTimeout(id);
            //为了能再次启动要清空id
            id = null;
        }
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="发送" onclick="send();"/>
        <input type="button" value="撤销" onclick="cancel();"/>
    </p>
    <p id="msg"></p>
</body>
</html>

这里写图片描述

五、 location、screen、history、navigator对象

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //location对象
    function f1(){
        var b = confirm("您确定要离开本页面吗？");
        if(b){
            location.href = "http://www.baidu.com";
        }   
    }
    function f2(){
        location.reload();
    }
    //screen对象
    function f3(){
        console.log(screen.width);
        console.log(screen.height);
        console.log(screen.availWidth);
        console.log(screen.availHeight);
    }
    //history对象
    function f4(){
        history.forward();
    }
    //navigator对象
    function f5(){
        console.log(navigator.userAgent);
    }
</script>
</head>
<body>
    <input type="button" value="百度" onclick="f1();"/>
    <input type="button" value="刷新" onclick="f2();"/>
    <input type="button" value="屏幕" onclick="f3();"/>
    <input type="button" value="前进" onclick="f4();"/>
    <input type="button" value="帮助" onclick="f5();"/>
</body>
</html>

这里写图片描述

六、 读写节点

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //onload是页面加载事件，在页面加载完成后自动触发,触发时调用此匿名函数
    //alert(1);
    window.onload = function(){
        //alert(2);
        //1.读写节点
        //1.1读取节点的名称/类型
        var p1 = document.getElementById("p1");
        console.log(p1.nodeName);
        console.log(p1.nodeType);
        //1.2读写节点的内容
        //双标签中间的文本叫内容，任何双标签都有内容，如<a>百度</a>
        //1)innerHTML(含子标签)
        console.log(p1.innerHTML);
        p1.innerHTML = "1.<u>读写</u>节点";
        //2)innerText(忽略子标签)
        var p2 = document.getElementById("p2");
        console.log(p2.innerText);
        p2.innerText = "2.<u>查询</u>节点";
        //1.3读写节点的值
        //表单控件中的数据叫值，只有如下表单控件有值：input,select,textarea
        var b1 = document.getElementById("b1");
        console.log(b1.value);
        b1.value="anniu";
        //1.4读写节点的属性
        //1)通过方法读写属性(*)
        var img = document.getElementById("i1");
        console.log(img.getAttribute("src"));
        img.setAttribute("src","../images/02.jpg");
        img.removeAttribute("src");
        //2)通过标准属性名读写属性(*)
        //className,id,style
        var p6 = document.getElementById("p6");
        console.log(p6.style.color);
        p6.style.color = "blue";
        //3)通过不标准属性名读写属性--只有高版本浏览器支持
        //a.href,img.src
    }   
</script>
</head>
<body>
    <p id="p1">1.<b>读写</b>节点</p>
    <p id="p2">2.<b>查询</b>节点</p>
    <p id="p3">3.<b>增删</b>节点</p>
    <p>
        <input type="button" value="按钮" id="b1"/>
    </p>
    <p>
        <img src="../images/01.jpg" id="i1"/>   
    </p>
    <p style="color:red;" id="p6">标准的属性就那么几个</p>
</body>
</html>

这里写图片描述

8. 练习8（图片轮播）

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div{
        border: 1px solid red;
        width: 218px;
        height: 218px;
        margin: 50px auto;
    }
    .show {
        display: inline-block;
    }
    .hide {
        display: none;
    }
</style>
<script>
    //页面加载后
    window.onload = function(){
        lunbo();
    }
    //轮播
    var id;
    var n = 0;//轮播次数
    function lunbo(){   
        //启动定时器
        id = setInterval(function(){
            n++;
            //获取所有图片
            var imgs = document.getElementsByTagName("img");
            //将所有的图片隐藏
            for(var i=0;i<imgs.length;i++){
                imgs[i].className = "hide";
            }
            //将下一张图片显示
            var index = n%imgs.length;
            imgs[index].className = "show";
        },1000);
    }
    function stop(){
        clearInterval(id);
    }
</script>
</head>
<body>
    <!-- 
        hover不是事件，是伪类选择器
        onmouseover是鼠标悬停事件
        onmouseout是鼠标离开事件
     -->
    <div onmouseover="stop();" onmouseout="lunbo();">
        <img src="../images/01.jpg"/>
        <img src="../images/02.jpg" class="hide"/>
        <img src="../images/03.jpg" class="hide"/>
        <img src="../images/04.jpg" class="hide"/>
        <img src="../images/05.jpg" class="hide"/>
        <img src="../images/06.jpg" class="hide"/>
    </div>
</body>
</html>

这里写图片描述

七、 查询节点（ID查询、标签查询、层次查询、名称查询）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    window.onload = function(){
        //1.根据id查询节点
        //2.根据标签名查询节点
        //document.getElementsByTagName()
        //3.根据层次查询节点
        //查询某个节点的亲戚(父亲，孩子，兄弟)
        //1)查询父亲
        var gz = document.getElementById("gz");
        var ul = gz.parentNode;
        console.log(ul);
        //2)查询孩子
        //包括空格--了解即可
        console.log(ul.childNodes);
        //不包含空格（重点掌握）
        console.log(ul.getElementsByTagName("li"));
        //3)查询兄弟
        //某节点.父亲.孩子们[i]
        var nj = gz.parentNode.getElementsByTagName("li")[4];
        console.log(nj);
        //4.根据名称(name)查询节点
        //一般用于查询一组单选/多选
        var radios = document.getElementsByName("sex");
        console.log(radios);
    }
</script>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id="gz">广州</li>
        <li>深圳</li>
        <li>南京</li>
        <li>泰州</li>
    </ul>
    <p>
        <input type="radio" name="sex"/>男
        <input type="radio" name="sex"/>女

    </p>
</body>
</html>

9. 练习9（追加、插入、删除节点）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function f1(){
        //创建新的li（新的）
        var li = document.createElement("li");
        //给此li设置内容
        li.innerHTML = "兴化";
        //再将它追加到li下
        var ul = document.getElementById("city");
        ul.appendChild(li);
    }
    function f2(){
        //先创建新节点
        var li = document.createElement("li");
        li.innerHTML = "杭州";
        //获取新节点的父亲和弟弟
        var ul = document.getElementById("city");
        var gz = document.getElementById("gz");
        //把它插入到父亲下弟弟前
        ul.insertBefore(li,gz);
    }
    function f3(){
        //获取删除元素的父亲
        var ul = document.getElementById("city");
        //获取要删除的元素
        var gz = document.getElementById("gz");
        //通过父亲删除孩子
        ul.removeChild(gz);
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="追加" onclick="f1();"/>
        <input type="button" value="插入" onclick="f2();"/>
        <input type="button" value="删除" onclick="f3();"/>
    </p>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li id="gz">广州</li>
        <li>深圳</li>
        <li>南京</li>
        <li>泰州</li>
    </ul>
</body>
</html>

这里写图片描述

10. 练习10（模拟下拉城市）

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    var cities;
    window.onload = function(){
        //模拟查询所有城市
        cities = [
            ["石家庄","保定","廊坊"],
            ["广州","东莞","佛山"],
            ["南宁","桂林","玉林"]
        ];
    }
    function chg(){
        //获取省份下拉选
        var sel1 = document.getElementById("province");
        //获取省份的序号
        var n = sel1.value;
        //获取省份所对应的城市
        var pcities = cities[n];
        //删除旧的城市
        var sel2 = document.getElementById("city");
        sel2.innerHTML = "<option>请选择</option>";
//      var options = sel2.getElementsByTagName("option");
//      for(var i=options.length-1;i>0;i--){
//          sel2.removeChild(options[i]);
//      }
        //追加新的城市
        if(pcities){
            for(var i=0;i<pcities.length;i++){
                var option = document.createElement("option");
                option.innerHTML = pcities[i];
                sel2.appendChild(option);
            }
        }
    }
</script>
</head>
<body>
    省:
    <select onchange="chg();" id="province">
        <option value="-1">请选择</option>
        <option value="0">河北省</option>
        <option value="1">广东省</option>
        <option value="2">广西省</option>
    </select>
    市:
    <select id="city">
        <option>请选择</option>
    </select>
</body>
</html>

这里写图片描述

11. 练习11（模拟购物车）

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8" />
    <style type="text/css">
      h1 {
        text-align:center;
      }
      table {
        margin:0 auto;
        width:60%;
        border:2px solid #aaa;
        border-collapse:collapse;
      }
      table th, table td {
        border:2px solid #aaa;
        padding:5px;
      }
      th {
        background-color:#eee;
      }
    </style>
    <script>
        //加入购物车
        //调用时传入了this,它指代你正点击的哪那个元素，给方法加参数接受该值
        //注意参数名不能是关键字this
        function add_shoppingcart(btn){
            //获取按钮的爷爷（tr）
            var tr = btn.parentNode.parentNode;
            //获取爷爷的孩子们（tds）
            var tds = tr.getElementsByTagName("td");
            //获取第0个td的内容（商品名）
            var name = tds[0].innerHTML;
            //获取第1个td的内容（单价）
            var price = tds[1].innerHTML;
            //测试下
            //console.log(name + "," + price)
            //创建新的行
            var ntr = document.createElement("tr");
            //给新的行设置内容
            ntr.innerHTML = 
                '<td>'+name+'</td>'+
                '<td>'+price+'</td>'+
                '<td align="center">'+
                    '<input type="button" value="-" onclick="decrease(this);"/> '+
                    '<input type="text" size="3" readonly value="1"/> '+
                    '<input type="button" value="+" onclick="increase(this);"/>'+
                '</td>'+
                '<td>'+price+'</td>'+
                '<td align="center"><input type="button" value="x" onclick="cancel(this);"/></td>';
            //将新的行追加到tbody下
             var tbody = document.getElementById("goods");
            tbody.appendChild(ntr);
            sum();
        }
        //增加
        function increase(btn){
            //获取按钮的父亲（td2）
            var td2 = btn.parentNode;
            //获取按钮的哥哥（文本框）
            var text = td2.getElementsByTagName("input")[1];
            //将框内的值累加
            text.value++;
            //获取td2的兄弟们
            var tds = td2.parentNode.getElementsByTagName("td");
            //获取td1的内容(单价)
            var price = tds[1].innerHTML;
            //计算金额
            var money = text.value*price;
            //将金额写入td3
            tds[3].innerHTML = money;
            sum();
        }
        //减少
        function decrease(btn){
            //获取按钮的父亲（td2）
            var td2 = btn.parentNode;
            //获取按钮的哥哥（文本框）
            var text = td2.getElementsByTagName("input")[1];
            if(text.value>0){
                //将框内的值累加
                text.value--;
                //获取td2的兄弟们
                var tds = td2.parentNode.getElementsByTagName("td");
                //获取td1的内容(单价)
                var price = tds[1].innerHTML;
                //计算金额
                var money = text.value*price;
                //将金额写入td3
                tds[3].innerHTML = money;
                sum();
            }   
        }
        //删除
        function cancel(btn){
            //获取按钮的爷爷（tr）
            var tr = btn.parentNode.parentNode;
            tr.parentNode.removeChild(tr);
            sum();
        }
        //合计
        function sum(){
            //获取tbody内所有行
            var tbody = document.getElementById("goods");
            var trs = tbody.getElementsByTagName("tr");
            //遍历这些行
            var s = 0;
            for(var i=0;i<trs.length;i++){
                //获取本行第4个td
                var td3 = trs[i].getElementsByTagName("td")[3];
                //将td3的内容（金额）累加
                s += parseFloat(td3.innerHTML);
            }
            //将合计值写入对应的td
            var td = document.getElementById("total");
            td.innerHTML = s;
        }
    </script>
  </head>
  <body>
    <h1>真划算</h1>
    <table>
      <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>
      </tr>   
      <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>微软X470键盘</td>
        <td>150</td>
        <td>黑色</td>
        <td>9028</td>
        <td>96%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>洛克iphone6手机壳</td>
        <td>60</td>
        <td>透明</td>
        <td>672</td>
        <td>99%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>蓝牙耳机</td>
        <td>100</td>
        <td>蓝色</td>
        <td>8937</td>
        <td>95%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
      <tr>
        <td>金士顿U盘</td>
        <td>70</td>
        <td>红色</td>
        <td>482</td>
        <td>100%</td>
        <td align="center">
          <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
        </td>
      </tr>
    </table>

    <h1>购物车</h1>
    <table>
      <thead>
        <tr>
          <th>商品</th>
          <th>单价(元)</th>
          <th>数量</th>
          <th>金额(元)</th>
          <th>删除</th>
        </tr>
      </thead>
      <tbody id="goods">
      <!-- 
        <tr>
          <td>罗技M185鼠标</td>
          <td>80</td>
          <td align="center">
            <input type="button" value="-"/>
            <input type="text" size="3" readonly value="1"/>
            <input type="button" value="+"/>
          </td>
          <td>80</td>
          <td align="center"><input type="button" value="x"/></td>
        </tr>
       -->     
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" align="right">总计</td>
          <td id="total"></td>
          <td></td>
        </tr>
      </tfoot>
    </table>    
  </body>
</html>

这里写图片描述

八、 事件

自定义事件、后绑定事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //直接定义事件
    function f1(e){
        console.log("aaa");
        console.log(e);
    }
    //后绑定事件
    window.onload = function(){//页面加载完以后
        //获取按钮
        var btn = document.getElementById("btn2");
        btn.onclick = function(e){
            console.log("bbb");
            console.log(e);
        }
    }
</script>
</head>
<body>
    <input type="button" value="按钮1" onclick="f1(event);"/>
    <input type="button" value="按钮2" id="btn2"/>
</body>
</html>

这里写图片描述

事件冒泡机制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //直接定义事件
    function f1(e){
        console.log("aaa");
        console.log(e);
    }
    //后绑定事件
    window.onload = function(){//页面加载完以后
        //获取按钮
        var btn = document.getElementById("btn2");
        btn.onclick = function(e){
            console.log("bbb");
            console.log(e);
        }
    }
</script>
</head>
<body>
    <input type="button" value="按钮1" onclick="f1(event);"/>
    <input type="button" value="按钮2" id="btn2"/>
</body>
</html>

这里写图片描述

停止冒泡机制以及获取事件源

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
    div{
        width: 400px;
        border: 1px solid red;
        padding: 30px;
    }
    p{
        border: 1px solid red;
        padding: 30px;
    }
</style>
<script>
    function f1(e){
        alert("按钮");
        //停止冒泡机制
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }
    function f2(e){
        //获取事件源
        var obj = e.sreElment || e.target;
        console.log(obj);
    }
</script>
</head>
<body>
    <div onclick="alert('div');">
        <p onclick="alert('p');">
            <input type="button" value="按钮 " onclick="f1(event);"/>
        </p>
    </div>
    <div onclick="f2(event);">
        <a href="#">顶部</a>
        <img src="../images/1.jpg"/>
        <span>abbbbbboo</span>
    </div>
</body>
</html>

这里写图片描述

12. 练习12（模拟计算器）

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .panel {
        border: 4px solid #ddd;
        width: 192px;
        margin: 100px auto;
        /*border-radius: 6px;*/
      }
      .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        /*border-radius: 4px;*/
      }
      .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }
      .panel input {
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
      }
    </style>
    <script>
        window.onload = function(){
            var div = document.getElementById("jsq");
            div.onclick = function(e){
                //获取事件源(input/p/div)
                var obj = e.srcElement || e.target;
                //只处理input
                if(obj.nodeName == "INPUT"){
                    var p = document.getElementById("screen");
                    if(obj.value == "C"){
                        //清空p
                        p.innerHTML = "";
                    }else if(obj.value == "="){
                        //计算
                        try{
                            var v = eval("("+p.innerHTML+")");
                            p.innerHTML = v;
                        }catch(ex){
                            p.innerHTML = "Error";
                        }   
                    }else{
                        //累加
                        p.innerHTML += obj.value;
                    }
                }
            }
        }
    </script>
  </head>
  <body>
    <div class="panel" id="jsq">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">

        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">

        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">

        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">

        <div style="clear:both"></div>
      </div>
    </div>    
  </body>
</html>

这里写图片描述

九、 创建对象

  • 采用直接量的方式创建对象
  • 采用内置构造器创建对象
  • 采用自定义构造器创建对象

#

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //采用直接量的方式创建对象
    function f1(){
        var student = {"name":"zhangsan",
                "age":23,
                "work":function(){alert("我学java");}
        };
        alert(student.name);
        alert(student.age);
        student.work();
    }
    //采用内置构造器创建对象
    function f2(){
        var teacher = new Object();
        teacher.name = "苍老师";
        teacher.age = 18;
        teacher.work = function(){
            alert("我教java");
        }
        alert(teacher.name);
        alert(teacher.age);
        teacher.work();
    }
    //采用自定义构造器创建对象
    function Coder(name,age,work){
        this.name = name;
        this.age = age;
        //this指代当前对象
        //.job是给此对象增加job属性
        //=work是将参数work赋值给此属性
        this.job = work;
    }
    function f3(){
        var coder = new Coder("lisi",25,
                function(){alert("我写java");});
        alert(coder.name);
        alert(coder.age);
        coder.job();
    }
</script>
</head>
<body>
    <input type="button" value="按钮1" onclick="f1();"/>
    <input type="button" value="按钮2" onclick="f2();"/>
    <input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>

这里写图片描述

Day-yong
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript基础阶段之js认识.md
07-28
javascript的基础理解知识点
JavaScript js基础用法 示例代码
最新发布
06-07
本资源主要是关于js基础用法的示例代码 内容包含了js变量定义 js输入输出 js转义符 js注释和编码规范 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种...
web.js 方法详解
weixin_30737433的博客
04-12 146
1. web3.eth.getAccounts 展示所有账户。 web.eth.coinbase;显示默认账户，相当于　　　　　　 web3.eth.getAccounts[0]; 2.web3.sha3(""); 加密 3 web3.toHex({text:'PF'}) 将字符串"PF"转换为16进制。 4 web3.fromWei(number,unit)web3.fromWei(...
JS的参数传递
肉嘟嘟的博客
08-02 381
参数传递 所谓参数传递，就是将实参的值传递给形参。通过调试可以确定形参在函数被调用之前是不存在的，当函数被调用的那一刻，实参被创建，并且把实参的值传递给形参。 参数传递有两种方式：值传递和引用传递 var a = 5; increase(a); alert(a); function increase(x){ x++; }
插入head及调用js文件 ( js一进入页面就执行的两种方法 )
FromNowOnUntilTheEnd
03-07 8741
一、将JS代码，插入到head区域，即可在网页打开时执行。示例：1234567&lt;html&gt;&lt;head&gt;&lt;title&gt;test&lt;/title&gt;&lt;/head&gt;&lt;script&gt;alert("已经开始执行函数!");&lt;/script&gt;&lt;body&gt;&lt;/body&a
【JavaScript的引入方式】
weixin_30883777的博客
01-05 145
javascript： 　是基于对象和事件驱动的客户端脚本【组成】 　　Bom：浏览对象模型（与浏览器交互的方法和接口） 　　Dom:文档对象模型（处理网页内容的方法和接口） 　　ecma：核心(描述了js的语法和基本对象) 总结下，常用的一下几种方式引入js代码： 1、页头引入（he...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册六：JS条件语句
01-20
JavaScript是Web前端开发的核心语言之一，它为网页和应用程序提供了动态交互的能力。在JavaScript中，条件语句是控制程序流程的重要工具，它们允许我们根据不同的条件执行不同的代码块，从而实现逻辑判断和决策。本...
Web开发之JavaScript
01-19
小引 笔者认为web开发包括设计html，javascript,css，以及一种高级语言，比如c#,java等等，本文分为三部分，第一部分为简单介绍javascript，第二部分为理解ECMAscript，最后部分为为javascript基础，所以针对...
webJs.rar基础资料
11-05
HTML中嵌入js代码的两种方法
热门推荐
流年
05-22 12万+
在Web页面中使用JavaScript有两种方法，一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件。 1、在页面中直接嵌入JavaScript代码 （1）在页面的任何位置（head部分 body部分 body的后面 较好）插入script标签，对于该标签必要的属性type属性，该属性描述了文档的类型 （2）在script标签内部编写js语句
JavaScript基础语法
gezongbo的博客
03-11 1336
JavaScript1、什么是JavaScript2、JavaScript的特点3、使用JavaScirpt4、JS代码编写的规范和注意事项5、变量6、数据类型7、数据类型的隐式转换8、数据类型的显示转换9、查看数据类型10、运算符11、分支结构12、循环结构13、JS中的对象13.1 内置对象13.2 简单数据对象 1、什么是JavaScript JavaScript是一种基于对象和事件驱动的解释性脚本语言，具有与C语言和Java类似的语法，简称JS。 –JS是一种网页编程技术，用来向HTML页面添加交互
JS 和 CSS 的位置对其他资源加载顺序的影响
tonyXf121的专栏
02-22 7379
来自玉伯的文章，文章链接http://lifesinger.wordpress.com/2012/02/03/performance-impact-of-js-css-loading-order/，需要翻墙才能阅读。 克军做了一系列测试：js和css的顺序关系，给出了现象和结论，但未给出原因。 JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺
从零开始，学习web前端之js基础
喻志强的博客
03-08 3234
js基础
动态添加——例如js标签到head中
全欣 的专栏
10-08 6928
例子：  C# .cs文件：                   HtmlGenericControl js = new HtmlGenericControl("script");                     js.Attributes.Add("type", "text/javascript");                     js.Attri
那些web前端经典面试题大全及答案
weixin_33743703的博客
01-16 1万+
阅读目录JavaScript部分JQurey部分HTML/CSS部分正则表达式开发及性能优化部分本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题，并且都给出了我在网上收集的答案。马上就要过春节了，开年就是崭新的一年，相信很多的前端开发者会有一些跳槽的悸动，通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。（如有错误或更好的答案，欢迎指正，水平有限，望各位不吝...
JavaScript 代码教程
余笙.'的博客
02-28 7429
JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器中的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。 特点： 1、弱语言 2、区分大小写 3、面向对象 4、跨平台 页面中添加JavaScript代码 语法： <script type="text/javascript"> //js相关代码 </scr
（立下flag）每日10道前端面试题-16 关于【script加载和执行】十问
weixin_43964148的博客
04-24 358
第一问：请说出关于下面使用方式中script的区别 默认 <html> <head> <script type="text/javascript" src="script1.js" ></script> <script type="text/javascript" src="script1.js" ></script&gt...
JavaScript——引入方式
XQC_KKK的博客
03-25 2333
1、编写一个简单网页 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页内容 </body> </html> 运行效果： 2、将JavaScript嵌入到HTML中 <!DOCTYPE html> <html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值