JavaWeb=JavaScript高级

最新推荐文章于 2021-02-21 05:24:05 发布

hnbyboy

最新推荐文章于 2021-02-21 05:24:05 发布

阅读量582

点赞数

分类专栏： JavaWeb 文章标签： javascript dom html css js

本文链接：https://blog.csdn.net/appandroid/article/details/105417909

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和XML 的应用程序接口（API）。

Window对象包含属性：document、location、navigator、screen、history、frames

浏览器运行时中的两个不同的概念。

1、BOM 浏览器对象模型

Browser Object Model（浏览器对象模型），提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。比如 alert();弹出一个窗口,这属于BOM

2、DOM 文档对象模型

Document Object Model（文档对象模型），DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。

DOM是Document ，简称文档对象模型。是用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。document.getElementById("").value; 这属于DOM

一 .Bom对象

1.bom简介： bom ：browser object model 浏览器对象模型

js把浏览器抽象成一个window对象，运行我们使用js来模拟浏览器的行为、

2.JS三种方式弹框：

1. 警告框：提示信息
		alert()
2. 确认框：确认信息
		confirm()
3. 输入框：输入信息
		prompt()


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-js三个弹框</title>

</head>
<body>
<!--
JS三个弹框
-->
<script>
    // 1. 警告框：提示信息
    // alert('哈哈');
    // 2. 确认框：确认信息
    /*let result = confirm('您确定要删除吗？');
    if(result==true){
        console.log('用户点击确定');
    }else{
        console.log('用户点击取消');
    }*/
    // 3. 输入框：输入信息（了解）
    let result = prompt('请输入你的年龄');
    if(result!=null){
        console.log(`用户输入的值：${result}`);
    }else{
        console.log('你点击了取消按钮');
    }
</script>
</body>
</html>

3.二种定时器方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-js二个定时器</title>

</head>
<body>
<!--
    JS两个定时器
        1）一次性定时器
            创建：let 定时器对象 = setTimeout('函数()',毫秒);
            关闭：clearTimeout(定时器对象)

        2）循环性定时器
            创建：let 定时器对象 = setInterval(函数,毫秒);
            关闭：clearInterval(定时器对象);
-->

<button id="btn1">取消打印时间</button>
<button id="btn2">取消打印自然数</button>

<script>
    // 1. 定时5秒之后在控制台打印当前时间
    function fun1() {
        console.log(new Date().toLocaleString());
    }
    let timeout = setTimeout('fun1()',5000);

    // 2. 点击按钮取消打印时间
    document.getElementById('btn1').onclick=function () {
        clearTimeout(timeout);
    }

    // 3. 每隔2秒在控制台打印递增自然数
    let num = 1;
    function fun2() {
        console.log(num++);
    }
    let interval = setInterval(fun2,2000);

    // 4. 点击按钮取消打印自然数
    document.getElementById('btn2').onclick=function () {
        clearInterval(interval)
    }
</script>
</body>
</html>

3.Location对象

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-location对象</title>

</head>
<body>
<!--
location地址
    1）获取当前窗口地址
        location.href

    2）刷新当前页面
        location.reload()

    3）跳转页面（重点）
        location.href='新页面地址'
-->

<button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button>


<script>
    // 1.获取当前窗口的地址
    function addr() {
        console.log(location.href);
    }

    // 2.刷新当前页面
    function refresh() {
        location.reload();
    }
    // 3.跳转到新页面
    function jump() {
        location.href='https://www.jd.com';
    }
</script>
</body>
</html>

二.Dom对象

1.文档对象模型（Document Object Model）

作用：把所有页面标签抽象成为一个Document对象，我们可以使用js动态修改标签及属性内容。

2.dom获取元素

* 第一种：es6之前获取方式
	1）获取一个
		document.getElementById(id属性值)
	2）获取多个（了解）
		document.getElementsByTagName(标签名)	根据标签名获取，返回数组对象
		document.getElementsByClassName(class属性值)	根据class属性获取，返回数组对象
		document.getElementsByName(name属性值)  根据name属性获取，返回数组对象

