IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		图片批量下载器
↓批量下载图片,美女图库↓ 		图片自动播放器
↓图片自动播放器↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript--笔记（附带案例！） -> 正文阅读

[JavaScript知识库]JavaScript--笔记（附带案例！）

JavaScript--笔记

1.JavaScript的概述

JavaScript是web上?种功能强?的编程语?，?于开发交互式的web??。它不需要进?编译，?是直接嵌?在HTML??中，由浏览器执?。

  • JavaScript被设计?来向HTML??添加交互?为。
  • JavaScript是?种脚本语?（脚本语?是?种轻量级的编程语?）。
  • JavaScript由数?可执?计算机代码组成。
  • JavaScript通常被直接嵌?HTML??。
  • JavaScript是?种解释性语?（就是说，代码执?不进?预编译）。

JavaScript的组成：

  • 核?（ECMAScript）
  • ?档对象模型（DOM）
  • 浏览器对象模型（BOM）
    在这里插入图片描述

JavaScript的作?：
使?JavaScript添加??动画效果，提供?户操作体验。主要应?有：嵌?动态?本于HTML??、对浏览器事件做出相应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。

JavaScript的引?：
在HTML?件中引?JavaScript有两种?式，?种是在HTML?档直接嵌?JavaScript脚本，称为内嵌式，另?种是链接外部JavaScript脚本?件，称为外联式。对他们的具体讲解如下：

//1. 内嵌式，在HTML?档中，通过 <script> 标签引?，如下：
<script type="text/javascript">
// 此处为JavaScript代码
</script>
	//2. 外联式，在HTML?档中，通过 <script src=""> 标签引? .js ?件，如下
<script src="1.js" type="text/javascript" charset="UTF-8"></script>

2.基本语法

变量
在使?JavaScript时，需要遵循以下命名规范：

  • 必须以字?或下划线开头，中间可以是数字、字符或下划线
  • 变量名不能包含空格等符号
  • 不能使?JavaScript关键字作为变量名，如：function
  • JavaScript严格区分??写
  • 变量的声明
var 变量名; // JavaScript变量可以不声明，直接使?。默认值：undefined
  • 变量的赋值
var 变量名 = 值; // JavaScript变量是弱类型，及同?个变量可以存放不同类型的数据

数据类型
在这里插入图片描述
运算符

  • 算术运算符
    在这里插入图片描述

  • 赋值运算符
    在这里插入图片描述

  • ?较运算符
    在这里插入图片描述

  • 逻辑运算符
    在这里插入图片描述

3.基础操作（案例）

  • 事件
    在这里插入图片描述

  • alert()：向??中弹出?个提示框！

  • innerHTML：向??的某个元素中写?段内容，将原有的东?覆盖

  • document.write()：向??中写内容

  • window.onload = function(){} 页面加载函数（在加载页面前运行）

案例1:完成注册??的校验

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
        	//通过document.getElementById("username")获得id为"username"的对象
            usernameInput = document.getElementById("username");
            passwordInput = document.getElementById("password");
            password_repeInput = document.getElementById("password_repe");
            //onblur该函数在鼠标光标离开时触发
            usernameInput.onblur = checkUsername;
			passwordInput.onblur = checkPassword;
			password_repeInput.onblur = checkPassword_repeInput;
        }
        
        function checkUsername(){
        	//正则表达式 -> 查看我的正则表达式笔记
            var reg = /^[a-zA-Z]\w{5,17}$/;
                var username = usernameInput.value;
				var spanMsg1 = document.getElementById("msg1");
				if(!reg.test(username)){
					
					spanMsg1.innerHTML = "<font color='red'>格式错误</font>";
                    return false;
				}else{
					spanMsg1.innerHTML = '';
                    return true;
				}
        }
        function checkPassword(){
            var reg = /^\w{6,15}$/;
			    var password = passwordInput.value;
				var spanMsg2 = document.getElementById("msg2");
				if(!reg.test(password)){
					spanMsg2.innerHTML = "<font color='red'>格式错误</font>";
                    return false;
				}else{
					spanMsg2.innerHTML = '';
                    return true;
				}
        }
        function checkPassword_repeInput(){
            var password_repe = password_repeInput.value;
				var spanMsg3 = document.getElementById("msg3");
				if(!password_repe.match(passwordInput.value)){
					spanMsg3.innerHTML = "<font color='red'>格式错误</font>";
                    return false;
				}else{
					spanMsg3.innerHTML = '';
                    return true;
				}
        }
        function check(){
            return checkUsername() && checkPassword() && checkPassword_repeInput()
        }
    </script>
</head>
<body>
    <form action="#" onsubmit="return check()">
        用户名：
        <input type="text" name="username" id="username" >
		<br>
		<span id="msg1"></span><br>
		密码：
		<input type="password" name="password" id="password" />
		<br>
		<span id="msg2"></span><br>
        确认密码：
		<input type="password" name="password_repe" id="password_repe" />
		<br>
		<span id="msg3"></span><br>
        <input type="submit">
    </form>
</body>
</html>

案例2:轮播图

定时器
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <script>
        window.onload = function(){
            startLunbo();
        }
        //定义一个存放图片的数组
        var imgarr = ["../image/products/c_0001.jpg","../image/products/c_0002.jpg","../image/products/c_0003.jpg"];
        var i =0;
        function lunbo(){
            var img = document.getElementById("img");
            img.src = imgarr[i++%3];
        }
        function startLunbo(){
            intervalId=setInterval("lunbo()",1000);
        }
        function stopLunbo(){
            clearInterval(intervalId);
        }
    </script>
