网站导航
> 文章列表 > 黑马2023JavaScript笔记

黑马2023JavaScript笔记

网友: 文章列表 2024-03-21 20:31:56

黑马2023JavaScript笔记

一、js知识点

<!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>//js自定义对象var user = {name:"Tom",sex:"male"};console.log(user.name);//json字符串var json = '{"name":"XiaoMing","sex":"female"}';// 将json字符串转换为json对象var jsonobj = JSON.parse(json);console.log(jsonobj.name);//XiaoMing//将json对象转换为字符串alert(JSON.stringify(jsonobj));// js数组var arr = [1,2,3,4];//普通js函数arr.forEach(function(e){console.log(e);})console.log("------------------------");//es6中函数arr.forEach((e) => {console.log(e)});// 两个种函数表达方式效果都是一样的//在BOM对象中，我们只需要了解window和location两个对象就够了！！！// BOM中的两个对象：window和location// 一、window对象的方法：// 1、confirmvar result = confirm("你确定吗？");alert(result);//点了确定返回true，取消返回false// 2、setInterval()。输出执行了多少次。let i = 0;window.setInterval(function(){i++;console.log(i+"次");},1000);// 3、setTimeout()，隔多长时间，执行一次函数（只执行一次）var myfun1 = function(){alert("(*´▽｀)ノノ");};window.setTimeout(myfun1,5000);// 二、location对象// 只需要知道location对象的href属性！！！！alert(location.href);/* 返回整个url地址 */location.href = "https://www.itcast.cn";//自动跳转到改地址</script>
</head>
<body><label><input type="radio" name="x">小明</label><label><input type="radio" name="x">huahua</label>
</body>
</html>

黑马2023JavaScript笔记

黑马2023JavaScript笔记

黑马2023JavaScript笔记

二、js综合案例

<!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><style>#center{max-width: 1000px;width: 60%;margin-left: auto;margin-right: auto;}</style><script>window.onload = function(){var lamps = document.getElementById("lamp");var opens = document.getElementById("open");var closes = document.getElementById("close");var text = document.getElementById("textcontent");var chooseall = document.getElementById("chooseAll");var chooseno = document.getElementById("chooseNo");opens.onclick = function(){lamps.src = 'on.gif';}closes.onclick = function(){lamps.src = 'off.gif';}// 将字符串转换为小写text.onfocus = function(){//text.value可读可写，可返回值let str = text.value;text.value = str.toLowerCase();}// 将字符串转换为大写text.onblur = function(){let str = text.value;text.value = str.toUpperCase();}// 全选chooseall.onclick = function () {var myhobby = document.getElementsByName("hobby");for (let i = 0; i < myhobby.length; i++) {myhobby[i].checked = true;}}// 全不选chooseno.onclick = function () {var myhobby = document.getElementsByName("hobby");for (let i = 0; i < myhobby.length; i++) {myhobby[i].checked = false;}}}</script>
</head>
<body><!-- 通过事件监听及DOM操作，完成如下效果实现。1、点击“点亮”按钮点亮灯泡，点击“熄灭”按钮 熄灭灯泡。2、输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写3、点击“全选”按钮，使所有的复选框呈现被选中的状态，点击“反选”按钮使按钮所有的复选框呈现取消勾选的状态。--><div id="center"><img src="off.gif" id="lamp"><br/><input type="button" value="点亮灯泡" id="open"><input type="button" value="熄灭灯泡" id="close"><br/><input type="text" id="textcontent" value="Hello"><br/><input type="checkbox" name="hobby">C<input type="checkbox" name="hobby">C++<input type="checkbox" name="hobby">JAVA<br/><input type="button" value="全选" id="chooseAll"><input type="button" value="全不选" id="chooseNo"></div></body>
</html>

黑马2023JavaScript笔记

网络标签：

相关问题