* 第二种：es6可根据CSS选择器获取
	1）获取一个
		document.querySelector(id选择器)
	2）获取多个
		document.querySelectorAll(css选择器)
        	标签
        	class
        	属性
        	后代
        	并集
        	父子
        	....

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-dom获取元素</title>

</head>
<body>
<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
    密码 <input type="password" name="password"> <br/>
    生日 <input type="date" name="birthday"><br/>
    性别
    <input type="radio" name="gender" value="male" class="radio">男&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">酒
    <input type="checkbox" name="hobby" value="perm">烫头<br/>
    头像 <input type="file" name="pic"><br/>
    学历
    <select name="edu">
        <option value="0">请选择</option>
        <option value="1">入门</option>
        <option value="2">精通</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/>

</form>

<script>

    // 1.获取id="username"的标签对象
    console.log(document.getElementById('username'));
    console.log(document.querySelector('#username'));

    // 2.获取class="radio"的标签对象数组
    console.log(document.getElementsByClassName('radio'));
    console.log(document.querySelectorAll('.radio'));

    // 3.获取所有的option标签对象数组
    console.log(document.getElementsByTagName('option'));
    console.log(document.querySelectorAll('option'));

    // 4.获取name="hobby"的input标签对象数组
    console.log(document.getElementsByName('hobby'));
    console.log(document.querySelectorAll('input[name="hobby"]')); // css的属性选择器
    // 5.获取文件上传选择框
    console.log(document.querySelectorAll('form input[type="file"]'));


    // 注意：为什么获取id使用这种方案？
   //  document.getElementById('username').onclick  有提示
   //  document.querySelector('#username').onfo   没有提示
</script>
</body>
</html>

3.dom操作内容

1. 获取或者修改元素（标签）的纯文本内容
   语法：
       js对象.innerText;

2. 获取或者修改元素的html超文本内容
   语法：
       js对象.innerHTML;

3. 获取或者修改包含自身的html内容
   语法：
       js对象.outerHTML;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05-dom操作内容</title>
    <style>
        #myDiv {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="myDiv">程序猿最讨厌的事：<br>写注释、写文档……</div>

<script>
    let myDiv = document.getElementById('myDiv');
    // 1.innerText操作div内容
    // 1.1 获取纯文本
    // console.log(myDiv.innerText);
    // 1.2 设置纯文本
    // myDiv.innerText='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖
    // myDiv.innerText+='别人不写注释，别人不写文档'; // 追加

    // 2.innerHTML操作div内容
    // 2.1 获取超文本内容
    console.log(myDiv.innerHTML);
    // 2.2 设置超文本
    // myDiv.innerHTML='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖
    //  myDiv.innerHTML+='<h1>别人不写注释，别人不写文档</h1>'; // 追加


    // 3.outerHTML操作div （扩展）
    myDiv.outerHTML = '<p>我摇身一变，成了小P</p>';
</script>
</body>
</html>

4.Dom属性操作

1. 获取文本框的值,单选框或复选框的选中状态
   语法:
       js对象.属性名获取属性值
       js对象.属性名='新属性值'

2. 给元素设置自定义属性
   语法:
       js对象.setAttribute(属性名,属性值)

2. 获取元素的自定义属性值
   语法:
       js对象.getAttribute(属性名)

4. 移除元素的自定义属性
   语法:
       js对象.removeAttribute(属性名)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06-dom操作属性</title>

</head>
<body>
<form action="#" method="get">
    姓名 <input type="text" name="username" id="username" value="西亚"/> <br/>

    爱好
    <input type="checkbox" name="hobby" value="smoke">烟
    <input type="checkbox" name="hobby" value="drink">酒
    <input type="checkbox" name="hobby" value="perm">烫头<br/>

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

