JavaScript高级讲义

最新推荐文章于 2023-06-09 10:35:10 发布

MapSet

最新推荐文章于 2023-06-09 10:35:10 发布

阅读量356

点赞数

分类专栏：学习记录

本文链接：https://blog.csdn.net/copyright0501/article/details/106592178

版权

学习记录专栏收录该内容

53 篇文章 3 订阅

订阅专栏

JavaScript高级讲义

第一章 JSON数据

1.1-JSON基础

什么是JSON: 一种数据格式
    对象类型(格式1):
		{键:值,键:值,键:值..}
	数组类型(格式2):
		[值1,值2,值3,...]
	混合类型(嵌套格式):
		{键:[],键:[],...}
		[{},{},{}]
	
    <script type="text/javascript">
        /*JSON的3种数据格式*/
        /*1.JSON对象*/
        let json1 = {age:18,name:"张三",sex:"男"};
        console.log(typeof json1);
        console.log(json1);

        console.log(json1.age)
        console.log(json1.name)
        console.log(json1.sex);

        console.log(json1["age"]);
        console.log(json1["name"]);
        console.log(json1["sex"]);
        /*2.Json数组*/
        console.log("------------")
        let json2 = ["jack","tom","rose","jerry"];
        console.log(typeof json2);
        console.log(json2);

        console.log(json2[0]);
        console.log(json2[1]);
        console.log(json2[2]);
        console.log(json2[3]);
        /*3.json混合对象*/
        console.log("------------")
        let json3 = [{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:22}];
        console.log(json3);

        console.log(json3[1].name);
        console.log(json3[1].age);

        console.log(json3[2]["name"]);
        console.log(json3[2]["age"]);

        console.log("------------");
        let json4 = {java:[100,90,120],ui:[80,100,99],c:[100,90,95]};

        console.log(json4);

        console.log(json4.ui[0])
        console.log(json4.ui[1])
        console.log(json4.ui[2])

        console.log(json4["ui"][0])
        console.log(json4["ui"][1])
        console.log(json4["ui"][2])
    </script>

1.2-JSON格式转换

a.JSON转成字符串: JSON.stringify(json对象)
b.字符串解析成JSON: JSON.parse(字符串);

    <script type="text/javascript">
        /*JSON与String的转换*/
        /*1.JSON转成String*/
        let json1 = {name:"张三",age:18,password:"123321"};

        let json1Str = JSON.stringify(json1);

        console.log(typeof json1Str);
        console.log(json1Str);

        /*2.String转成JSON对象*/
        console.log("--------");
        let json2 = JSON.parse(json1Str);

        console.log(typeof json2);
        console.log(json2);
    </script>

第二章 BOM对象

2.1- BOM简介

什么是BOM: 浏览器对象模型
    (了解)BOM中的五大对象:"window对象",navigator对象,screen对象,history对象,"location对象"

2.2 Window 对象

window对象称为全局对象,意思是:该对象中的函数,调用时可以不写window.直接写函数名()进行调用

2.3-JS三个弹框

a.信息提示框: window.alert("要弹出的消息");
b.用户确认框: window.confirm("要确认的消息");
c.用户输入框: window.prompt("提示要输入的内容");
    <script type="text/javascript">
        /*1.信息提示框*/
        window.alert("警告:内存不足!!");
        /*2.消息确认框*/
        let result = window.confirm("您确认满18了吗?");
        if (result){
            console.log("视觉盛宴...")
        }else{
            console.log("再等两年...")
        }
        /*3.用户输入框*/
        let name = window.prompt("请输入您的姓名:","比如:jack");
        console.log(name);
    </script>

2.4-JS两个定时器

a.周期定时器: window.setInterval(函数名,时间间隔);
b.一次性定时器: window.setTimeout(函数名,时间延迟);

