【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
2024-04-15 19:31:57
文章目录
- 1.js两种引入：js最终要引入到html在浏览器中运行
- 2.js五大原始类型：undefined
- 3.js的运算符和流程控制：js不支持单&和单|性能低
- 4.案例_99乘法表：Sources调试
- 5.函数的基本语法：function
- 6.函数的两种变量和两种定义：全局/局部变量
- 7.事件的两种注册：js事件驱动语言
- 8.页面加载事件：当浏览器加载完整个html页面时才触发
- 9.案例_轮播图：每隔一秒换一张图片
- 10.内置对象_数组/日期/字符串解析/url编码：encodeUri编码，decodeUri解码
- 11.Bom编程_window对象：编写时可被省略，窗口 (运行环境)
- 12.案例_会动的时钟：innerText (开闭标签之间的内容)
- 13.Bom编程_location对象：地址栏
- 14.Bom编程_history对象：历史记录
- 15.Dom编程_查找节点：选择器
- 16.案例_全选全不选：商品选项勾选状态 和 全选的勾选状态一致
- 17.属性_innerText和innerHTML：追加
- 18.案例_省市级联：0对应bj数组
- 19.Dom编程_js修改css样式：.className
- 20.案例_隔行/触摸换色：鼠标移上去时, 当前行改背景色
- 21.js中的正则表达式：regular expression (regex) 具有某种特定规律的表达式
- 22.案例_表单校验：result = false
1.js两种引入：js最终要引入到html在浏览器中运行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--JavaScript 作用: 主要是 与用户进行交互1. java : 网景 (liveScript) <-> 微软 (浏览器 IE) 付费2. script 脚本 (文本保存, 往往直接 解释运行,不需要编译) --><script>function method01() {var result = confirm("你满18岁了吗?")}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111-->
<body><form action="#"><input type="text" name="user" placeholder="请输入用户名"> <br><input type="submit"></form><hr><input type="button" value="按钮:跳转" onclick="method01()" >
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--1. 内部1. 在html中编写一个script标签a. head标签中 (阅读性好)b. body标签之后 (比较方便)2. 然后内部写js代码2. 外部1. 在外部编写一个js文件(js代码)2. 然后用script标签src属性导入注意: 1. 一个html中允许多个script标签(从上到下)2. 一个script标签只允许做一件事(要么写,要么导)--><script> document.writeln("hello"); //DOM : 在网页中输出</script><!-- 111111111111111111111111111111111111111111111111111111111111111111111 --> <script src="../js/my.js">//中间不能写</script><!-- 111111111111111111111111111111111111111111111111111111111111111111111 --><script>/** 1. 一行代码后面可以不加 ;* 2. js弱类型语言 (有类型,但是不强调)，所有类型都赋值给var (variable 变量)* 3. var可写可不写*/document.writeln("<br>")document.writeln("a")var a = 1; //数字 不用int a =1// a = "abc" // 字符串b = 2;document.writeln(a + b)var c = 1; //定义: 初次声明并赋值var c = 2; // 赋值</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111-->
<body>内容
</body>
</html>
2.js五大原始类型：undefined
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** js的类型* 1. 原始类型: 如下* 2. 引用类型： a. object* b. function** 原始类型：* 1. number : 数字：整数/小数* 2. string : 字符串：单引/双引* 3. boolean：true/false* 4. null (值)：表示引用类型变量为null* 5. undefined : 未定义* 定义: 变量初次声明并赋值* 未定义: 变量只声明不赋值* java: int a; //定义* a = 1; // 赋值* js : var a = 1; //定义* var b; //未定义* 运算符 : 变量的类型 = typeof 变量 。 返回变量类型 像java中instance of*/var a = 1.1;var type = typeof adocument.writeln(a + "->" + type) document.writeln("<br>")var a = 'abc'; //赋值var type = typeof adocument.writeln(a + "->" + type)document.writeln("<br>")var a = true;var type = typeof adocument.writeln(a + "->" + type)document.writeln("<br>")var a = null; //任意引用类型继承objectvar type = typeof adocument.writeln(a + "->" + type)document.writeln("<br>")var b;var type = typeof bdocument.writeln(b + "->" + type)document.writeln("<br>")</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
3.js的运算符和流程控制：js不支持单&和单|性能低
判断用户是否输入内容：java如下，js中直接写if(a)。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 在js中,任意类型的表达式或者变量都可以作为判断条件* 1. number : 非0为true , 0为false* 2. string : 非空串为true，空串为false(比较重要)。可以用来判断用户是否输入内容* 3. null : false* 4. undefined : false*/var a = "用户输入的内容"if(a){document.writeln("true") //true}else{document.writeln("false")}document.writeln("<hr>")</script><!--11111111111111111111111111111111111111111111111111111111111111111111111111--><script>var result = 1 > false? "嘻嘻" : 10 //三元运算，java中问号后面必须同类型，js可不同document.writeln(result) //嘻嘻 ，因为false运算时转为数字0document.writeln("<hr>")</script><!--11111111111111111111111111111111111111111111111111111111111111111111111111--> <script>/** == : 等等: 只比较字面值, 不比较类型。常用* === : 恒等：不仅比较字面值, 比较类型。不常用，在js中判断类型意义不大，因为js弱类型。*/var a = "200"var b = 200document.writeln(a == b) // true //网页输入都是字符串document.writeln(a === b)// falsedocument.writeln("<hr>")</script><!--11111111111111111111111111111111111111111111111111111111111111111111111111--> <script>/** 运算规则: 任意类型都可运算* 以+为例:* 1. 任意类型+string=string* 2. 除string之外+ number = number / NaN* 1. boolean : true=1,false=0* 2. null : 0* 3. undefined : NaN(not a number)*/// var a = "abc"// var b = 100// document.writeln(a + b) // abc100// var a = "abc"// var b = true// document.writeln(a + b) // abctruevar a = "abc"var bdocument.writeln(a + b) // abcundefined//111111111111111111111111111111111111111111111111111111111111 // var a = 100// var b = true// document.writeln(a + b) // 101// var a = 100// var b = null // document.writeln(a + b) // 100// var a = 100// var b // document.writeln(a + b) // NaN </script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
4.案例_99乘法表：Sources调试
i：1到9。
j：列数=行序号，1到i。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border-collapse : collapse;}</style><!--11111111111111111111111111111111111111111111如上collapse:折叠：去除表外边框的上和右线--> <script>document.writeln("<table border='1px' cellpadding=\"5px\" cellspacing='0px'>")for (var i = 1; i <= 9; i++) { document.writeln("<tr>")for (var j = 1; j <= i; j++) { document.writeln("<td>")document.writeln(j + "x" + i + "=" + i * j)document.writeln("</td>") //这行及以下成对}document.writeln("</tr>") }document.writeln("</table>")</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<body><!-- <table border="1px" cellpadding="5px" cellspacing="0px"><tr><td></td></tr></table>-->
</body>
</html>
Sources 》打断点》右击重新加载 》watch右边点+号 并输入想看的变量 》如下鼠标所指的下一步。
5.函数的基本语法：function
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** java : public static void main(String[] args){* 方法体* }* 修饰符 返回值类型 方法名(参数列表) {方法体}* * js : function 函数名(参数列表){ 函数体}* 注意点: 1. 参数列表不写var* 2. 如果有返回值,直接return* 3. 调用函数时,传入的参数个数不限制* 4. 函数内部有个默认参数, arguments (本质数组 : 调用此函数传入的所有参数)*/function method01() {console.log("控制台输出")}method01() //11111111111111111111111111111111111111111111111111111111111111111111111111111function method02(a,b) {// return a + b;var sum = 0;for(var i=0;i<arguments.length;i++){sum += arguments[i]}return sum;}var result = method02(1) //return a + b;为NaN （因为b undefined） //如上arguments输出为1var result = method02(1,2,3) //return a + b;为3 //如上arguments输出为6console.log(result)</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
6.函数的两种变量和两种定义：全局/局部变量
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script> var a = 1; //全局，外面隐含var c; function method01() {var b = 2; //局部c = 3; // 没有写var为全局变量document.writeln("内部:" + a)document.writeln("内部:" + b)document.writeln("内部:" + c)}method01() document.writeln("外部:" + a)document.writeln("外部:" + c)// document.writeln("外部:" + b) //访问不到</script><!--11111111111111111111111111111111111111111111111111111111111111111111111--> <script>document.writeln("另一个script:" + a) //可访问到，等价于上面document.writeln("外部:" + a)</script><!--11111111111111111111111111111111111111111111111111111111111111111111111--> <script>/** 两种定义: 1. 命名函数* function 函数名(参数列表){* }* 2. 匿名函数* 变量名 = function(参数列表) { }*/document.writeln("<hr>")function method02() {document.writeln("2")}method02()//如下没有函数名var m = function (a,b) {return a + b;}var result = m(1,2)document.writeln(result)</script><!--111111111111111111111111111111111111111111111111111111111111111111111111--> <script>function method03(xx) { //xx=匿名函数 ，函数回调(callback)：xx() xx()} method03( function(){document.writeln("哈哈")} ) //最终打印 哈哈 </script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
7.事件的两种注册：js事件驱动语言
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 事件(event，实现和用户的交互): 发生在html元素上的事：1.用户输入的行为* 2.浏览器自己的行为** 事件A : onclick (单击事件 : 当用户单击鼠标左键的时候触发)* * 事件绑定函数(事件注册)* 1. 命名注册* 1. 首先声明一个命名函数* 2. 每个标签都有事件属性：onclick = "method01()"，当单击事件被触发的时候,method01执行。 * 2. 匿名注册* 1. 先找到html标签, 生成对象* 2. 给对象的事件属性 赋值一个匿名函数*/function method01() {console.log("xx")}</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="命名注册" onclick="method01()"> <br><br><input type="button" value="匿名注册" id="myid">
</body>
</html><!--11111111111111111111111111111111111111111111111111111111111111111111111-->
<script>//1. 如下先找到html标签, 生成对象 (id选择器)var btn = document.getElementById("myid"); //2. 如下给对象的事件属性 赋值一个匿名函数，不用上面的method01()btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但不是我们调用,但最终还是执行的)console.log("yy")}
</script>
8.页面加载事件：当浏览器加载完整个html页面时才触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 问题: 不能给null设置onclick属性* 原因: 页面加载顺序: 从上至下的* 解决: 1. script标签写在body标签之后* 2. script标签写在head标签中 + 页面加载事件*/window.onload = function (ev) { //页面加载事件//1. 先找到html标签, 生成对象 (id选择器)var btn = document.getElementById("myid"); //2. 给对象的事件属性 赋值一个匿名函数btn.onclick = function (ev) { // 回调函数 (一个函数是我们定义的,但是不是我们调用,但最终还是执行的)console.log("yy")}}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="匿名注册" id="myid">
</body>
</html>
9.案例_轮播图：每隔一秒换一张图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 知识预备：只要动态修改html中的东西, 浏览器会自动刷新* java思路: 0.jpg到4.jpg* int i = 0;* while(true){ //死循环* Thread.sleep(1000); //每隔1秒* i++;* img = document.getElementById("myid"); //找到这图* img.src = "../img/"+ i +".jpg"* if(i == 4){* i = -1; //没有跳出循环* }* }** js思路: 有多进程(多进程占资源)。 js里没有多线程（多线程不安全） -> 引入BOM*/</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><img src="../img/0.jpg" width="500px" id="myid"><script>var i = 0;function method01() {i++;var img = document.getElementById("myid");img.src = "../img/"+ i +".jpg"if(i == 4) {i = -1 //循环回去++又变成0}}window.setInterval(method01,1000) </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** BOM: browser Object model 浏览器对象模型。 window : 窗体* window.setInterval(函数名,时间) 含义: 每隔时间ms 执行一次 函数名，相当于: 死循环+ 暂停 */function method01() {document.writeln("哈")}window.setInterval(method01,1000) //这行可以替代Thread.sleep(1000);，因为没有线程。</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
10.内置对象_数组/日期/字符串解析/url编码：encodeUri编码，decodeUri解码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 1. 数组对象1. 数组在JS中是一个类，通过构造方法创建对象2. 数组的四种方式1. new Array() 无参的构造方法，创建一个长度为0的数组2. new Array(5) 有参的构造方法，指定数组的长度3. new Array(2,4,10,6,41) 有参的构造方法，指定数组中的每个元素4. [4,3,20,6] 使用中括号的方式创建数组java数组int[] array = new int[5]int[] array = {1,2,3} array = new int[]{1,2,3}js的数组特点:1. 数组中的元素类型不需要一致2. 数组可以自动扩容(只要新增元素就会扩容, 没有越界异常, 没有默认值)*/var array = [0,1,"a"]array[4] = 4; //扩容document.writeln(array.length) //5document.writeln("<br>")for(var i=0; i < array.length; i++){document.writeln(array[i]) //0 1 a undefined 4}</script><!--111111111111111111111111111111111111111111111111111111111111111111111111111111--><script>document.writeln("<hr>")/** 2. 日期对象1. 作用：Date 对象用于处理日期和时间。2. 创建 Date 对象的语法: var myDate=new Date()1. Date 对象会自动把当前日期和时间保存为其初始值。3. 日期对象的方法1. getFullYear() 从 Date 对象以四位数字返回年份。2. getMonth() 从 Date 对象返回月份 (0 ~ 11)。3. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。4. getTime() 返回 1970 年 1 月 1 日（Unix）至今的毫秒数。类似于Java中的System.currentTimeMillis()5. toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。*/var myDate = new Date()document.writeln(myDate) // 系统当前时间document.writeln("<br>")document.writeln(myDate.getMonth()) //10月打印出：9document.writeln("<br>")document.writeln(myDate.getTime()) //1970年到现在 时间毫秒值document.writeln("<br>")document.writeln(myDate.toLocaleString()) </script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** parseInt() : 从左开始读取到第一个非数字的内容,停止解析, 返回整数* parseFloat () : 从左开始读取到第一个非数字的内容,停止解析, 返回整数+小数* isNaN : 如果是NaN(not a number),返回true*/var str = "1230.01 px"// var n = parseInt(str) //1230var n = parseFloat(str)document.writeln(n) //1230.01var avar b = 1var c = a + bdocument.writeln(isNaN(c)) //truedocument.writeln("<br>")</script><!--111111111111111111111111111111111111111111111111111111111111111111111--><script>/** url(uri)编码 : url远程 < uri远程和本地* word=%E6%9D%AF%E5%AD%90** 前端->服务器(请求): 提交的数据 要经过 url编码* 编码: 字符 -> 字节* 杯子 -> %E6%9D%AF%E5%AD%90 （浏览器上网址栏渲染的url中还是杯子）** 服务器接收到 : url解码* %E6%9D%AF%E5%AD%90 -> 杯子 */var word = '杯子'var result = encodeURI(word)document.writeln(result) //%E6%9D%AF%E5%AD%90 var re = decodeURI(result)document.writeln(re) //杯子</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function method01() {/** 1. 获取span的字体大小* 2. 字体大小 * 2* 3. 重新赋值给span标签*/var span = document.getElementById("myid");console.log(span.style.fontSize) // 20pxvar newSize = parseInt(span.style.fontSize) * 2 // 拿出20数字再* 2span.style.fontSize = newSize + "px"}</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="字体放大两倍" onclick="method01()"> <br><br><span style="font-size: 20px" id="myid">字体</span>
</body>
</html>
11.Bom编程_window对象：编写时可被省略，窗口 (运行环境)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** Bom : browser object model 浏览器对象模型* 1. window* 2. history* 3. location** 三种提示框* 1. alert(msg) : 警告框, 只有确认按钮* 2. var result = confirm(msg) : 确认框* a. 确定 : 返回true* b. 取消 : 返回false* 3. var result = prompt(msg,default)* a. 确定: 返回输入的内容* b. 取消: 返回null* * 两种计时器* 1. 无限循环* 返回值 setInterval(method,time,param)* 每隔time ms 执行一次method(调用method,传入的param)* 返回值: 就是当前设置的计时器* * 2. 单次使用 setTimeout* 清除计时器* clearInterval(计时器对象)* clearTimeout*/// window.alert("警方提示: 今晚会下雨~~")// alert("警方提示: 今晚会下雨2~~")// var result = confirm("你满18周岁了吗?");// document.writeln(result) //result返回值由用户选择按钮决定// var content = prompt("安全问题: 你的女朋友是谁?","高圆圆"); //提示框默认输入高圆圆，可以改// document.writeln(content)</script><script>var method01 = function (a) {// document.writeln(a) //网页输出console.log(a) }var timer = setInterval(method01,1000,"呼") //每1秒打印一次 呼 死循环// setInterval("method01('嘻')",1000) //效果同上行 // setTimeout(method01,3000,'呵呵') //3秒后就执行一次 呵呵，不会死循环function method02() {clearInterval(timer)}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="按钮" onclick="method02()">
</body>
</html>
12.案例_会动的时钟：innerText (开闭标签之间的内容)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 1. 先实现 页面初始化效果* 坑: 页面刚刷新的时候,设置系统当前时间* 1. 先获取系统事件* 2. 然后设置到div标签内** 2. 哪些事件驱动什么逻辑 (js)* 1. 开始按钮被点击: 时间动起来* 方案A: 每隔1秒,时间+1 (时间进制问题)* 方案B: 每隔1秒,获取系统当前时间(不自己写)** 2. 暂停按钮被点击: 时间不动了* 清除计时器** 坑: 连续点击开始按钮, 那么就停不掉了!!!* 原因: 计时器在一个网页中可以设置多个* timer = 0x0001* timer = 0x0002* 解决: 1. 方案A: 点开始, 先清除timer* 2. 方案B: 当开始按钮点击的时候,开始按钮 禁用!* 当暂停按钮点击的时候,开始按钮 启用!*/</script> <script>window.onload = function (ev) { // <script>写在<body>后就不用这行页面加载事件了method01()}function method01() {var myDate = new Date();var time = myDate.toLocaleString();console.log(time) //获取到了系统当前时间 var div = document.getElementById("mydiv"); //寻找id=mydiv的标签(事先加载好 : 页面加载事件)div.innerText = time}//1111111111111111111111111111111111111111111111111111111111111111111111111111111111 var timer;function start() { //注意: 命名函数不要写在另外一个函数内部timer = setInterval(method01,1000) //timer前面不写var，timer是全局变量var startBtn = document.getElementById("start");startBtn.disabled = true //禁用开始按钮}function pause() {clearInterval(timer)var startBtn = document.getElementById("start");startBtn.disabled = false //启用开始按钮}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><div id="mydiv" style="color: green;font-size: 30px">系统当前时间</div><input type="button" value="开始" onclick="start()" id="start"><input type="button" value="暂停" onclick="pause()">
</body>
</html>
13.Bom编程_location对象：地址栏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 1. 重要属性 href (地址栏中的内容,如果被修改,会自动跳转)* 2. 方法 reload() : 重新加载 / 刷新*/function method01() {location.href = "http://www.baidu.com"}function method02() {location.reload()}</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="跳转到百度" onclick="method01()"> <br> <!--下行a标签底层就是这行--><a href="http://www.baidu.com">超链接:跳转</a><hr><input type="button" value="重新加载" onclick="method02()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 事件: 页面加载* 逻辑: 倒计时, 时间=0, 跳转*/var i = 5;function method01() {i--;var span = document.getElementById("myspan"); //拿到<body>里<span>span.innerText = i + "秒后回到主页"if(i == 0){location.href = "http://www.baidu.com"}}window.onload = function (ev) {setInterval(method01,1000) //每隔1秒调用method01}</script>
</head><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>付款成功!!! <br><span id="myspan">5秒后回到主页</span> <a href="http://www.baidu.com">如果没有自动跳转,请点击这个</a>
</body>
</html>
14.Bom编程_history对象：历史记录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 函数: forward()* back()* go(index)*/function forward() {// history.forward()history.go(1) //效果同上行}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>第一页面 <br><a href="06_history第二页面.html">点击跳转到二</a><br><input type="button" value="前进" onclick="forward()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function back() {// history.back()history.go(-1)}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>第二页面 <br><input type="button" value="后退" onclick="back()">
</body>
</html>
15.Dom编程_查找节点：选择器
Dom作用：在.html文件里找标签，类似java中反射（一个类被加载进内存会自动生成class对象，通过这个class对象获取这个类中任何元素）。如下只有id是唯一的。document.querySelector(‘video’).playbackRate = 3。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>根据标签的属性找元素</title><script type="text/javascript"> window.onload = function (ev) { //页面加载事件，ev参数是鼠标移动获取坐标var b2 = document.getElementById("b2");b2.onclick = function (ev2) {var array = document.getElementsByTagName("a");for(var i=0; i < array.length; i++){array[i].href = "http://www.baidu.com"}}//111111111111111111111111111111111111111111111111111111111111111111111111111111document.getElementById("b3").onclick = function (ev2) {var array = document.getElementsByName("one")for(var i=0; i < array.length; i++){array[i].innerText = "嘻嘻"}}//111111111111111111111111111111111111111111111111111111111111111111111111111111document.getElementById("b4").onclick = function (ev2) {var array = document.getElementsByClassName("two")for(var i=0; i < array.length; i++){array[i].innerText = "嘻嘻2"}}}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="(通过标签名)给a链接添加地址" id="b2" /><input type="button" value="(通过name属性)给div设值" id="b3"/><input type="button" value="(通过类名)给div设值" id="b4"/><hr/><a>传智播客</a><br/><a>传智播客</a><br/><a>传智播客</a><br/><hr/><div name="one"></div><div name="one"></div><div name="one"></div><hr/><div class="two"></div><div class="two"></div><div class="two"></div>
</body>
</html>
16.案例_全选全不选：商品选项勾选状态 和 全选的勾选状态一致
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 1. 先获取全选按钮的勾选状态* 对象.checked = true/false （勾上为true，没勾上为false）* 畸形写法的属性 js = boolean。包括checked/selected/disabled/readonly...** 2. 然后找到所有的商品项，遍历,修改商品项的勾选状态 = 上面的勾选状态*/function selectAll() { // 全选/全不选var all = document.getElementById("all"); console.log(all.checked) // boolean : true /false var array = document.getElementsByName("item"); //item条目for(var i=0; i < array.length; i++){array[i].checked = all.checked}}//111111111111111111111111111111111111111111111111111111111111111111111111111/** 反选： 1. 然后找到所有的商品项* 2. 遍历,修改商品项的勾选状态 与 自身原状态 相反*/function reverseSelect() {var array = document.getElementsByName("item");for(var i=0; i < array.length; i++){array[i].checked = !array[i].checked}}//111111111111111111111111111111111111111111111111111111111111111111111111111/** 结账: 1. 然后找到所有的商品项* 2. 遍历,如果 checked = true, 计入总账*/function total() {var array = document.getElementsByName("item");var total = 0; //var total 没有初始值，undefinedfor(var i=0; i < array.length; i++){if(array[i].checked){ total += parseInt(array[i].value) //类型转换，网页获取默认是字符串进行拼接}}alert(total)}</script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><h3>商品价格列表</h3><input type="checkbox" name="item" value="1500" /> 山地自行车1500<br /><input type="checkbox" name="item" value="200" /> 时尚女装200<br /><input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br /><input type="checkbox" name="item" value="800" /> 情侣手表800<br /><input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br /><hr/><input type="checkbox" id="all" onclick="selectAll()" />全选/全不选 <input type="button" id="reverse" onclick="reverseSelect()" value=" 反 选 "/> <input type="button" value=" 结 账 " onclick="total()" /> <span id="result"></span>
</body>
</html>
17.属性_innerText和innerHTML：追加
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** innerText : 内部文本(开闭标签之间的文本内容)* innerHTML : 内部超文本 (识别标签语法)*/window.onload = function (ev) {var div = document.getElementById("mydiv");console.log(div.innerText) // 哈哈// div.innerText = "嘻嘻" // 修改 // div.innerText = div.innerText + "嘻嘻" //如下简化// div.innerText += "嘻嘻" // 追加// div.innerText += "<a href='#'>呼呼</a>" //纯文本div.innerHTML += "<a href='#'>呼呼</a>" }</script>
</head><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><div id="mydiv">哈哈</div>
</body>
</html>
18.案例_省市级联：0对应bj数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 省市级联 : 省的选项改变,市的选项也要跟着改变* 思路:* 1. 事件 : 省标签的onchange事件* 1. onclick : 鼠标点击触发* 2. onchange : 当内容改变的时候触发** 2. 执行逻辑* 1. 首先得有省对应的市区数据 (事先准备)* java：map : key="bj" value=bjArray* js：没有map，把北京索引设为0。 bj : 0 -> bjArray* 2. 获取省选项的value值, 去cityArray找数据* 3. 拿到数据之后,遍历添加到 市选项那边*/var bj = ["朝阳区","海淀区","石景山区"]var sh = ["航头区","黑马区","徐汇区"]var fj = ["福州市","厦门市","莆田市","三明市"]var js = ["宿迁市","淮安市","徐州市"]var cityArray = [bj,sh,fj,js] // 二维数组 List<List> : 双重for循环function selectCity() {var province = document.getElementById("provinceId");// console.log(province.value) //0，1，2，3 //不需要找到<option>，找到<select>就行 ，默认选中那个代表当前value值 var array = cityArray[province.value] // 自动转换 // var array = cityArray[parseInt(province.value)]//如上的array[0,1,2,3]就是第几行的市var city = document.getElementById("cityId");city.innerHTML = "<option value=''>‐‐请选择市‐‐</option>" //重置 //坑: 每次重新选择之前,数据要清空for(var i=0; i< array.length; i++){ //如下 "+array[i]+" 拼接字符串city.innerHTML += "<option value=''>"+array[i]+"</option>" //超文本追加}}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><select id="provinceId" onchange="selectCity()"><option>‐请选择‐</option><option value="0">北京</option><option value="1">上海</option><option value="2">福建</option><option value="3">江苏</option></select><select id="cityId"><option value="">‐‐请选择市‐‐</option><!-- <option value="">南京市</option><option value="">苏州市</option> --></select>
</body>
</html>
19.Dom编程_js修改css样式：.className
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.my{font-size: 40px;color: green;}.your{font-size: 60px;color: yellow;}</style><!--111111111111111111111111111111111111111111111111111111111111111111111111111111111--><script>/** 1. 直接修改 -> 行内样式* a. js中,任何标签对象都有style属性,用于操作css* b. 语法* 标签对象.style.css属性* css属性命名: font-size -> fontSize (小驼峰)(“-”在js中是非法标识符)* * 2. 类修改 -> 内部样式* a. js中,任何标签对象都有className属性,用于操作css* b. 语法* 标签对象.className = 类选择器名字*/function method01() { //修改行内样式，平级关系可修改var span1 = document.getElementById("span1");span1.style.fontSize = "50px" //没改stylespan1.style.color = "blue"}function method02() { //修改内部样式var span2 = document.getElementById("span1"); //点击按钮2没效果（下面的改class），因为行内样式优先级高于内部样式// var span2 = document.getElementById("span2"); //点击按钮2有效果（下面的改class），同是内部样式，后设置覆盖前设置span2.className = "your" //改class}</script>
</head><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><input type="button" value="按钮1" onclick="method01()"><input type="button" value="按钮2" onclick="method02()"><hr><span id="span1" style="font-size: 30px;color: red">span</span> <br><span id="span2" class="my">span</span> <br> <!--调用my 类选择器 -->
</body>
</html>
如下是按按钮前样式。
20.案例_隔行/触摸换色：鼠标移上去时, 当前行改背景色
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>/** 隔行换色: 奇偶行的背景色不一样* 1. 事件: 页面加载* 2. 逻辑: 1. 找到所有的行* 2. 遍历,改变背景色*/window.onload = function (ev) {var trs = document.getElementsByTagName("tr");for(var i=2;i<trs.length; i++){ //i=2，标题行不算if(i % 2 == 1){ //奇数行，行数和下标不一样trs[i].style.backgroundColor = "green"}}}</script><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111--> <script>/** 触摸换色* 1. 事件:* 鼠标移上去 onmouseover* 鼠标移出去 onmouseout* 2. 逻辑:* 1. 找到所有的行* 2. 遍历,注册事件*/window.onload = function (ev) {var trs = document.getElementsByTagName("tr");for(var i=2;i<trs.length; i++){//左边 : 属性 右边:回调函数trs[i].onmouseover = function (ev2) {/** 期望: 触摸哪一行,i就应该是哪一行的索引* 结果: 无论哪一行, i = 6* 解释: 左边是在页面加载结束时运行* 右边的回调函数是在用户鼠标移上去时执行(不确定)，晚于左边** 左边运行结束: i=6 ，右边一定是在左边运行结束时 才有可能运行，用this解决*/// console.log(i)// trs[i].style.backgroundColor = "yellow" //无效果this.style.backgroundColor = "yellow"}trs[i].onmouseout = function (ev2) {this.style.backgroundColor = "white"}}}</script></head><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <body><table id="tab1" border="1" width="800" align="center" > <tr> <!--6行6组tr--><td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>
21.js中的正则表达式：regular expression (regex) 具有某种特定规律的表达式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/** 在java中, 正则表达式就是个字符串 (完全匹配：abc只能abc，abca包含abc不行)* 在js中,正则是 类 (模糊匹配)** 正则对象的 两种创建方式1. 正则表达式是JS中是一个类：RegExp = Regular Expression 正则表达式var reg = new RegExp("正则表达式"); 2. 以/开头，以/结尾，中间的部分就是正则表达式var reg = /正则表达式/匹配模式; （匹配模式 i = ignore case 忽略大小写） */var reg = new RegExp("abc") //字符串只有包含abc,返回truevar reg = /abc/ //上行的简写 //包含就行var reg = /^abc/ //异或(数字6上) : 以什么开头var reg = /abc$/ //$ : 以什么结尾var reg = /^abc$/ //完全匹配var reg = /^(abc)+$/i //abc一个或多个，忽略大小写var str = "abcabcABC"var result = reg.test(str); //上面reg规则应用document.write(result) </script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
</body>
</html>
22.案例_表单校验：result = false
手机号：/^ $/ 完全匹配，第二位3到8中选一个，\d是0-9选一个（出现9次）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>验证注册页面</title><style type="text/css">body {margin: 0;padding: 0;font-size: 12px;line-height: 20px;}.main {width: 525px;margin-left: auto;margin-right: auto;}.hr_1 {font-size: 14px;font-weight: bold;color: #3275c3;height: 35px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #3275c3;vertical-align: bottom;padding-left: 12px;}.left {text-align: right;width: 80px;height: 25px;padding-right: 5px;}.center {width: 280px;}.in {width: 130px;height: 16px;border: solid 1px #79abea;}.red {color: #cc0000;font-weight: bold;}div {color: #F00;}</style><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111--> <script type="text/javascript">/** 1. 事件* a. 光标离开当前输入框触发: onblur* b. onsubmit : 表单提交(submit按钮被点击)的时候触发* return true : 数据正常提交* return false : 数据拒绝提交*/function myFormCheck() {/** 表单数据校验* 1. 所有表单项都校验合格 , return true* 2. 如果有一项错误, return false* TODO:*/var result = truevar user = document.getElementById("user"); if(user.value.length < 3 || user.value.length > 5){// alert("用户名必须在3~5长度之间") //弹窗提示document.getElementById("userspan").innerText = "用户名必须在3~5长度之间"result = false; //不能用return false}var pwd = document.getElementById("pwd");if(pwd.value.length < 3){document.getElementById("pwdspan").innerText = "密码必须3位或以上"result = false;}var repwd = document.getElementById("repwd");if(repwd.value != pwd.value){ //字符串比较用==就行，不要用equal。==就是字面值一致返回true。document.getElementById("repwdspan").innerText = "确认密码必须一致"result = false;}var email = document.getElementById("email");var regex = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/if(!regex.test(email.value)){document.getElementById("emailspan").innerText = "邮箱地址必须字母开头(字母数字和下划线+@+地址.com/cn)"result = false;}return result; //最后才return，下面不执行}</script>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<form action="http://www.baidu.com" method="get" id="myform" onsubmit="return myFormCheck()"><table class="main" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td></tr><tr><td class="hr_1">新用户注册</td></tr><tr><td style="height:10px;"></td></tr><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><!-- TODO: 将要做，相当于书签方便查看不能为空， 输入长度必须介于 3 和 5 之间 --><td class="left">用户名：</td><td class="center"><input id="user" name="user" type="text" class="in"/><span style="color: red" id="userspan"></span></td></tr><tr><!-- 不能为空， 输入长度大于6个字符 --><td class="left">密码：</td><td class="center"><input id="pwd" name="pwd" type="password" class="in"/><span style="color: red" id="pwdspan"></span></td></tr><tr><!-- 不能为空， 与密码相同 --><td class="left">确认密码：</td><td class="center"><input id="repwd" name="repwd" type="password" class="in"/><span style="color: red" id="repwdspan"></span></td></tr><tr><!-- 不能为空， 邮箱格式要正确 --><td class="left">电子邮箱：</td><td class="center"><input id="email" name="email" type="text" class="in"/><span style="color: red" id="emailspan"></span></td></tr><tr><!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 --><td class="left">手机号码：</td><td class="center"><input id="mobile" name="mobile" type="text" class="in"/></td></tr><tr><!-- 不能为空， 要正确的日期格式 --><td class="left">生日：</td><td class="center"><input id="birth" name="birth" type="text" class="in"/></td></tr><tr><td class="left"> </td><td class="center"><input name="" type="image" src="img/register.jpg"/></td></tr></table></td></tr></table>
</form>
</body>
</html>
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）相关推荐
- 前端性能优化之jQuery按需加载轮播图
引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
- html轮播图速度加快,jQuery按需加载轮播图(web前端性能优化)
引言 关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
- JS，两种在页面加载完成后自动执行的方法（ready，onload）
JS,两种在页面加载完成后自动执行的方法 1.jQuery的ready事件,需要引入jQuery的包才能使用,表示文档结构已经加载完成(不包含图片等非文字媒体文件): ready可以多次调用,可以绑定 ...
- c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法 发布于 2020-2-22| 复制链接 vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然 ...
- 前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题 经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
- vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
- 用js实现点击切换+自动切换的轮播图
用js实现点击切换+自动切换的轮播图 之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能.那么这些功能用js该如何实现呢?我们一起来看下吧! (ps:博主在 ...
- 原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
文章目录 功能简介 项目准备 项目说明 方案一:源代码 CSS样式 HTML结构 JS逻辑 方案二:源代码 CSS样式 HTML结构 JS逻辑 功能简介 页面展示 该项目功能实现: 无限滚动轮播图 j ...
- 页面中实现轮播图效果
html部分代码 <div class="imgbox" id="imgbox"><div class="inner"&g ...
最新文章
- 一款图像相关软件PhoXo
- spring基于注解的IOC以及IoC的案例——概念
- 这是高手最常用的第一快捷组合键 - imsoft.cnblogs
- 在龙芯上调试CoreCLR
- LeetCode 10 Regular Expression Matching（字符串匹配）
- Linux中main和初启函数,main 中的 argv和argc 到底是个啥意思？
- MapXtreme 2005 学习心得 了解新建MapXtreme项目结构(二)
- 网络通信协议基础（ISIS）——入门
- 锂电池充电原理__2020.03.10
- opencv31:哈里斯角检测|Harris Corner
- WIN7共享WIFI
- PDF写出:使用fop输出为pdf格式文件的Demo
- mysql分组查询学生平均年龄_8.21MySQL（四）基本查询语句及方法、连表、子查询...
- 可视化Keras模型
- Unity学习笔记-I2 localization
- JAVA毕设项目医院病历管理系统（java+VUE+Mybatis+Maven+Mysql）
- vue获取一个月有多少天
- CCM DC-DC变换器建模(2): boost，传递函数，右半平面零点（RHPZ）
- 头戴式耳机能听到声音但不能说话
- java散点图_Java 创建 Excel 散点图