<script>
    // 1.获取文本框预定义的属性值
    let username = document.getElementById('username');
    console.log(username);
    console.log(username.type); // text
    console.log(username.name); // username
    console.log(username.value); // 西亚


    // 2.给文本框设置自定义属性（了解） [新增、修改]
    username.setAttribute('zidingyi','我是自定义属性');
    // 3.获取文本框自定义属性（了解）
    console.log(username.getAttribute('zidingyi'));
    // 4.移出文本框自定义属性（了解）
    username.removeAttribute('zidingyi')
    username.removeAttribute('value')
    
</script>
</body>
</html>

5.Dom操作样式

1. 设置一个css样式
	语法: 
		js对象.style.样式名='样式值'
			特点：样式名按照驼峰式命名
				css格式：font-size
				js格式：fontSize
				
2. 批量设置css样式
	语法: 
		js对象.style.cssText='css样式字符串'
			缺点：让开发者痛苦，有耦合性
			
3. 通过class设置样式
	语法: 
		js对象.className='class选择器名'
			特点：解耦

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07-dom操作样式</title>
    <style>
        #p1{ background-color: red;}
        .mp {
            color: green;
            font-size: 30px;
            font-family: 楷体;
        }

        .mpp {
            background-color: lightgray;
        }
    </style>
</head>
<body>

<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3" >3. 通过class设置样式</p>

<script>
    let p1 = document.getElementById("p1");//获取段落标签
    let p2 = document.getElementById("p2");//获取段落标签
    let p3 = document.getElementById("p3");//获取段落标签

    // 1. 设置一个css样式
    p1.style.backgroundColor='black';
    p1.style.color='white';

    // 2. 批量设置css样式
    p2.style.cssText='border:1px solid red;font-size:20px;';

    // 3. 通过class设置样式
    p3.className='mp mpp'; 

</script>
</body>
</html>

6.Dom操作元素-标签

1. 创建一个标签对象
	语法：
		document.createElement(标签名称)
		
2. 给父标签添加一个子标签
	语法：
		父标签对象.appendChild(子标签对象)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08-dom操作元素</title>

</head>
<body>

<ul id="star">
    <li>古力</li>
    <li>迪丽</li>

</ul>
<script>
    // 添加一个新列表项    <li>马尔</li>

    // 方式一
    document.getElementById('star').innerHTML+='<li>马尔</li>';


    // 方式二
    // 1.1 创建li标签
    let li = document.createElement('li');
    li.innerText='小：都要'
    console.log(li);
    // 1.2 父标签添加子标签
    document.getElementById('star').appendChild(li);

</script>
</body>
</html>

三.正则表达式

作用：根据定义好的规则，过滤文本内容；

 在js中使用正则表达式
	1.创建方式
		1）let rege = new RegExp(“正则表达式字符串”);
		2）let rege = /正则表达式/;
        
	2.验证方法
		1）正则对象.test(字符串)
			符合正则规则就返回true，否则false
		2）字符串对象.match(正则对象)
			返回字符串中符合正则规则的内容。
	
	3. 了解下正则修饰符
	
	4. 在线正则表达式
    	https://tool.oschina.net/regex/#

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09-正则表达式</title>

</head>
<body>

<script>
    // 1.创建正则对象
    let reg1 = new RegExp('\\d+'); // 规则只能是纯数字
    console.log(reg1.test('abc')); // false
    console.log(reg1.test('123321')); // true

    // 2.直接使用正则表达式
    let reg2 = /\d+/;
    console.log(reg2.test('abc')); // false
    console.log(reg2.test('123321')); // true

    console.log("a1".match(reg2)); // 表示获取字符串符合正则规则那部分内容
</script>


<script>
	//正则表达式修饰符
	let regi = /[amn]/i;//不区分大小写匹配amn  ignore 忽略大小写
	let resi = "ABC".match(regi);//从"ABC"中匹配regi模式字符串
	console.log(resi);
	let regg = /\d/g;//全局查找数字  global 全局
	let resg = "1 plus 2 equals 3".match(regg);
	console.log(resg);
	let regm = /^\d/m;//多行匹配开头的数字  （^ 限定开始  $ 限定结束） multpart 多行
	let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);
	console.log(resm);