c.取消周期定时器: window.clearInterval(周期定时器的ID);
d.取消一次性定时器: window.clearTimeout(一次性定时器的ID);(必须在一次性定时器执行之前取消)

    <input type="button" value="点我取消周期定时器" onclick="quxiao1()"/>
    <input type="button" value="点我取消一次性定时器" onclick="quxiao2()"/>

    <script type="text/javascript">
        function task() {
            console.log(new Date());
        }
        /*window的两个定义器*/
        /*1.周期定时器*/
        let intervalID = window.setInterval(task,1000);
        /*2.一次性定时器*/
        let timeoutID = window.setTimeout(task,4000);

        /*定义两个取消函数*/
        function quxiao1() {
            window.clearInterval(intervalID);
        }

        function quxiao2() {
            window.clearTimeout(timeoutID);
        }
    </script>

2.5-location地址

location对象,操作当前浏览器url地址
    a.location.href 获取当前页面的url地址
    b.location.reload() 让当前页面刷新
    c.location.href = 新的地址; 让当前页面跳转到新的地址

    <input type="button" value="点我获取当前地址" onclick="huoqu()"/>
    <input type="button" value="点我刷新当前地址" onclick="shuaxin()"/>
    <input type="button" value="点我跳转到新地址" onclick="tiaozhuang()"/>
    <script type="text/javascript">
        /*location对象的三个功能*/
        /*1.获取*/
        function huoqu() {
            console.log(location.href);
        }
        /*2.刷新*/
        function shuaxin() {
            location.reload();
        }
        /*3.跳转*/
        function tiaozhuang() {
            location.href = "http://www.itheima.com";
        }
    </script>

第三章 DOM对象(重点掌握)

3.1-dom简介

什么是DOM:文档对象模型(实际上就是一颗倒立的DOM树)

3.2-dom获取标签

ECMA Scprit6.0的函数
a.获取单个标签:
	document.querySelector("CSS的选择器");
b.获取所有标签
    document.querySelectorAll("CSS的选择器");
ECMA Script5.0的函数(了解)
    document.getElementById(元素id);
	document.getElementByClassName(元素类名);
	document.getElementByTagName(标签名);

<head>
    <meta charset="UTF-8">
    <title>6.DOM获取元素</title>
    <script type="text/javascript">
        /*页面加载完毕事件*/
        window.onload = function () {
            /*在页面加载完毕后获取,才能保证所有标签都能获取到*/
            let userNameObj = document.querySelector("#userName"); // id选择器
            console.log(userNameObj);

            let radioObjs = document.querySelectorAll(".radio"); // 类选择器
            for(let radioObj of radioObjs){
                console.log(radioObj);
            }

            let optionObjs = document.querySelectorAll("option"); // 标签选择器
            for(let optionObj of optionObjs){
                console.log(optionObj);
            }

            let checkBoxObjs = document.querySelectorAll("input[type='checkbox']"); // 属性选择器
            for(let checkBoxObj of checkBoxObjs){
                console.log(checkBoxObj);
            }
            console.log("------------");
            let objs = document.querySelectorAll(".radio,option"); // 并列选择器
            for(let obj of objs){
                console.log(obj);
            }
        }
    </script>
</head>
<body>
    <form action="#" method="get">
        姓名 <input type="text" name="userName" id="userName" value="邱少云"/> <br/>
        密码 <input type="password" name="userPass"> <br/>
        生日 <input type="date" name="userBirth"><br/>
        性别 <input type="radio" name="gender" value="male" class="radio" checked="checked">男&emsp;
            <input type="radio" name="gender" value="female" class="radio"/>女<br/>
        爱好 <input type="checkbox" name="hobby" value="smoke">抽烟
            <input type="checkbox" name="hobby" value="drink" checked>喝酒
            <input type="checkbox" name="hobby" value="perm" checked="true">烫头<br/>
        头像 <input type="file" name="userPic"><br/>
        学历<select name="userEdu">
                <option value="0">请选择</option>
                <option value="1">入门</option>
                <option value="2" selected>精通</option>
                <option value="3">放弃</option>
            </select><br/>
        简介 <textarea name="userIntro" cols="30" rows="10">
                再次输入您的简介
            </textarea><br/>

        <input type="reset" value="清空按钮"/>
        <input type="submit" value="提交按钮"/><br/>
        <input type="button" value="普通按钮">
    </form>
