JScript基本认知

最新推荐文章于 2022-06-22 21:00:31 发布

进击的小小码农

最新推荐文章于 2022-06-22 21:00:31 发布

阅读量715

点赞数

分类专栏：学习知识回顾与总结文章标签： js

本文链接：https://blog.csdn.net/qq_46194472/article/details/108724920

版权

学习知识回顾与总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript基础

一:JavaScript

JavaScript简称js,是一门浏览器编程语言,它由三部分组成:

ECMAStript:描述了该语言的语法和基本对象
DOM(文档对象模型):描述处理网页内容的方法和接口
BOM(浏览器对象模型):描述与浏览器进行交互的方法和接口

二:JS下变量的声明

(1):变量的命名原则

变量名必须是数字,字母,_和$四种字符组成
变量名首字母不能是数字
变量名区分大小写
不能是JS中的保留字
尽量做到望文生义

(2):变量的声明let和var的区别

let 和 var 都是Js用来声明变量的修饰符.他们作用基本相同,但是let是ES6新增命令.他们的区别如下

let是声明块级作用域的变量,只在{}块内有效,而var声明的变量是全局作用域和局部作用域的,{}无法限定var的访问范围
let 配合for循环使用,其循环内的let变量不受外界影响
let声明的变量必须执行后才能使用此变量;也称为"暂时性死区"
let 声明的变量不能重复声明
let 让js拥有了块级作用域,让代码更加规范和安全

三:JS的数据类型

(1):数据类型

JS数据类型包括:三种主要数据类型(字符串string 数值number 布尔boolean) 两种复合数据类型(对象Object 数组Array) 两种特殊数据类型(空null 未声明undefined)

查看数据类型的三种方法

第一种方法:typeof : 运算符,返回的是一个表达式对象的数据类型的字符串,返回的值有六中(“number” “string” “boolean” “object” “function” 和 “undefined”)
第二种方法:::Object.peototype.tostring.call(变量名);
第三种方法:::变量名.constructor

(2):JS数据类型之间的转化(**)

①Number与字符串之间的转化

方法一:使用parseInt();当字符串内有字母时遇到第一个字母停止转化,直接返回前面非字母的数
方法二:使用Number()进行转化,当字符串内有字母时遇到第一个字母结束,返回NaN

②小数型和字符串进行转化

方法一:使用parseFloat()当字符串内有字母时遇到第一个字母停止转化,直接返回前面非字母的数
方法二:使用Number()当字符串内有字母时遇到第一个字母结束,返回NaN

③布尔型转化

只有值是: 0 false " " null undefined NaN这六种返回的是false

方法一:!!+变量名转化,
方法二:Boolean(变量名)

四:JS中遍历数组及对象的方法

(1):遍历数组

方法一:普通for循环