</script>

<script>
    console.log('-------------------------------')
    // 以邮箱举例
    let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    console.log(emailReg.test('sadfsadf')); // false
    console.log(emailReg.test('ys_123@163.com')); // true


    // 以手机号举例
    let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    console.log(phoneReg.test('123123')); // false
    console.log(phoneReg.test('18312332199')); // true


</script>

</body>
</html>

四.综合案例

1.表单校验：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>表单校验</title>
    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 40px;
            background-image: url(../img/b.jpg);
        }

        .regist {
            border: 7px inset #ccc;
            width: 700px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }

        .warn {
            color: red;
            font-size: 12px;
            display: none;
        }
    </style>
    <!--
    表单校验
        1. 两次密码输入一致
        2. 邮箱格式正确
        3. 手机号格式正确
        4. 提交表单时校验表单项是否合法.
    总结:
        form表单的 onsubmit 事件 表单提交之前触发
    -->
</head>
<body>
<div class="regist_bg">
    <div class="regist">
        <form action="#" id="myForm">
            <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="pwd1" type="password" name="pwd1" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span
                            id="pwdwarn" class="warn">密码不一致</span></td>
                </tr>
                <tr>
                    <td align="right">Email</td>
                    <td colspan="2"><input id="email" 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>
    </div>
</div>
<script>

    // . 两次密码输入一致
    // .获取密码框和确认密码框的js对象
    let pwd1 = document.getElementById('pwd1');
    let pwd2 = document.getElementById('pwd2');
    //  校验密码是否一致的方法
    function checkPwd() {
        let boo = pwd1.value == pwd2.value;
        if(boo == true){// 密码一致
            document.getElementById('pwdwarn').style.display='none';
        }else{// 密码不一致
            document.getElementById('pwdwarn').style.display='inline';
        }
        return boo;
    }
    // 给确认密码框绑定失去焦点事件
    pwd2.onblur=checkPwd; // 这里绑定函数，不能加括号

    //  邮箱格式正确
    // 定义邮箱正则表达式
    let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    // 2.2 获取邮箱的js对象
    let email = document.getElementById('email');
    // 2.3 定义校验函数（方法）
    function checkEmail() {
        let boo = emailReg.test(email.value);
        if(boo ==  true){ // 校验通过
            document.getElementById('emailwarn').style.display='none';
        }else{ // 校验不通过
            document.getElementById('emailwarn').style.display='inline';
        }
        return boo;
    }
    //  给邮箱绑定失去焦点事件
    email.onblur=checkEmail;

    // 表单提交时 会触发这个 onsubmit事件
    document.getElementById('myForm').onsubmit=function () {

        return checkPwd()&&checkEmail(); // 返回true可以提交，返回false表单不做任何操作
    }




 // 准备数据
            var data = new Array();
            data['北京'] = ['顺义区', '昌平区', '朝阳区'];
            data['河北'] = ["保定","石家庄","廊坊"];
            data['辽宁'] = ["沈阳","铁岭","抚顺"];

            let provinceId = document.getElementById("provinceId");//获取省下拉列表
            let cityId = document.getElementById("cityId");//获取市下拉列表

			// 1.页面加载成功后，初始化省份数据
			window.onload=function () {
				for(let index in data){ // 索引for
				    console.log(index);
                    provinceId.innerHTML+=`<option value="${index}">${index}</option>`;
				}
            }

            // 2.给省份下拉框绑定onchange事件
            provinceId.onchange=function () {
			    // 清空上一次选择城市信息
                cityId.innerHTML='<option value="">----请-选-择-市----</option>';
                console.log(this.value);// 当前用户选中的value值 ，它就是二维数组的索引
                console.log(data[this.value]); // 城市列表
                let citys = data[this.value];
                for(let city of citys){ // 增强for
                    cityId.innerHTML+=`<option value="${city}">${city}</option>`;
				}
            }