</body>

3.3-dom操作内容

a.标签对象.innerText 获取或者修改标签的纯文本内容
b.标签对象.innerHtml 获取或者修改标签的html内容
c.标签对象.outerHtml 获取或者修改标签的html内容(包含本身的)

    <div id="d1" style="background-color: red">我是d1<br/></div>
    <div id="d2" >我是d2</div>
    <div id="d3">我是d3</div>
    <script type="text/javascript">
        /*操作标签的内容*/
        /*1.innerText*/
        let div1 = document.querySelector("#d1");
        console.log(div1.innerText);
        div1.innerText = "<h1>新的内容</h1>";

        /*2.innerHtml*/
        console.log(div1.innerHTML);
        div1.innerHTML = "<h1>新的内容</h1>";

        /*3.outerHtml*/
        console.log(div1.outerHTML);
        div1.outerHTML = "<h1>新的内容</h1>";
    </script>

3.4-dom操作属性

a.标签对象.属性名 (必须HTML预定好的属性)
b.标签对象.getAttribute(属性名);    
  标签对象.setAttribute(属性名,属性值);
  标签对象.removeAttribute(属性名);	

    <form action="#" method="get">
        姓名 <input type="text" name="userName" id="userName" value="邱少云"/> <br/>
    </form>
    <script type="text/javascript">
        /*操作属性*/
        /*1.操作元素原生属性,标签对象.属性名*/
        let userNameObj = document.querySelector("#userName");
        console.log(userNameObj.value);
        userNameObj.value = "黄继光";

        console.log(userNameObj.type);
        userNameObj.type = "password";

        /*2.操作元素自定义属性,标签对象.get/set/remove+Attribute*/
        console.log("----------------")
        userNameObj.setAttribute("data","我是一个文本框");
        console.log(userNameObj.getAttribute("data"));

        userNameObj.setAttribute("data","我还是一个文本框");
        console.log(userNameObj.getAttribute("data"));

        userNameObj.removeAttribute("data");
        console.log(userNameObj.getAttribute("data"));
    </script>

3.5-dom操作样式

直接操作标签的样式
a.标签对象.style.样式名(样式名采用驼峰式)  获取或者修改标签的某个css样式
b.标签对象.style.cssText  批量获取或者修改标签的css样式   
通过修改类名切换样式    
c.标签对象.className 获取或者修改标签的类名  
d.标签对象.classList 获取标签所有类型,变成数组/集合  
    获取到类名的集合之后,通过调用
    	add(类名) 添加一个class样式 
    	remove(类名) 移除一个class样式 
    	contains(类名) 判断是否包含某一个样式 
    	toggle(类名) 切换一个class样式 有则删除,无则添加
    
    <p id="p1">1. 设置一个css样式</p>
    <p id="p2">2. 批量设置css样式</p>
    <p id="p3" class="mp">3. 通过class设置样式</p>
    <p id="p4" class="mpp">4. 切换class样式</p>
    <script type="text/javascript">
        /*DOM操作样式*/
        /*1.操作单个样式,标签对象.style.样式名*/
        let p1Obj = document.querySelector("#p1");
        console.log(p1Obj);
        p1Obj.style.fontSize = "50px";
        p1Obj.style.color = "red";
        p1Obj.style.fontWeight = "bold";
        p1Obj.style.fontStyle = "italic";
        /*2.操作批量样式,标签对象.style.cssText*/
        let p2Obj = document.querySelector("#p2");
        console.log(p2Obj);
        p2Obj.style.cssText = "font-size: 60px;color: blue;font-weight: bold;font-style: italic";
        /*3.通过修改标签的类名,切换标签的样式*/
        let p3Obj = document.querySelector("#p3");
        console.log(p3Obj);
        p3Obj.className += " mpp";
        /*4.获取标签所有的类型,标签对象.classList*/
        let p4Obj = document.querySelector("#p4");
        let p4ClassList = p4Obj.classList;
        p4ClassList.add("mp");
        p4ClassList.remove("mpp");
        console.log(p4ClassList.contains("mp"));
        p4ClassList.toggle("mpp");
    </script>