for(let i =1;i<=1000;i++){
                //2.3) 判断是否符合条件
                if(i%5==0 || i%6==0){
                    document.write("<span>" + i + "</span>");
                //2.4) 判断是否需要换行
                if(++count % 20 == 0){
                    document.write("<br>");
                }
                }

方法二:for in 循环,for(let i in arr){} 此时 i 是数组的下标

            //情况一:循环数组
            let arr = [1,2,4,2,9,8];
            for(let i in arr){          //i是数组角标
                console.log("arr[" + i + "] =" +arr[i] );
            }

(2):遍历数组

for in 循环 for(let d in document){ } 此时 d 代表对象的属性名

            for(let d in document){//d:代表对象的属性名
                console.log(d+"--->" + document[d]);
            }

对象.forEach(变量名=>{ 变量名.属性名 })

        // foreach循环遍历对象
        function testD(){
            //4.1) 定义学生对象数组
            let stu=[{"sid":"1","sanme":"张三","sex":"男","age":20},
            {"sid":"2","sanme":"李四","sex":"男","age":21},
            {"sid":"3","sanme":"王五","sex":"女","age":22}]
            //4.2) 循环
            stu.forEach(st=>{
                console.log("姓名:" + st.sanme + "性别:" + st.sex);
            })
        }

五:Array数组对象的基本用法

(1).定义数组

方法一: new Array(参数,参数,参数,参数),当只有一个参数时,代表数组长度,当有两个以上时代表数组的元素
方法二: [元素,元素,元素,元素] :直接赋值

(2).常用得方法

向数组中存放元素
- 第一种方法:使用数组的长度存放,因为js的数组是可变长度的,且从0角标开始
- 第二种方法:使用push()方法,向数组最后存放元素
- 第三种方法:使用unshift()方法在头部存放元素

        //1.3) 向数组中存放内容
        // 1.3.1) 使用数组长度存放,因为js数组是可变长度的数组
        arr3[arr3.length] = 10;
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");
        //1.3.2) 使用push()方法直接向数组的最后添加数据
        arr3.push(50);
        arr3.push(80);
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");

        //1.3.3) 使用unshift在头部添加元素
        arr3.unshift(8);
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");

删除元素
- 使用==shift()==删除头个元素
- 使用==pop()==移除最后一个元素
- 使用splice(参数1,参数2,参数3…)移除范围内的元素并添加新元素
  
  参数1:开始位置
  
  参数2:移除个数
  
  参数3,4,5…:在移除元素的位置上添加新元素

 //1.4) 使用shift将数组头部元素删除
        arr3.shift();
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");
        
 //1.7) splice()移除多个元素,有必要可以亿欧出后同时再添加元素
        arr3.splice(0,3,3,4,5,6);
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");

以指定规则连接数组元素组成字符串:join(’‘连接方式’’)

//1.5) join()连接数组元素
        let info = arr3.join(":");
        console.log(info);
        console.log("-----------------------------");

字符串反转:reverse()

        arr3.reverse();
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");

截取指定范围的数组,返回的也是数组slice(参数,参数)
- 当参数为正数只有一个时,代表从这个参数一直截取到末尾
- 当参数为负数只有一个时,代表lenght + 参数的位置向后截取全部
- 当参数有两个,代表(参数1,参数2]

        //1.8) slice()获取数组中的指定位置,返回值还是数组
        let arr4=arr3.slice(3);     //只指定一个开始,那么一直截取到结尾
        console.log(arr4.join(","));

        arr4=arr3.slice(3,6);       //[3,6)
        console.log(arr4.join(","));

        arr4=arr3.slice(-3);        //负数代表lenght+(-3)开始截取
        console.log(arr4.join(","));

对数组进行排序:==sort()==默认是自然排序
- sort():默认自然排序
- 重写sort的function可以自定义升降序 ==arr3.sort(function(a,b){return a-b})==升序

        //1.9.1) sort()默认排序
        arr3.sort();//------>自然排序
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");

//1.9.2) 指定义排序重写sort函数
        arr3.sort(function(a,b){
            // return a-b;     //升序
            return b-a;     //降序
        });
        for(let arr in arr3){
            console.log("arr3=[" + arr + "]=" +arr3[arr]);
        }
        console.log("-----------------------------");

六:String对象的常用方法

1.indexOf(“子字符串”)

            //2.得到指定字符第一个出现的位置下标
            let index = str.indexOf("l");
            console.log(index);         //2

2.lastIndexOf(“子字符串”)

            //3.得到指定字符串最后一次出现的位置
            let lastindex = str.lastIndexOf("l");
            console.log(lastindex);         //14

3.charAt(index)

            //4.得到指定位置的字符
            let ch = str.charAt(15);
            console.log(ch);                //c

4.toUpperCase()

            //5.将指定字符串转化为大写
            let upper = str.toUpperCase();     
            console.log(upper);

5.toLowerCase()

            //6.将指定字符串转化为小写
            let lower = upper.toLowerCase();    
            console.log(lower);

6.split(“指定字符”)

            //7.将字符串进行拆分,split
            let split = str.split(",");
            split.forEach(s=>{
                console.log(s);  
            });

7.replace(“原字符”,“新字符”)

replace(“o”,“z”)只能修改第一个符合条件的字符
replece(/o/g,“z”)全部修改o字符


            //8.替换指定字符串
            // let replic = str.replace("o","z");      //只修改第一个
            // for(let i in replic){
            //     console.log(replic[i]);
            // }

            replic = str.replace(/o/g,"z");        //修改全部
            for(let i in replic){
                console.log(replic[i]);
            }

8.字符串的截取

方法一:范围截取:substring(start,end) [0,3)
方法二:开始和个数:substr(start,lenght)
方法三:范围截取,可以是负数,slice(),同数组的slice()用法


            //9.截取字符串
            // 9.1) 方法一:使用范围截取substring()
            let substring = str.substring(0,3);
            console.log(substring);         //hel[0,3)

            //9.2) 方法二,使用开始位置和长度进行截取
            let subs = str.substr(4,8);
            console.log(subs);              //o,world,

            //9.3) 方法三:使用slice()方法截取,开始和结束范围截取,可以是负数
            let slice = str.slice(-3);
            console.log(slice);             //va!

        }