</script>

</body>
</html>

隔行换色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>隔行变色</title>

</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <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>
 
</table>
<!--
隔行变色
	1. 表格奇偶行颜色不同
	2. 鼠标移入颜色高亮
-->
<script>

    let oldColor;

    // 获取所有tr的js对象 数组
    let trs = document.querySelectorAll('table tr');  // 注意：这里使用的后代选择器  ，这里是js的一个tbody坑 table>tr
    // 普通for循环
    for (let i = 0; i < trs.length; i++) {
        if(i%2==0){//偶数索引（奇数行）
            trs[i].style.backgroundColor='lightgrey';
        }else{ // 奇数索引（偶数行）
            trs[i].style.backgroundColor='skyblue';
        }

        trs[i].onmouseover=function () { // 鼠标移入某一行
            oldColor=trs[i].style.backgroundColor// 获取当前行的颜色
            trs[i].style.backgroundColor='pink';
        }
        trs[i].onmouseout=function () {// 鼠标移出某一行
            trs[i].style.backgroundColor=oldColor;
        }
    }
</script>
</body>
</html>

其他案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>儿童身高预测</title>

    <style type="text/css">
        #content{
            margin: 0 auto;
            width: 600px;
            border: orange solid 2px;
            background-color: bisque;
        }
        #content div{
          margin-left: 15px;
            margin-top: 15px;
            margin-bottom: 10px;
        }
        h3,h5{
            margin-left: 15px;
        }

        .lookresult{
            margin: 0 auto;
            width: 550px;
            height: 45px;
            background-color: white;
            border: orange dashed 1px;
            line-height: 45px;
            text-align: left;
          padding-left: 15px;
        }
        #resultheight{
            color: red;
            font-size: 20px;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div>
    <div id="content">
        <h3>儿童身高预测</h3>
        <div>儿童性别：<input type="radio" name="sex" value="female" id="female" checked="true"><label for="female">男孩</label>
            <input type="radio" name="sex" value="male" id="male"><label for="male">女孩</label></div>

        <div><label for="batherheight">爸爸的身高：</label><input type="text" id="batherheight">厘米</div>

        <div><label for="motherheight">妈妈的身高：</label><input type="text" id="motherheight">厘米</div>

        <div>
            <button id="lookheihgt">查看结果</button>
            <button id="reloadheight">重新测试</button>
        </div>

        <h5>测试结果</h5>
        <div class="lookresult">小孩的身高是：<span id="resultheight">0</span>厘米</div>

    </div>
</div>

<script>
    //查看结果
    document.getElementById("lookheihgt").onclick = function () {
       let  sex = document.querySelector("input[name='sex']:checked").value;
        let batherHeight   = document.getElementById("batherheight").value;
        let montherHeight   = document.getElementById("motherheight").value;
        if (batherHeight == "" || isNaN(batherHeight)) {
            alert("输入父亲身高不是数字");
            return;
        }
        if (montherHeight == "" || isNaN(montherHeight)) {
            alert("输入母亲身高不是数字");
            return;
        }
        if (batherHeight>250||batherHeight<55){
            alert("父亲身高必须是55--250之间！");
            return;
        }
        if (montherHeight>250||montherHeight<55){
            alert("母亲身高必须是55--250之间！");
            return;
        }
        let height=0 ;
        if (sex == "male") {
            //女儿身高
            height =  (parseFloat(batherHeight*0.923)+parseFloat(montherHeight))/2;
        }else if(sex== "female"){
            //儿子身高
             height =  ((parseFloat(batherHeight) +parseFloat(montherHeight))/2)*1.08;
        }
        document.getElementById("resultheight").innerText = Math.round(height*100)/100;
    };
    //重新测试
    document.getElementById("reloadheight").onclick = function () {
        document.getElementById("batherheight").value ="";
        document.getElementById("motherheight").value="";
        document.getElementById("resultheight").innerText="0";
    };
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态添加表格</title>
</head>
<body>

