dya04 js_02
2024-04-11 14:35:39
1 json的入门
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON数据格式</title>
</head>
<body>
<h2>JSON对象</h2>
<script type="text/javascript">//一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值var person = {firstname : "孙悟空",lastname : "弼马温",age : 18}//输出对象：对象名.属性名document.write("姓名: " + person.firstname + ", 昵称: " + person.lastname + ", 年龄: " + person.age + "<br/>");document.write(`姓名: ${person.firstname}, 昵称: ${person.lastname}, 年龄: ${person.age} <br/>`);
</script>
<hr/><h2>创建一个数组，其中每个元素是JSON对象</h2>
<script type="text/javascript">var personArr = [{firstname : "孙悟空",lastname : "弼马温",age : 18},{firstname : "猪八戒",lastname : "天蓬元帅",age : 19},{firstname : "沙和尚",lastname : "卷帘大将",age : 28}];//遍历输出每个JSON对象的属性值/*Java中写法：for(类型 变量名: 集合)JavaScript中写法：for(类型 变量名 of 集合)*/for(let person of personArr) {document.write(`姓名: ${person.firstname}, 昵称: ${person.lastname}, 年龄: ${person.age} <br/>`)}</script>
<hr/><h2>JSON对象,其中属性是集合</h2>
<script type="text/javascript">
var xiyouji = {name : "唐僧",age : 15,brothers : [{firstname : "孙悟空",lastname : "弼马温",age : 18},{firstname : "猪八戒",lastname : "天蓬元帅",age : 19},{firstname : "沙和尚",lastname : "卷帘大将",age : 28}]
}
document.write(`师傅 姓名: ${xiyouji.name}, 年龄: ${xiyouji.age}<br/>`);
document.write("徒弟们: <br/>")for(let personJson of xiyouji.brothers) {document.write(`姓名: ${personJson.firstname}, 昵称: ${personJson.lastname}, 年龄: ${personJson.age} <br/>`)}</script>
</body>
</html>
2 json和字符串的相互转化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON有关的函数</title>
</head>
<body>
<script type="text/javascript">//定义一个字符串，属性名一定是双引号var jsonStr = '{"name":"悟空", "age":18}';document.write("类型:" + typeof(jsonStr));//把字符串转成JSON对象var jsonObj = JSON.parse(jsonStr);document.write("<hr/>");document.write(jsonObj.name + " ====== " + jsonObj.age);document.write("<hr/>");//把JSON对象转成字符串var jsonStr2 = JSON.stringify(jsonObj);document.write("jsonStr2 = " + jsonStr2 + "<br/>");document.write("jsonStr2 类型:" + typeof(jsonStr2));</script></body>
</html>
3 window.confirm 确认操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window中的方法</title>
</head>
<body>
<input type="button" value="删除订单" onclick="delOrder()" />
<script type="text/javascript">function delOrder() {/*** 出现一个确定框，有2个按钮* 点确定，返回true，否则返回false*/// var flag = window.confirm("您确定要删除此订单吗?");var flag = confirm("2222222222 您确定要删除此订单吗?");// 如果选择的是 确定, 返回true; 否则 返回falseconsole.log(flag);if(flag) {document.write("用户选择的是确定! 执行删除操作!")}else {document.write("用户选择的是取消! 可能是用户误操作!")}}
</script>
</body>
</html>
4 location对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>BOM：location对象</title>
</head>
<body>
<!--点击以后调用方法-->
<input type="button" onclick="location.reload()" value="刷新"> <br/>
<input type="button" onclick="history.back()" value="后退"> <br/>
<input type="button" onclick="history.go(-1)" value="后退"> <br/><script type="text/javascript">//1. 获取属性值，得到当前访问的地址console.log("当前页面地址: " + location.href);//2. 设置属性值，跳转到指定的页面(常用)// location.href = "http://www.jd.com"; // (推荐)//location是window的一个属性，省略了window//window.location.href = "http://www.baidu.com";//location对象默认的属性是href，href也可以省略// location = "http://www.tianmao.com";//获取?后面的参数字符串let canshu = location.search;console.log(canshu);//显示现在的时间document.write(new Date().toLocaleString())
</script>
</body>
</html>
5 倒计时跳转
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跳转</title>
</head>
<body>
<span id="counter">5</span>秒以后跳转<script type="text/javascript">/*分析：1.用到倒计时：window.setInterval()2.页面跳转：location.href3.修改标签中文字使用属性：innerText*/// 声明一个变量var num = 5;// 每隔1秒更新秒数setInterval(function(){// 判断if(num == 0) {location.href = "http://www.baidu.com";} else {// 将变化后的秒数显示在标签中document.getElementById("counter").innerText = num;}// 让总秒数-1num--;}, 1000);</script>
</body>
</html>
6 会动的时钟
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>会动的时钟</title>
</head>
<body>
<input type="button" value="开始" id="btnBegin">
<!--disabled就元素不可用-->
<input type="button" value="暂停" id="btnPause" disabled="disabled">
<hr/><h1 id="clock" style="color: darkgreen"></h1><script type="text/javascript">// 变量var timer;// 需求1: 点击开始按钮, 就将电子始终开始走document.getElementById("btnBegin").onclick = function() {// setInterval(函数, 2000)timer = setInterval(function() {// 将当前时间显示 id=clock的标签中document.getElementById("clock").innerText = new Date().toLocaleString();}, 1000);// 让开始按钮 不可用document.getElementById("btnBegin").disabled = true;// 让暂停按钮 可用document.getElementById("btnPause").disabled = false;}// 需求2: 点击结束按钮, 将电子钟暂停document.getElementById("btnPause").onclick = function() {// setInterval(函数, 2000)clearInterval(timer);// 让开始按钮 可用document.getElementById("btnBegin").disabled = false;// 让暂停按钮 不可用document.getElementById("btnPause").disabled = true;}
</script>
</body>
</html>
7 innerHtml 和 innerText的区别
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>innerText和innerHTML的区别</title>
</head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content1">xxxxxxx</span>
<span id="content2">xxxxxxx</span><script type="text/javascript">// 需求: 点击按钮后, 将内容放到 span标签中// 1 给按钮绑定单击事件document.getElementById("btn").onclick = function() {// 将内容放到 span标签中document.getElementById("content1").innerText = "<h1 style='color:red'>32期 天生傲娇111</h1>";document.getElementById("content2").innerHTML = "<h1 style='color:green'>32期 天生傲娇222</h1>";}
</script>
</body>
</html>
8 dom的常用操作(查)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DOM：查找元素的方法</title><style>table {/*细边框样式*/border-collapse: collapse;width: 500px;}</style>
</head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1"><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr>
</table><script type="text/javascript">// 目标: 单击按钮时, 让表格隔行变色// 单击按钮时document.getElementById("b1").onclick = function () {// 获取页面中的所有trvar trObjArr = document.getElementsByTagName("tr");for (let i = 0; i < trObjArr.length; i++) {const trObj = trObjArr[i];// 判断if(i%2==0) {trObj.style.backgroundColor = "lightyellow";}else {trObj.style.backgroundColor = "lightblue";}}}</script><hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>
<!--要选中一个checkbox需要设置checked=true，表示选中，否则就没选中-->
<input type="checkbox" name="product" >自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机<script type="text/javascript">//通过css的#id选择器来选中元素// 1 给按钮绑定单击事件// document.getElementById("b2").onclick = function () {// alert(1111);// }document.querySelector("#b2").onclick = function() {// 根据name属性值 选中一组标签对象var productObjArr = document.getElementsByName("product");for (const productObj of productObjArr) {productObj.checked = true; // ture 选中, false 取消选中}}
</script>
<hr/><input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客</a>
<a class="company">传智播客</a>
<a class="company">传智播客</a><script type="text/javascript">document.getElementById("b3").onclick = function () {// 根据class属性值 获取一组标签var companyObjArr = document.getElementsByClassName("company");for (let i = 0; i < companyObjArr.length; i++) {const companyObj = companyObjArr[i];companyObj.href = "http://www.itcast.cn";}}
</script>
</body>
</html>
9 dom 增
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="myDiv"></div>
<script>// 目标: 创建a标签显示到页面上// 方式一// // 创建a标签 <a></a>// var aObj = document.createElement("a");// // 设置属性 <a href="http://www.jd.com"></a>// aObj.setAttribute("href", "http://www.jd.com");// // 设置内容 <a href="http://www.jd.com">京东</a>// aObj.innerText = "京东";// // 将a标签 放到 div中// document.getElementById("myDiv").appendChild(aObj);// 方式二var str = "<a href='http://www.baidu.com'>百度</a>";document.getElementById("myDiv").innerHTML = str;
</script> </body>
</html>
10 二级联动
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>省市联动</title>
</head>
<body>
<select id="province"><option>--请选择省份--</option>
</select>
<select id="city"><option>--请选择城市--</option>
</select>
</body><script>// 省份数据var provinces= ["广东省","湖南省","广西省"];// 城市数据，数据是一个二维数组，一维中每个元素是一个数组var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];// 需求1: 初始化省级信息var provinceStr = `<option>--请选择省份--</option>`;for (let i = 0; i < provinces.length; i++) {provinceStr += `<option value="${i}">${provinces[i]}</option>`;}//console.log(provinceStr);document.getElementById("province").innerHTML = provinceStr;// 需求2: 当省发生变化时, 加载市级信息document.getElementById("province").onchange = function () {console.log(this.value);//var provinceVal = document.getElementById("province").value;var provinceVal = this.value;var cityArr = cities[provinceVal];var cityStr = `<option>--请选择城市--</option>`;if(cityArr!=null && cityArr.length>0) {for (let i = 0; i < cityArr.length; i++) {cityStr += `<option value="${i}">${cityArr[i]}</option>`;}//console.log(cityStr);}document.getElementById("city").innerHTML = cityStr;}</script>
</html>
11 正则写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则表达式</title>
</head>
<body>
<script type="text/javascript">/*** 创建正则表达式的2种方式：* 1. new RegExp("正则表达式")* 2. /正则表达式/** 判断正则表达式是否匹配字符串的方法：* boolean 正则表达式对象.test(字符串) 如果匹配返回true，否则返回false* 与Java不同，Java默认是精确匹配。JS默认是模糊匹配，只要包含这个正则表达式的内容就可以* 结论：如果要在JS中精确匹配，必须以^开头，以$结尾*/// 匹配含有三个数字var reg1 = new RegExp("\\d{3}");// document.write(reg1.test("123") + "<br/>"); // true// document.write(reg1.test("a123") + "<br/>"); // true// document.write(reg1.test("123z") + "<br/>"); // true// document.write(reg1.test("a123z") + "<br/>"); // truedocument.write("<hr/>")// 匹配以3个数字开头的var reg2 = new RegExp("^\\d{3}");// document.write(reg2.test("123") + "<br/>"); // true// document.write(reg2.test("a123") + "<br/>"); // false// document.write(reg2.test("123z") + "<br/>"); // true// document.write(reg2.test("a123z") + "<br/>"); // false//// document.write("<hr/>");// 匹配三个数字结尾的// var reg3 = new RegExp("\\d{3}$");// document.write(reg3.test("123") + "<br/>"); // true// document.write(reg3.test("a123") + "<br/>"); // true// document.write(reg3.test("123z") + "<br/>"); // false// document.write(reg3.test("a123z") + "<br/>"); // false//// document.write("<hr/>");// 正确写法var reg4 = new RegExp("^\\d{3}$");document.write(reg4.test("123") + "<br/>"); // truedocument.write(reg4.test("a123") + "<br/>"); // falsedocument.write(reg4.test("123z") + "<br/>"); // falsedocument.write(reg4.test("a123z") + "<br/>"); // falsedocument.write("<hr/>");/*使用第2种写法*/var reg5 = /^\d{3}$/;document.write(reg5.test("123") + "<br/>"); // truedocument.write(reg5.test("a123") + "<br/>"); // falsedocument.write(reg5.test("123z") + "<br/>"); // falsedocument.write(reg5.test("a123z") + "<br/>"); // false</script>
</body>
</html>
12 正则修饰符
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则表达式匹配模式</title>
</head>
<body>
<script type="text/javascript">/*i 忽略大小写比较1. new RegExp("正则表达式","匹配模式")2. /正则表达式/匹配模式*/var reg1 = new RegExp("^cat$");document.write(reg1.test("CAT") + "<br/>"); // falsedocument.write(reg1.test("Cat") + "<br/>"); // falsedocument.write("<hr/>");var reg2 = new RegExp("^cat$", "i");document.write(reg2.test("CAT") + "<br/>"); // truedocument.write(reg2.test("Cat") + "<br/>"); // truedocument.write("<hr/>");var reg3 = /^cat$/;document.write(reg3.test("CAT") + "<br/>"); // falsedocument.write(reg3.test("Cat") + "<br/>"); // falsedocument.write("<hr/>");var reg4 = /^cat$/i;document.write(reg4.test("CAT") + "<br/>"); // truedocument.write(reg4.test("Cat") + "<br/>"); // true
</script>
</body>
</html>
13 注册案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; 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">function checkAll() {// 如果通过了所有的校验, 返回true; 否则 返回falsevar flag1 = checkUser();var flag2 = checkMobile();return flag1 && flag2;}// 需求: 校验用户名function checkUser() {// 1 获取用户输入的值let userVal = document.getElementById("user").value;// 2 创建正则对象 : 用户名 只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头var reg = /[a-zA-Z]\w{3,15}/;// 3 通过正则校验, 返回boolean结果var flag = reg.test(userVal);// 4 判断if(flag) {// 4.1 如果合法, 显示对勾图片, 返回truedocument.getElementById("userInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;return true;}else {// 4.2 如果不合法, 提示错误信息, 返回falsedocument.getElementById("userInfo").innerHTML = `用户名格式不对!`;return false;}}// 校验手机号的格式function checkMobile() {// 1 获取用户输入的值let mobileVal = document.getElementById("mobile").value;// 2 创建正则对象 : 手机号：/^1[3456789]\d{9}$/var reg = /^1[3456789]\d{9}$/;// 3 通过正则校验, 返回boolean结果var flag = reg.test(mobileVal);// 4 判断if(flag) {// 4.1 如果合法, 显示对勾图片, 返回truedocument.getElementById("mobileInfo").innerHTML = `<img src="img/gou.png" width="20"/>`;return true;}else {// 4.2 如果不合法, 提示错误信息, 返回falsedocument.getElementById("mobileInfo").innerHTML = `手机号格式不对!`;return false;}}</script></head><body><!--表单提交事件: return true 正常提交, return false 没办法提交--><form action="server" method="post" id="myform" onsubmit="return checkAll()"><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><!-- 不能为空， 输入长度必须介于 5 和 10 之间 --><td class="left">用户名：</td><td class="center"><input id="user" name="user" type="text" class="in" onblur="checkUser()"/><span id="userInfo" style="color:red"></span></td></tr><tr><!-- 不能为空， 输入长度大于6个字符 --><td class="left">密码：</td><td class="center"><input id="pwd" name="pwd" type="password" class="in" /></td></tr><tr><!-- 不能为空， 与密码相同 --><td class="left">确认密码：</td><td class="center"><input id="repwd" name="repwd" type="password" class="in"/></td></tr><tr><!-- 不能为空， 邮箱格式要正确 --><td class="left">电子邮箱：</td><td class="center"><input id="email" name="email" type="text" class="in"/></td></tr><tr><!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 --><td class="left">手机号码：</td><td class="center"><input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/><span id="mobileInfo" style="color:red"></span></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>
dya04 js_02相关推荐
- 鼠标画上去图片旋转360度
**鼠标画上去图片旋转360度** <!DOCTYPE html> <html lang="en"> <head><meta charse ...
- 小李学的JavaScript之JS_01
输出Hello World 利用Alert()输出一个弹窗信息 <!DOCTYPE html> <html><head><meta charset=" ...
最新文章
- 切记！MySQL中ORDER BY与LIMIT 不要一起用，有大坑
- R语言ggplot2可视化强制设置x轴、y轴坐标的起始点为0或者其他实战
- 算法-----------计算二叉树的最大深度
- BUUCTF(pwn)starctf_2019_babyshell
- python安装pyinstaller库_python pyinstaller安装
- c语言将一个已知头结点的单链表逆序_C语言实现单链表逆序与逆序输出实例
- 漫游飞行_手机“飞行模式”为何没被淘汰？内行人坦言：其实是你不会用！
- leetcode124. 二叉树中的最大路径和
- html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
- java吃豆人代码讲解_在吃豆人的这一关里，隐藏着来自程序员的深深恶意
- UINavigationController_学习笔记
- linux 无法启动matlab,在具有 jre 1.7.0 _05的科学linux上，无法启动 MATLAB gui ( 指南)_matlab_开发99编程知识库...
- PCL——PCD文件格式分析
- 20172307 2017-2018-2 《程序设计与数据结构》第7周学习总结
- 图像局部特征（十二）--BRISK特征
- docker使用阿里云仓库上传与下拉images
- cmd命令将web项目打成jar包_首发！JDK14之jpackage命令尝鲜
- Centos7 Putty SSH密钥登录
- LeetCode 799 香槟塔[模拟+动态规划] HERODING的LeetCode之路
- laravel8 使用高德地图查询经纬度（输入地名获取经纬度）