七:Math对象的常用方法

获取绝对值: Math.abs();
获取最大值: Math.max( , );
获取最小值: Math.min( , );
获取幂次方: Math.pow( , );
获取平方根: Math.sqrt( );
获取随机数: Math.random();
四舍五入: Math.round();
比这个数大的最小整数: Math.ceil();
比这个数小的最大整数: Math.floor();
获取正弦值: Math.sin();

八:Date对象常用方法

1.分别获取年月日时分秒周

年: getFullYear();
月: getMonth(); 从0月开始是1月
日: getDate();
时: getHours(); 24小时制
分: getMinutes();
秒: getSeconds();
周: getDay(); 从0开始是星期天

//方法一:获得时间对象的一部分
        function testA(){
            //定义时间对象
            let date = new Date();
            //定义星期的数组方便显示
            let week=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

            let year = date.getFullYear();       //年
            let month = date.getMonth();        //月 :从0开始
            let data = date.getDate();          //日 :月中的日数
            let hour = date.getHours();         //小时:24小时值
            let minutes = date.getMinutes();    //分
            let seconds = date.getUTCSeconds();    //秒
            let day= date.getDay();             //周中的天数,0是星期天

            //将day转化为周数
            day = week[day];

            //拼接日期字符串
            let newDate = year + "年" + (month+1) + "月" + data + "日" + " " + hour + ":" + minutes + ":" +
                            seconds +"   " + day;
            
            //为d1赋值
            document.getElementById("d1").innerHTML = newDate;
            
            //动态显示时间(使用setTimeout()方法固定时间刷新一次)
            setTimeout(() => {
                testA();
            }, 1000);

        }

2.获取日期和时间部分字符串进行拼接

日期部分:toLocaleDateString(); 国际标准格式
时间部分:toLocaleTimeString(); 12小时制

//方法二:
        function testB(){
            //定义时间对象
            let date = new Date();
            //定义星期的数组方便显示
            let week=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];

            //2.1) 获得日期部分的字符串(年月日)
            let localeDate = date.toLocaleDateString();
            //2.3) 获得时间部分的字符串(时分秒)
            let localeTime = date.toLocaleTimeString();
            //2.4) 获得星期数
            let index = date.getDay();
            let day = week[index];
            
            // 日期拼接
            let newdate = localeDate + " " + localeTime + " " + day;

            // 为d2添加时间
            document.getElementById("d2").innerHTML=newdate;

            //添加动态时间
            setTimeout(() => {
                testB();
            }, 1000);
        }

九:window对象(少用)

status属性----->状态栏属性
警告弹窗方法-------->alear()
确认对话框------------>confirm();---->"点击确定"返回的是true
输入对话框------------->prompt()
打开新窗口-------------->open();
onload事件------------->当浏览器完成对象的装载后立即触发

十:获取DOM(文档对象)对象

document.getElementById("#d")--------->获取指定id的标签对象的引用
document.getElementByName(".d")----->获取指定name标签属性的对象集合

十一:window对象下的定时器(实现动画效果)

1,使用setTimeout()方法实定时器,底层是递归的方式

setTimeout(()=>{递归的函数},毫秒值),返回的是一个标记(整数)
通过关闭指定标记清空动画效果:clearTime(标记);


            //1.5) 指定定时器,2s改变颜色一次
            let flag = setTimeout(() => {
                testA();
            }, 2000);
            //1.6) 判断第五次清空动画
            if(index == 5){
                clearTimeout(flag);
            }

         }

2.使用setInterval()方法实现动画效果,此方法值只开启一次

setInterval(()=>{递归的函数},毫秒值),返回的是一个标记(整数)
通过关闭指定标记清空动画效果:clearTime(标记);

       
		function testA(){ 
        //8.判断结束定时器的条件
        if(parseInt(ZL.D("d2").style.height) >=500){
            clearInterval(flag);
        }

        }

        var flag;	
        window.onload = function(){
            ZL.D("d2").style.height="10px";
             //7.定时器实现动画效果
             flag = setInterval(()=>{
                testA();
            });
            testA();
        }

十二:event对象