3.6 dom操作元素

a.标签对象.innerHtml
b.通过面向对象的实现(了解)
	document.createElement("标签名");
	父标签对象.appendChild(子标签对象);
c.标签对象.outerHtml

<div id="container">
    <div id="div1">
        <input id="smoke" type="checkbox" name="hobby" value="抽烟"> <label>抽烟&emsp;</label>
    </div>
</div>
<script type="text/javascript">
    /*操作元素*/
    /*1.使用innerHtml 添加标签*/
    let divObj = document.querySelector("#container");
    console.log(divObj.innerHTML);

    divObj.innerHTML += '<input id="drink" type="checkbox" name="hobby" value="喝酒"> <label>喝酒&emsp;</label>';
    divObj.innerHTML += '<input id="perm" type="checkbox" name="hobby" value="烫头"> <label>烫头&emsp;</label>';

    /*2.使用面向对象的方式*/
    let inputObj = document.createElement("input");
    inputObj.id = "majiang";
    inputObj.type = "checkbox";
    inputObj.name = "hobby";
    inputObj.value = "麻将";

    let labelObj = document.createElement("label");
    labelObj.innerHTML = "打麻将&emsp;";

    divObj.appendChild(inputObj);
    divObj.appendChild(labelObj);
    /*3.使用outerHtml删除标签*/
    let div1Obj = document.querySelector("#div1");
    div1Obj.outerHTML = "";
</script>

第四章正则表达式(了解)

4.1-正则表达式

什么是正则表达式:
	代表一种规则,用来匹配字符串,判断字符串是否符合该规则
        
JS正则表达式的语法:
	格式:
		/^正则表达式$/匹配模式 (/正则表达式/匹配模式)
		
        new RegExp("正则表达式","匹配模式"); (不推荐,因为在""中某些字符需要转义,比如\d需要写成\\d)     使用的区别:
		java中: boolean b = "普通字符串".match("正则表达式");
		js中:
			let b = 正则表达式对象.test("普通字符串");
            "普通字符串".match(正则表达式对象),从普通字符串中取出符合正则表达式的第一个子串
      
     小练习:
	        <script type="text/javascript">
                /*1.正则表达式对象.test("普通字符串")*/
                //正则表达式对象 /^正则表达式$/ 表示完全符合正则的要求
                let reg = /^\d{3}$/;
                console.log(reg.test("132"));

                let reg1 = /\d{3}/;
                // 正则表达式对象  /正则表达式/ 表示字符串中包含正则的要求的子串即可
                console.log(reg1.test("a123b"));

                /*2."普通字符串".macth(正则表达式对象)*/
                let result = "a1a23b456c789d".match(/\d{3}/);
                /*match我们一般使用/正则表达式/,因为我们需要取出符合要求的子串*/
                console.log(result);
            </script>
	  正则中的匹配模式:
			i 不区分大小写 ,匹配字符串时不区分大小写 
			g 全局匹配 ,匹配到一个之后不停止,匹配字符串的所有内容 
			m 多行匹配 ,匹配字符串的所有行的内容
	  小练习:
		 <script type="text/javascript">
		    /*3.正则表达式的匹配模式*/
            /*i 不区分大小写 ,匹配字符串时不区分大小写*/
            let reg2 = /^[a-z]{3}$/i
            console.log(reg2.test("aBc"));;

            /*g 全局匹配 ,匹配到一个之后不停止,匹配字符串的所有内容*/
            let result1 = "a123b456c789d".match(/\d{3}/g);
            console.log(result1);
            /*m 多行匹配 ,匹配字符串的所有行的内容*/
            let result2 = "456javaphp\n123ios\n789iphone".match(/^\d{3}/gm);
            console.log(result2);
	      </script>