</head>
    
<body>
    <img src="../image/products/c_0001.jpg" alt="" id ="img" onmouseout="startLunbo()" onmouseover="stopLunbo()">
</body>
</html>

案例3:定时弹?告

setTimeout
使用方法同上
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        onload = function(){
            setTimeout("showAd()",3000);
        }
        function showAd(){
            var ad =document.getElementById("img");
            ad.style.display = "block";
            setTimeout("hideAd()",3000);
        }
        function hideAd(){
            var ad =document.getElementById("img");
            ad.style.display = "none";
        }
    </script>
</head>
<body>
	//首先设置style="display: none; 使图片第一时间没有出现
    <img src="../image/image/2.jpg" alt="" id="img" style="display: none;" width="100%">
</body>
</html>

4.进阶操作（案例）

案例1:表格隔?换?以及鼠标高亮

  • 在函数内部this表示：当前操作的元素。
  • this.setAttribute(name, value)：给当前元素设置属性
    在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格隔?换?以及鼠标高亮</title>
		<script type="text/javascript">
			onload = function(){
				//要获得table中所有的tbody中的所有tr
				var tab = document.getElementById("table");
				var tBodies = tab.tBodies;//如果数组中只有一个tBody
				index=0;//记录奇偶数
				for(var i = 0;i<tBodies.length;i++){//那这一行可以省略
					var ros = tBodies[i].rows;
					for(var j = 0;j<ros.length;j++){
						if(index++ %2==0){
							ros[j].style.backgroundColor = "skyblue";
						}
						ros[j].onmouseover = function(){
							//this.style.backgroundColor
							this.setAttribute("color",this.style.backgroundColor)
							this.style.backgroundColor = "red";
						}
						ros[j].onmouseout = function(){
							//this.style.backgroundColor
							
							this.style.backgroundColor = this.getAttribute("color");
						}
					}
				}
			}

		</script>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10" align="center" id = "table">
			<caption>浙水院</caption>
			<thead>
				<tr class="cls1">
					<th>学好</th>
					<th>姓名</th>
					<th>学校</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
			</tbody>
			<tbody>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
			</tbody>
		</table>
	</body>
</html>

案例2:复选框全选/全不选

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>各行换色</title>
		<script type="text/javascript">
			onload = function(){
				//要获得table中所有的tbody中的所有tr
				var tab = document.getElementById("table");
				var tBodies = tab.tBodies;//如果数组中只有一个tBody
				index=0;//记录奇偶数
				for(var i = 0;i<tBodies.length;i++){//那这一行可以省略
					var ros = tBodies[i].rows;
					for(var j = 0;j<ros.length;j++){
						if(index++ %2==0){
							ros[j].style.backgroundColor = "skyblue";
						}
						ros[j].onmouseover = function(){
							//this.style.backgroundColor
							this.setAttribute("color",this.style.backgroundColor)
							this.style.backgroundColor = "red";
						}
						ros[j].onmouseout = function(){
							//this.style.backgroundColor
							
							this.style.backgroundColor = this.getAttribute("color");
						}
					}
				}
				document.getElementById("AllCheck").onclick = function(){
								var inputs = document.getElementsByTagName("input");
								for(var i = 0;i<inputs.length ;i++){
									inputs[i].checked = this.checked;
								}
							}
			}
			
			
			
		</script>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="10" align="center" id = "table">
			<caption>浙水院</caption>
			<thead>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="AllCheck" value="" /></th>
					<th>学好</th>
					<th>姓名</th>
					<th>学校</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
				<tr class="cls1">
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>2020</th>
					<th>张三</th>
					<th>浙江水利水电学院</th>
					<th>20</th>
				</tr>
			</tbody>
			
		</table>
	</body>
</html>

案例3:省市?级联动

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级省份选择</title>
    <script>
        onload = function (){

        }
        cities = [
            ["浙江水利水电学院","中国计量大学","浙江工商大学","浙江大学"],
            ["北京大学","清华大学"],
            ["中国科技大学"]
        ];
        function changeCity(obj){
            var citySelect = document.getElementById("city");
            var citiys = cities[obj.value];
            citySelect.innerHTML="<option >--请选择--</option>"
            if(citiys){
                for(var i = 0 ; i < citiys.length;i++){
                    var cityOption = document.createElement("option");
                    cityOption.innerHTML = citiys[i];
                    citySelect.appendChild(cityOption)
                }
            }
        }
    </script>
</head>
<body>
    省份：<select onchange="changeCity(this)">
        <option>--请选择--</option>
        <option value="0">浙江</option>
        <option value="1">北京</option>
        <option value="2">河南</option>
    </select>
    地区：<select name="" id="city">
        <option value="">--请选择--</option>
    </select>
</body>
</html>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线（Vue中运用 AntVG6）
Vue事件处理的基本使用
Vue后台项目的记录 （一）
前后端分离vue跨域，devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-30 22:41:40  更:2021-07-30 22:42:41 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 -2025/2/6 9:49:13-

图片自动播放器
↓图片自动播放器↓ 		TxT小说阅读器
↓语音阅读,小说下载,古典文学↓ 		一键清除垃圾
↓轻轻一点,清除系统垃圾↓ 		图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码