event对象代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.

 <script>
        
            //1.将控件id定义为数组
            let controls = ["username","password","btn"];
            //2. 定义下标的变量
            let index = 0;
            //3. 获得事件状态event对象方法
            document.onkeydown=function(e){
                //4.判断如果用户触发了一次回车键(code码:13),那么将焦点移动到id数组的元素
                if(e.keyCode == 13){
                    let id = controls[index % controls.length];
                    
                    //5.在指定id内设置焦点
                    document.getElementById(id).focus();
                }

            }

十三:表单验证

onsubmit = “return 函数()”-------->根据返回的boolean判断是否允许提交
onblur=“函数(this)”----------------->获得焦点时执行此函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单验证</title>
    <script src="js/myjs.js"></script>

    <script>
        // 1.定义需要判断都为true的变量
        var a = b = c = d = e = f = g = h = false; 
        //1.判断username是否符合要求,如果符合,那么返回true
        function v_username(v){
            if(v.value.length == 0){
                document.getElementById("username_error").innerHTML = "用户名不能为空！";
            }else if(v.value.length <=6){
                ZL.V("username_error","用户名长度不能少于6个");

            }else
            {
                ZL.V("username_error","");//将验证信息清空并且将变量赋值为true
                a = true;
            }
        }

        function v_xing(v){
            if(v.value.length == 0){
                ZL.V("xing_error","姓式不能为空");
            }else {
                ZL.V("xing_error","");//将验证信息清空并且将变量赋值为true
                b = true;
            }
        }
        //登录名不为空,且首字母只能是字符
        function v_loginname(v){
            let pattern = /[a-zA-Z]{1}/;
            if(v.value.length == 0){
                ZL.V("loginname_error","登录名不能为空");
            }else if (v.value.charAt(0).match(pattern) == null){//String.math(正则)
                ZL.V("loginname_error","首字母必须是字母");
            }else {
                ZL.V("loginname_error","");//将验证信息清空并且将变量赋值为true
                c = true;
            }

        }
        //2.5)验证密码
        function v_password(v){
            //2.5.1)定义密码验证规则的表达式
            let patt = /\w{8,}/;
            if(v.value.length == 0){
                ZL.V("password_error","密码不能为空！")
            }else if(!patt.test(v.value)){
                ZL.V("password_error","密码不能少于8位！")
            }else{
                ZL.V("password_error","");
                d = true;
            }
        }

        //2.6)重复密码的验证
        function v_repassword(v){
            if(v.value.length == 0){
                ZL.V("repassword_error","重复密码不能为空！");
            }else if(ZL.D("password").value != v.value){
                ZL.V("repassword_error","两次密码不一致！");
            }else{
                ZL.V("repassword_error","");
                e = true;
            }
        }

        //2.7)验证邮箱
        function v_email(v){
            //2.7.1)定义电子邮箱的正则表达式
            let patt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if(v.value.length == 0){
                ZL.V("email_error","电子邮箱不能为空！");
            }else if(!patt.test(v.value)){
                ZL.V("email_error","电子邮箱不合法！");
            }else{
                ZL.V("email_error","");
                f = true;
            }
        }
    

        //2.8)验证年份
        function v_year(v){
            if(v.value.length == 0){
                ZL.V("year_error","年份不能为空！");
            }else if(isNaN(v.value)){
                ZL.V("year_error","年份只能是数字！");
            }else if(v.value.length != 4){
                ZL.V("year_error","年份只能是四位数字！");
            }else{
                ZL.V("year_error","");
                g = true;
            }
        }

        //2.9)验证天数
        function v_day(v){
            //2.9.1)验证天数的正则表达工
            var day_pat = /^(([1-9])|((1|2)[0-9])|30|31)$/;
            if(v.value.length == 0){
                ZL.V("day_error","天数不能为空！");
            }else if(!day_pat.test(v.value)){
                ZL.V("day_error","天数不合法！");
            }else {
                ZL.V("day_error","");
                h = true;
            }
        }

    

    //1.返回有个boolean给提交事件判断是否可提交
    function testA(){
        // return false;        此时状态不可提交
        return a && b && c && d && e && f && g && h;
    }
    </script>