第五章综合案例

5.1-案例-表单校验

什么是表单校验:
	当提交表单时,先对表单中各种数据进行合法性校验,只有都符合要求再提交,如果有不符合要求的那么不提交
	onsubmit:表单提交时判定如果返回false则不会提交

<form action="#" onsubmit="return tijiao()">
    <table width="700px" height="350px">
        <tr>
            <td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td>
        </tr>
        <tr>
            <td align="right">用户名</td>
            <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
                                                                                                  id="loginnamewarn" class="warn">用户名长度不对</span></td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="50"/></td>
        </tr>
        <tr>
            <td align="right">确认密码</td>
            <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="50"/><span
                                                                                                        id="pwdwarn" class="warn">密码不一致</span></td>
        </tr>
        <tr>
            <td align="right">Email</td>
            <td colspan="2"><input id="emailId" type="text" name="email" size="50"/> <span id="emailwarn"
                                                                                           class="warn">邮箱格式有误</span>
            </td>
        </tr>
        <tr>
            <td align="right">姓名</td>
            <td colspan="2"><input name="text" name="username" size="50"/></td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td colspan="2"><input type="radio" name="gender" value="男" checked="checked"/>男 <input type="radio"
                                                                                                    name="gender"
                                                                                                    value="女"/>女
            </td>
        </tr>
        <tr>
            <td align="right">电话号码</td>
            <td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"
                                                                                         class="warn">手机格式有误</span>
            </td>
        </tr>
        <tr>
            <td align="right">所在地</td>
            <td colspan="3"><select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
                <option value="">----请-选-择-省----</option>
                <option value="0">北京</option>
                <option value="1">辽宁省</option>
                <option value="2">江苏省</option>
                </select> <select id="cityId" style="width:150px">
                <option>----请-选-择-市----</option>
                </select></td>
        </tr>
        <tr>
            <td width="80" align="right">验证码</td>
            <td width="100"><input type="text" name="verifyCode"/></td>
            <td><img src="../img/checkMa.png"/></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input id="rebtn" type="submit" value="注册"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    /*表单提交绑定的函数*/
    function tijiao() {
        /*1.判断用户名*/
        let userNameInputObj = document.querySelector("#loginnameId");
        let username = userNameInputObj.value;
        /*长度必须是5-8之间*/
        if (!(/^[a-zA-Z0-9]{5,8}$/.test(username))) {
            let warnObj =document.querySelector("#loginnamewarn");
            warnObj.style.display = "inline";
            return false;
        }else{
            let warnObj =document.querySelector("#loginnamewarn");
            warnObj.style.display = "none";
        }

        /*2.密码和确认密码,课下自己完成*/
        /*3.邮箱验证*/
        let emailInputObj = document.querySelector("#emailId");
        let email = emailInputObj.value;
        /*邮箱正则:*/
        if (!(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email))) {
            let warnObj =document.querySelector("#emailwarn");
            warnObj.style.display = "inline";
            return false;
        }else{
            let warnObj =document.querySelector("#emailwarn");
            warnObj.style.display = "none";
        }
        /*4.手机号课下自己完成*/
        /*5.姓名课下自己完成*/
    }
</script>

