第一句子网 > 【前端2】js：原始类型运算符调试页面加载轮播图 Bom（对象时钟） Dom（

【前端2】js：原始类型运算符调试页面加载轮播图 Bom（对象时钟） Dom（

时间：2022-02-02 17:32:37

文章目录

1.js两种引入：js最终要引入到html在浏览器中运行2.js五大原始类型：undefined3.js的运算符和流程控制：js不支持单&和单|性能低4.案例_99乘法表：Sources调试5.函数的基本语法：function6.函数的两种变量和两种定义：全局/局部变量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样式：.className20.案例_隔行/触摸换色：鼠标移上去时, 当前行改背景色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><script>function method01() {var result = confirm("你满18岁了吗?")}</script> </head><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><script> document.writeln("hello"); //DOM : 在网页中输出</script> <script src="../js/my.js">//中间不能写</script><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><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><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><script>var result = 1 > false? "嘻嘻" : 10 //三元运算，java中问号后面必须同类型，js可不同document.writeln(result) //嘻嘻，因为false运算时转为数字0document.writeln("<hr>")</script> <script>/** == : 等等: 只比较字面值, 不比较类型。常用* === : 恒等：不仅比较字面值, 比较类型。不常用，在js中判断类型意义不大，因为js弱类型。*/var a = "200"var b = 200document.writeln(a == b) // true //网页输入都是字符串document.writeln(a === b)// falsedocument.writeln("<hr>")</script> <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><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> <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><body></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><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> <script>document.writeln("另一个script:" + a) //可访问到，等价于上面document.writeln("外部:" + a)</script> <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> <script>function method03(xx) {//xx=匿名函数，函数回调(callback)：xx() xx()} method03( function(){document.writeln("哈哈")} ) //最终打印哈哈 </script></head> <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> <body><input type="button" value="命名注册" onclick="method01()"> <br><br><input type="button" value="匿名注册" id="myid"></body></html> <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> <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> <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> <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><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><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><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><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><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><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><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 = ""}function method02() {location.reload()}</script></head><body><input type="button" value="跳转到百度" onclick="method01()"> <br> <a href="">超链接:跳转</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 = ""}}window.onload = function (ev) {setInterval(method01,1000) //每隔1秒调用method01}</script></head><body>付款成功!!! <br><span id="myspan">5秒后回到主页</span> <a href="">如果没有自动跳转,请点击这个</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><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><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 = ""}}//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><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><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><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><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></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><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><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> </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><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><body><table id="tab1" border="1" width="800" align="center" > <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><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><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><body><form action="" 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><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><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><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（全选全不选省市级联隔行/触摸换色表单校验）

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。