</head>
<body>
        <form method="post" action="a.jsp" name="form1" onsubmit="return testA()">
                <table width="1050" align="center">
                    <tr>
                        <td colspan="3">
                            <img src="img/11.png" width="250" height="60" />
                        </td>
                    </tr>
                    <tr>
                        <td width="217" align="center">名字：</td>
                        <td width="412">
                            <input name="username" type="text" id="username" 
                                   onblur="v_username(this)" />    <!--  onblur:失去焦点事件 -->
                        </td>
                        <td width="157">
                            <span id="username_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">姓氏：</td>
                        <td>
                            <input name="xing" type="text" id="xing" onblur="v_xing(this)" />
                        </td>
                        <td>
                            <span id="xing_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">登录名：</td>
                        <td>
                            <input name="loginname" type="text" id="loginname" onblur="v_loginname(this)" />
                        </td>
                        <td>
                            <span id="loginname_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">密码：</td>
                        <td>
                            <input name="password" type="password" id="password" onblur="v_password(this)" />
                        </td>
                        <td>
                            <span id="password_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">再次输入密码：</td>
                        <td>
                            <input name="repassword" type="password" id="repassword" onblur="v_repassword(this)" />
                        </td>
                        <td>
                            <span id="repassword_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">电子邮箱：</td>
                        <td>
                            <input name="email" type="text" id="email" onblur="v_email(this)" />
                        </td>
                        <td>
                            <span id="email_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">性别：</td>
                        <td>
                            <input name="sex" type="radio" value="radiobutton" checked="checked" /> 男
                            <input type="radio" name="sex" value="radiobutton" /> 女
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">爱好：</td>
                        <td>
                            <input name="interest" type="checkbox" name="interest" value="打球" /> 打球
                            <input name="interest" type="checkbox" name="interest" value="下棋" /> 下棋
                            <input name="interest" type="checkbox" name="interest" value="游泳" /> 游泳
                            <input name="interest" type="checkbox" name="interest" value="唱歌" /> 唱歌
                            <input name="interest" type="checkbox" name="interest" value="爬山" /> 爬山
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td align="center">出生日期：</td>
                        <td>
                            <input name="year" type="text" size=5 onblur="v_year(this)" />年
                            <select name="month" id="month">
                                <option value="一月" selected="selected">一月</option>
                                <option value="二月">二月</option>
                                <option value="三月">三月</option>
                                <option value="四月">四月</option>
                                <option value="五月">五月</option>
                                <option value="六月">六月</option>
                                <option value="七月">七月</option>
                                <option value="八月">八月</option>
                                <option value="九月">九月</option>
                                <option value="十月">十月</option>
                                <option value="十一月">十一月</option>
                                <option value="十二月">十二月</option>
                            </select>
                            <input name="day" type="text" id="day" size="5" onblur="v_day(this)" /> 天 </td>
                        <td>
                            <span id="year_error"></span>
                            <span id="day_error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <input type="reset" name="Submit" value="重填" />
                        </td>
                        <td colspan="2" align="center">
                            <input type="submit" value="同意以上服务条款，提交注册信息" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <img src="img/12.png" width="20" height="20" />阅读淘宝网许可协议 </td>
                    </tr>
                </table>
            </form>
</body>
</html>

十四:案例–>全选、全不选、反选

设置checked属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选、全不选、反选</title>
    <style>
       div{
            background: blue;
            color: white;
            font: bold 20px 微软雅黑;
            width: 500px;
            /* height: 100px; */
            margin-top: 10px;
        }
    </style>
    
    <!-- 1.引入js库 -->
    <script src="JS/myjs.js"></script>
    <script>
        //1. 定义selectAll事件,flag参数代表我们触发事件时传入的值
        function selectAll(flag){
            // 1.1) 获取所有复选框对象
            let checks = LW.N("habby");
            //1.2) 遍历,获得每一个对象并且赋值checked
            for(let i=0,len = checks.length;i<len;i++){
                checks[i].checked=flag;
            }
        }
        //2. 定义reverseAll()反选事件
        function reverseAll(){
            // 2.1) 遍历所有复选框对象
            for(let i = 0,len = LW.N("habby").length; i<len;i++){
                //第一种:判断是否被选中
            //     // 2.2) 判断当前对象是否被选择
            //     if(LW.N("habby")[i].checked){
            //         LW.N("habby")[i].checked = false;
            //     }else
            //     LW.N("habby")[i].checked = true;
            // }
                //第二种:直接将所有checked的值取反
                LW.N("habby")[i].checked = !(LW.N("habby")[i].checked);
        }
    }
        //3.查看选择,将选择的value的值写入到#d中
        function findSelect(){
            //2.0) 定义需要写入#d的文本
            let info = "";
            //2.1) 遍历所有复选框对象
            for(let i = 0,len = LW.N("habby").length; i<len;i++){
                //2.2) 获得所有被选中的复选框的值
                if(LW.N("habby")[i].checked){
                    info += LW.N("habby")[i].value + ",";
                }
            }
            //2.3) 将最后一个,删除
            info = info.substr(0,(info.length-1));
            //2.3)将值写入到#d中
            LW.D("d").innerHTML = info;
        }

        //4.当用户点击复选框时就打印选择信息在#d中(第一种方法,将事件与上面的绑定)
        function chageSelect(){
            for(let i = 0,len = LW.N("habby").length; i<len;i++){
                LW.N("habby")[i].onclick = findSelect;
                
            }
        }

        window.onload = function(){
            chageSelect();
        }
    
    </script>