5.2-案例-商品全选

    <!-- 商品全选1. 全选 点击全选按钮,所有复选框都被选中 2. 反选 点击反选按钮,所有复选框状态取反 -->
    <button id="btn1" onclick="quan()">1. 全选</button>
    <button id="btn2" onclick="fan()">2. 反选</button>
    <button id="btn3" onclick="bu()">3. 全不选</button><br/>
    <input type="checkbox">电脑
    <input type="checkbox">手机
    <input type="checkbox">汽车
    <input type="checkbox">别墅
    <input type="checkbox" checked="checked">笔记本
    <script type="text/javascript">
        /*全选函数*/
        function quan() {
           //1.获取所有多选框标签
            let checkBoxObjs = document.querySelectorAll("input[type='checkbox']");
            //2.遍历
            for(let checkBOxObj of checkBoxObjs){
                checkBOxObj.checked = true;
            }
        }
        /*反选函数*/
        function fan() {
            //1.获取所有多选框标签
            let checkBoxObjs = document.querySelectorAll("input[type='checkbox']");
            //2.遍历
            for(let checkBOxObj of checkBoxObjs){
                checkBOxObj.checked = !checkBOxObj.checked;
            }
        }
        /*全不选函数*/
        function bu() {
            //1.获取所有多选框标签
            let checkBoxObjs = document.querySelectorAll("input[type='checkbox']");
            //2.遍历
            for(let checkBOxObj of checkBoxObjs){
                checkBOxObj.checked = false;
            }
        }
    </script>

5.3-案例-省市级联

<form action="#">
    <table width="600" height="350px">
        <tr>
            <td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td>
        </tr>
        <tr>
            <td align="right">用户名</td>
            <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/></td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/></td>
        </tr>
        <tr>
            <td align="right">确认密码</td>
            <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/></td>
        </tr>
        <tr>
            <td align="right">Email</td>
            <td colspan="2"><input id="emailId" type="text" name="email" size="60"/></td>
        </tr>
        <tr>
            <td align="right">姓名</td>
            <td colspan="2"><input name="text" name="username" size="60"/></td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td colspan="2"><input type="radio" name="gender" value="男" checked="checked"/>男 <input type="radio"
                                                                                                    name="gender"
                                                                                                    value="女"/>女
            </td>
        </tr>
        <tr>
            <td align="right">电话号码</td>
            <td colspan="2"><input type="text" name="phone" size="60"/></td>
        </tr>
        <tr>
            <td align="right">所在地</td>
            <td colspan="3">
                <select id="provinceId" style="width:150px" onchange="gaibian()">
                    <option value="">----请-选-择-省----</option>
                </select>
                <select id="cityId" style="width:150px">
                    <option value="">----请-选-择-市----</option>
                </select></td>
        </tr>
        <tr>
            <td width="80" align="right">验证码</td>
            <td width="100"><input type="text" name="verifyCode"/></td>
            <td><img src="../img/checkMa.png"/></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><input type="submit" value="注册"/></td>
        </tr>
    </table>
</form>
<script type="text/javascript">
    //准备省市数据
    let provinceData = ["北京","河北","辽宁"];
    //准备省对应的市数据
    let cityData = { "北京":["顺义区","昌平区","朝阳区"], "河北":["保定","石家庄","廊坊"], "辽宁":["沈阳","铁岭","抚顺"]};
    /*先设置省数据*/
    //1.获取省标签
    let provinceObj = document.querySelector("#provinceId");
    //2.遍历数组
    for(let pro of provinceData){
        provinceObj.innerHTML += `<option value="${pro}">${pro}</option>`;
    }

    /*省改变事件函数*/
    function gaibian() {
        //1.获取改变后的省
        let province = provinceObj.value;
        //2.获取省对应的市
        let cities = cityData[province];
        //3.获取市标签
        let cityObj = document.querySelector("#cityId");
        //3.5.清空市的所有option
        cityObj.innerHTML = '<option value="">----请-选-择-市----</option>';
        //4.遍历
        for (let city of cities) {
            cityObj.innerHTML += `<option value="${city}">${city}</option>`;
        }
    }