<div>
    <label for="row">行：</label><input type="text" value="0" id="row">
    <label for="col">列：</label> <input type="text" value="0" id="col">
    <button id="rowscols">生成表格</button>
</div>
<div id="rowcolstable">

</div>
<script>
    document.getElementById("rowscols").onclick = function () {
        let rowsId = document.getElementById("row").value;
        let colsId = document.getElementById("col").value;
        if (rowsId < 1 || colsId < 1) {
            alert("生成表格的行或者列不能小于1");
            return;
        }
        let tables = `<table style="border: blue solid 1px;border-collapse: collapse">`;
        for (let i=0;i<rowsId;i++){
            tables+='<tr>';
            for (let j = 0; j < colsId; j++) {
                tables+=`<td style="border: blue solid 5px;">传智播客</td>`;
            }
            tables+='</tr>';
        }
        tables += `</table>`;
        document.getElementById("rowcolstable").innerHTML=tables;
        document.getElementById("row").value="";
        document.getElementById("col").value="";
    };
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加行数据</title>
    <style type="text/css">
        div{
            margin:0 auto;
            text-align: center;
            width: 600px;
        }
        table{
            border: black solid 1px;
            border-collapse: collapse;
        }
        td{
            width: 200px;
           border: black solid 3px;
        }
    </style>
</head>
<body>

    <div>
        学生信息
        <table id="studentInfo">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>itcast001</td>
                <td>张三</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>itcast002</td>
                <td>lisi</td>
                <td><a href="#">删除</a></td>
            </tr>
        </table>
    </div>
    <br>
    <div>
        <label for="xuehao">学号：</label><input type="text" value="" id="xuehao">
        <label for="xingming">姓名：</label> <input type="text" value="" id="xingming">
        <button id="addxuesheng">添加一行数据</button>
    </div>

    <script>
        document.getElementById("addxuesheng").onclick = function () {
            let xuehao = document.getElementById("xuehao").value;
            let xingming = document.getElementById("xingming").value;
            if (xuehao.length<1||xingming.length<1) {
                alert("学号或者姓名不能为空！");
                return;
            }
            let str=`<tr><td>${xuehao}</td><td>${xingming}</td><td><a href="#">删除</a></td></tr>`;
            document.getElementById("studentInfo").innerHTML+=str;
            document.getElementById("xuehao").value="";
            document.getElementById("xingming").value="";
        };
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 40px;
            background-image: url(../img/bg.jpg);
        }
        .regist {
            border: 7px inset #ccc;
            width: 600px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }
        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="regist_bg">
    <div class="regist">
        <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">
                            <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></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<script>

    //城市选择
    let data = new Array();
    data["北京"]=["海淀","朝阳","东城","昌平","顺义"];
    data["上海"]=["越秀","长鸣","聪明"];
    data["郑州"]=["中原","金水","管城","上街","新郑"];
    data["西安"]=["襄阳","咸阳","东边","西边"];

    let provinceId = document.getElementById("provinceId");
    let cityId = document.getElementById("cityId");

    window.onload=function () {
        for (let provice in data){
            provinceId.innerHTML+=`<option value="${provice}">${provice}</option>`;
    }
    }
    provinceId.onchange = function () {
        console.log(this.value);
        if (this.value == "") {
            cityId.innerHTML=`<option value="">----请-选-择-市----</option>`;
            return;
        }
        let citys = data[this.value];
        cityId.innerHTML=`<option value="">----请-选-择-市----</option>`;
        for (let city of citys) {
            cityId.innerHTML+=`<option value="${city}">${city}</option>`;
        }
    }

</script>

</body>
</html>

参考：

w3c-js

bom-dom

bom

hnbyboy

关注

0
点赞
踩
1

收藏

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

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准...
复制链接

扫一扫

专栏目录