</head>
<body>
    请选择你的爱好：
    <br>
    <input type="checkbox" name="habby" value="唱歌">唱歌
    <br>
    <input type="checkbox" name="habby" value="跳舞">跳舞
    <br>
    <input type="checkbox" name="habby" value="下棋">下棋
    <br>
    <input type="checkbox" name="habby" value="打牌">打牌
    <br>
    <input type="checkbox" name="habby" value="游泳">游泳
    <br>
    <input type="button" value="全选" onclick="selectAll(true)">
    <input type="button" value="全不选" onclick="selectAll(false)">
    <input type="button" value="反选" onclick="reverseAll()">
    <input type="button" value="查看选择" onclick="findSelect()"><br>
    <div id="d"></div>
</body>
</html>

十五:案例–>省市级联

调用select对象的options对象的add属性

new Option(i,j):新增一个option标签,i:text值,j:value值

LW.D(“citys”).options.add(new Option(cit[i],cit[i]));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市级联</title>
    <script src="js/myjs.js"></script>
    <script>
    // //定义每个省份的市级数组
    // let provinces =[];
    //     provinces["湖南省"] = ['长沙','岳阳','常德','株洲','湘潭'];
    //     provinces['海南省'] = ['海口','三亚','文昌','琼州'];
    //     provinces['湖北省'] = ['武汉','黄冈','襄阳','十堰','荆州'] ;
    //     provinces['广东省'] = ['广州','深圳','珠海','佛山','东莞'];
    //上面的数组可以改造成对象：
    let provinces = {
                '湖南省':['长沙','岳阳','常德','株洲','湘潭'],
                '海南省' : ['海口','三亚','文昌','琼州'],
                '湖北省' : ['武汉','黄冈','襄阳','十堰','荆州'] ,
                '广东省' : ['广州','深圳','珠海','佛山','东莞']
            }
        // 1.定义选择的函数
        function changeProvince(v){
            // 2.获得所选的省份的数组
           let cit = provinces[v];
        //    console.log( LW.D("province").value);
           LW.D("citys").options.length = 0;
           //3. 遍历数组,将每个城市添加到#citys中
           for(let i = 0,len = cit.length;i<len;i++){
               LW.D("citys").options.add(new Option(cit[i],cit[i]));
           }
        }
        //让首个城市一加载完成就赋值到市级联框中
        window.onload = function(){
            // console.log( LW.D("province").value);
            changeProvince(LW.D("province").value);
        }
    
    </script>
</head>
<body>
        请选择省份：
        <select id="province" onchange="changeProvince(this.value)">
            <option value="湖南省">湖南省</option>
            <option value="海南省">海南省</option>
            <option value="湖北省">湖北省</option>
            <option value="广东省">广东省</option>
        </select>
        请选择城市：
        <select id="citys"></select>
</body>
</html>

十六:案例–>手风琴菜单

搭配鼠标监听事件:

onmouseover:鼠标移动上去时触发事件函数