</script>

5.4-案例-隔行变色

    	<style type="text/css" rel="stylesheet">
            /*偶数行*/
            .even{
                background-color: red;
                /*font-size: 30px;*/
                color: green;
            }
            /*奇数行*/
            .odd{
                background-color: blue;
                /*font-size: 40px;*/
                color: pink;
            }
            /*鼠标移入*/
            .over{
                background-color: yellow;
                /*font-size: 50px;*/
                color: green;
            }
        </style>

    <tr>
        <th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>5</td>
        <td>牛奶制品</td>
        <td>牛奶制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>6</td>
        <td>大豆制品</td>
        <td>大豆制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>7</td>
        <td>海参制品</td>
        <td>海参制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>8</td>
        <td>羊绒制品</td>
        <td>羊绒制品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>9</td>
        <td>海洋产品</td>
        <td>海洋产品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>10</td>
        <td>奢侈用品</td>
        <td>奢侈用品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>10</td>
        <td>奢侈用品</td>
        <td>奢侈用品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <script type="text/javascript">
        //记录原来的类名
        let oldClassName;
        window.onload = function () {

            //1.获取所有的行
            let trs = document.querySelectorAll("tr");
            //2.遍历
            for (let i = 1; i < trs.length; i++) {
                let trObj = trs[i];
                //绑定鼠标移入和移出函数
                trObj.onmouseover = function () {
                    oldClassName = this.className;
                    this.className = "over";
                }

                trObj.onmouseout = function () {
                   this.className = oldClassName;
                }
                
                if (i % 2 == 0) {
                    trObj.className = "odd";
                } else {
                    trObj.className = "even";
                }
            }
        }
    </script>

总结:

"1. 掌握JSON对象的使用
    let json1 = [值1,值2,值3..];
	let json2 = {键:值,键:值,...};
	混合格式:
	let json3 = [{},{},{}];
	let json4 = {键:[],键:[],键:[]};
	访问:
		json1[0] json1[1] json1[2]
        json2.键名 
        json2["键名"]    
"2. 掌握JS的定时器对象的使用
        let 周期定时器ID = setInterval(函数名,时间间隔);
		let 一次性定时器ID = setTimeout(函数名,时间延迟);
		clearInterval(周期定时器ID);
		clearTimeout(一次性定时器ID);
3. 会使用dom对象获取元素对象
    document.querySelector("css选择器")
    document.querySelectorAll("css选择器")
4. 会使用dom对象操作元素内容
    标签对象.innerText
    标签对象.innerHtml
    标签对象.outerHtml
5. 会使用dom对象操作元素属性
    原生属性:
		标签对象.属性名
    自定义属性:
		标签对象.setAttribute("属性名","属性值");
        标签对象.getAttribute("属性名");
		标签对象.removeAttribute("属性名");
6. 会使用dom对象操作css样式
    单个样式:
		标签对象.style.样式名 = 样式值
    批量样式:
		标签对象.style.cssText = "css的样式";
	通过类名操作:
		标签对象.className = "类名";
		标签对象.classList 获取到标签中类名的集合
            add(类名);
			remove(类名)
            contains(类名)
            toggle(类名)    	
"7. 能够完成JS综合案例**************************
         a.表单校验(我们课上完成2个,剩余课下自己完成)
         b.全选全不选反选
         c.省市二级联动(三级联动)       
         d.隔行换色(鼠标移入换色,移出恢复本来的颜色)

MapSet

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级讲义

JavaScript高级讲义第一章 JSON数据1.1-JSON基础什么是JSON: 一种数据格式对象类型(格式1): {键:值,键:值,键:值..} 数组类型(格式2): [值1,值2,值3,...] 混合类型(嵌套格式): {键:[],键:[],...} [{},{},{}] <script type="text/javascript"> /*JSON的3种数据格式*/ /*1.JSON对象*/
复制链接

扫一扫