onmouseout:鼠标移出时触发事件函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手风琴菜单</title>
    <style>
            button.accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                margin-bottom: 0px;
                margin-top: 5px;
                border-radius: 10px 10px 0px 0px;
            }
    
            button.accordion.active,
            button.accordion:hover {
                background-color: #ddd;
            }
    
            div.panel {
                padding: 0 18px;
                background-color: white;
                display: none;      /*隐藏菜单,自动让出当前位置*/
                border: 1px solid #ddd;
                border-top: 0;
                margin-top: -17px;
                margin-bottom: 10px;
                border-radius: 0px 0px 5px 5px;
            }
        </style>
        <script src="js/myjs.js"></script>
        <script>
            //案例:当选择按钮选项卡时,隐藏所有div,再临近的div显示
            function testA(){
                //遍历将所有按钮绑定事件
                for(let i=0,len = LW.C("accordion").length; i<len; i++){
                    LW.C("accordion")[i].onmouseover = mouseover;
                    // LW.C("accordion")[i].onmouseout = mouseout;
                    
                }

            }
            //当鼠标移动入此button时触发,隐藏所有div,再临近的div显示
            function mouseover(){
                for(let i=0,len = LW.C("panel").length; i<len; i++){
                LW.C("panel")[i].style.display = "none";//隐藏div
            }
                this.nextElementSibling.style.display = "block";//临近DIV显示
            }
            //当鼠标移出button时触发,隐藏所有div,效果不好
            // function mouseout(){
            //     for(let i=0,len = LW.C("panel").length; i<len; i++){
            //     LW.C("panel")[i].style.display = "none";//隐藏div
            // }
            // }

            window.onload = function(){
                testA();
            }
        
        </script>

</head>
<body>
        <h2>手风琴动画</h2>
        <p>点击以下选项显示折叠内容</p>
        <button class="accordion">选项 1</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <button class="accordion">选项 2</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <button class="accordion">选项 3</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
</body>
</html>

十七:案例–>表格操作

DOM.cloneNode(true):复制一个对象

DOM.appendChild(对象):在指定表格添加指定对象

LW.D(“tab”).deleteRow(index):在指定表格删除指定索引的行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tablevaozhu</title>
    <style>
            table {
                border: 1px solid #ddd;
                border-collapse: collapse;
                width: 800px;
                text-align: center;
                margin: 0 auto;
            }
    
            .first {
                background: #ccc;
                color: white;
                height: 45px;
            }
    
            td {
                border: 1px solid #ddd;
                height: 35px;
            }
    
            a {
                text-decoration: none;
                color: cadetblue;
            }
    
            a:hover {
                text-decoration: underline;
                color: gray;
            }
    
            input {
                width: 150px;
                border: 1px solid #ddd;
            }
    
            #demo {
                display: none;
            }
        </style>
        <script src="js/myjs.js"></script>
        <script>
            // 案例:当点击添加学生按钮时,触发事件addStudent1(),完成对#demo模板的复制,
            //当点击对应的删除键,获取对象层次中的父对象。将当前tr删除
            
            //定义点击添加事件
            function addStudent1(){
                //1.获得示范行DOM对象
                let row = LW.D("demo");
                //2,克隆一行
                let newRow = row.cloneNode(true);
                //设置克隆的样式,因为母版是隐藏的,所以复制出来的也是隐藏的
                newRow.style.display="table-row";
                //3,将其添加到表格中
                LW.D("tab").appendChild(newRow);

            }

            //定义删除事件
            function delStudent(v){
                //1.得到删除的标签的td的tr对象
                let row = v.parentNode.parentNode;//第一个是td对象,第二个是所在的tr对象
                //2.获得要删除的行的索引
                let index=row.rowIndex;
                //从表格中删除此行
                LW.D("tab").deleteRow(index);
               
            }

        
        </script>
</head>
<body>
        <table id='tab'>
                <tr>
                    <td colspan="6" align=right>
                        <a href="#" onclick="addStudent1()">添加学生</a>
                    </td>
                </tr>
                <tr class='first'>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>操作</td>
                </tr>
                <tr id='demo'>
                    <td>
                        <input type="text" name='sid'>
                    </td>
                    <td>
                        <input type="text" name='sname'>
                    </td>
                    <td>
                        <select name="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" name="age">
                    </td>
                    <td>
                        <input type="text" name="addr">
                    </td>
                    <td>
                        <a href="#" onclick="delStudent(this)">删除</a>
                    </td>
                </tr>
            </table>
</body>
</html>

进击的小小码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JScript基本认知

JavaScript基础一:JavaScriptJavaScript简称js,是一门浏览器编程语言,它由三部分组成:ECMAStript:描述了该语言的语法和基本对象DOM(文档对象模型):描述处理网页内容的方法和接口BOM(浏览器对象模型):描述与浏览器进行交互的方法和接口二:JS下变量的声明(1):变量的命名原则变量名必须是数字,字母,_和$四种字符组成变量名首字母不能是数字变量名区分大小写不能是JS中的保留字尽量做到望文生义(2):变量的声明let和var的区别le
复制链接

扫一扫