目录
JS对象：JSON
-
自定义对象
1.定义格式
var 对象名 ={
属性名1 ：属性值1，
属性名2 ：属性值2，
属性名3 ：属性值3，
函数名称 ：function(形参列表){}
}；
注意：JSON格式的属性值也要加双引号，和属性值一样
var user ={
name ："小敏"，
age ：22，
gender ："female"，
food ：function(){
alert("苹果");
}
}；2.调用格式
对象名.属性名
对象名.函数名()
console.log(user.age); //alert(user.name);
user.food();3.JSON基础语法
var 变量名 ='{"key1":"value1","key2":"value2"}'; //{}单引号在外面
var user = '{"name" : "小敏" , "age" :18 , "places" : ["北京" , "广州 ","深圳"]}'；4.JSON字符串转化为js对象
var user = '{"name" : "小敏" , "age" :18 , "places" : ["北京" , "广州 ","深圳"]}'；
var obj = JSON.parse(user); //user字符串通过parse转为obj对象
alert(obj.name); //obj对象里面的属性name打印4.js对象转化为JSON字符串
var user=JSON.stringify(obj); //右--左,将对象转字符串stringifyBOM浏览器对象模型
提示：可以与浏览器对话，将浏览器各个部分封装成对象，w3school可以去看看
组成：
| window | 浏览器窗口对象 |
| 浏览器对象 | |
| screen | 屏幕对象 |
| history | 历史记录对象 |
| location | 地址栏对象 |
1.window浏览器窗口对象的方法
| alert () | 警告框 |
| confirm() | 确认按钮和取消按钮的对话框 |
| setInterval() | 指定周期调用函数或计算表达式 |
| setTimeout() | 指定毫秒后调用函数或者计算表达式 |
警告框：
window.alert("页面中上方跳出的一个框"); //可以省略window.
alert("页面中上方跳出的一个框"); //和上面的效果一样
对话框：
//confirm对话框
var box = confirm("请问确定是否要删除？");
alert(box); //点确定返回true,点取消返回false定时器setInterval：
//定时器---setInterval---周期性执行某一函数或计算表达式
var i = 0; //一开始是从0开始
setInterval(function(){
i++;
console.log("计时器循环打印了第"+ i + "次"); //这个效果的实现在console检查控制台可以看到是否生效
}，2000）； //间隔多少秒打印一次在这里设置，因为以毫秒为单位，2000是指2秒打印一次控制台效果如图：
定时器setTimeout：
setTimeout(function(){
alert("Timeout只执行一次");
},3000); //3秒之后执行，只执行一次2.location地址栏对象
alert(location.href); //显示当前页面的URL地址
location.href="www.baidu.com"; //设置跳转的URL页面，显示完当前URL就跳转到别的页面DOM文档对象模型
提示：各个组成部分封装成对象
| Document | 整个文档对象 |
| Element | 元素对象 |
| Attribute | 属性对象 |
| Text | 文本对象 |
| Comment | 注释对象 |
JavaScript能够通过DOM，对HTML进行操作
- 可以改变HTML的内容，比如文字
- 可以改变css样式，比如颜色
- 可以对HTML的DOM事件作出响应
- 可以删除和添加HTML元素
注意：想了解更详细的一定要去看w3school，怎么调用属性和方法里面内容超级详细！！
说明：document获取element，window获取document
1.获取element对象的函数
用id属性
var p1 = document.getElementById('p'); //通过id属性获取，再返回对象用标签名称
var div1 = document.getElementByTagName('div');
//通过标签名称获取，再返回对象用name属性值
var name = document.getElementByName('name');用class属性获取
var divs = documentElementByClassName('cls'); //class拿到的是数组
for(let i =0; i < divs.length; i++){
alert(divs[i]); //打印每个数组
};改变HTML文本内容
var divs = documentElementByClassName('cls'); //拿到数组
var div1 = divs[0]; //把数组第一个数据给div1
div1.innerHTML="把这里的内容修改成设置的内容"; //+="";就是加上什么文字2.DOM案例：
//html文件
<body>
<img id = "h1" src="image/top.png"><br><br>
<div class ="project">语文</div><br>
<div class ="project">英语</div><br>
<input type="check-box" name="food">苹果 //checkbox表示复选框，可以多选的小正方形
<input type="check-box" name="food">栗子
<input type="check-box" name="food">西瓜
</body>
//JavaScript文件
<script>
//1.实现图片点击变换
var h1 = document.getElementById('h1');
img.src = "image/bottom.jpg"; //拿到img的src属性改bottom的
//2.在div内容后加上分数，“语文和英语+100分”
var divs = document.getElementByClassName('project'); //div或者其他有多个要写for别忘了
for(let i=0; i<= divs.length; i++){
const div = divs[i]; //拿到数组里面的单个div，就是语文英语
div.innerHTML += "100分"; //结果改为语文100分和英语100分
};
//3.选中复选框状态
var check = document.getElementByName('food'); //因为food有三个，所以for，拿到元素
for (let i =0; i<= check.length; i++){ //开始遍历每个元素
const check1 = check[i]; //拿到的每个i给check1,用const有的用var
check1.checked = "true"; //true就是选中哦，每个check1都给true
};
</script>
复选框选中
JavaScript事件监听
提示：按钮被点击，鼠标移动，点击键盘都叫事件
1.事件绑定
<body>
//通过html标签绑定事件
<input type ="button" onclick ="on()" value ="按钮1">
//通过DOM元素绑定事件
<input type ="button" id ="btn" value ="按钮2">
</body>
//javascript代码
//html事件绑定
<script>
function on(){
alert("按钮2被点了");
}
</script>
//DOM事件绑定
<script>
document.getElementById('btn').onclick = function(){
alert("按钮2被点了");
}
</script>2.常见事件
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfucus | 元素活动焦点 |
| onload | 页面或图片完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onkeydown | 键盘被按下 |
| onmouseover | 鼠标移到某元素上 |
| onmouseout | 鼠标从某元素移开 |
<body onload="load()"> //onload事件给她一个方法
<form action="" style="text-align:center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br> //换行
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年级</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>小敏</td>
<td>212011</td>
<td>21</td>
<td>100</td>
</tr>
<tr align="center">
<td>小婷</td>
<td>212012</td>
<td>21</td>
<td>120</td>
</tr>
<tr align="center">
<td>小辉</td>
<td>212013</td>
<td>21</td>
<td>60</td>
</tr>
</table>
</body>
<script>
//1.onload刷新之后console提示刷新成功
function load(){ //function不需要分号结尾}；
console.log("控制台提示刷新成功！");
}
//2.onclick常用的鼠标点击，一般用在按钮
function fn1(){ //这里用fn1因为HTML上面定义了方法，onclick="fn1()"
console.log("控制台提示按钮被点击了！");
}
//3.onblur失去焦点
function bfn(){
console.log("控制台提示失去焦点提示");
}
//4.onfocus获取焦点
function ffn(){
console.log("控制台提示获取焦点提示");
}
//5.onkeydown键盘被点击
function kfn(){
console.log("控制台提示键盘被点击");
}
//6.onmouseover鼠标移到元素上
function over(){
console.log("控制台提示鼠标移到元素");
}
//7.onmouseout鼠标移开元素
function out(){
console.log("控制台提示鼠标移开元素");
}
</script>
注意：直接建一个HTML全部代码放进去就能运行，因为有<script>标签，单独js文件不写<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="load()">
<!-- onload事件给她一个方法 -->
<form action="" style="text-align:center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<!-- 换行 -->
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>姓名</th>
<th>学号</th>
<th>年级</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>小敏</td>
<td>212011</td>
<td>21</td>
<td>100</td>
</tr>
<tr align="center">
<td>小婷</td>
<td>212012</td>
<td>21</td>
<td>120</td>
</tr>
<tr align="center">
<td>小辉</td>
<td>212013</td>
<td>21</td>
<td>60</td>
</tr>
</table>
</body>
<script>
//1.onload刷新之后console提示刷新成功
function load(){ //function不需要分号结尾}；
console.log("控制台提示刷新成功！");
}
//2.onclick常用的鼠标点击，一般用在按钮
function fn1(){ //这里用fn1因为HTML上面定义了方法，onclick="fn1()"
console.log("控制台提示按钮被点击了！");
}
//3.onblur失去焦点
function bfn(){
console.log("控制台提示失去焦点提示");
}
//4.onfocus获取焦点
function ffn(){
console.log("控制台提示获取焦点提示");
}
//5.onkeydown键盘被点击
function kfn(){
console.log("控制台提示键盘被点击");
}
//6.onmouseover鼠标移到元素上
function over(){
console.log("控制台提示鼠标移到元素");
}
//7.onmouseout鼠标移开元素
function out(){
console.log("控制台提示鼠标移开元素");
}
</script>
</html>3.DOM综合案例
提示：涉及夜间模式日间模式切换，聚焦小写，离焦大写，复选框全选，复选框反选
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM案例</title>
</head>
<body>
<!-- 给它一张夜间模式的照片 -->
<img id="model" src="image/moon.png">
<br><br>
<!-- 给它on方法,按钮绑定事件onclick -->
<input type="button" value="日间模式" onclick="on()">
<!-- 给它off方法 -->
<input type="button" value="夜间模式" onclick="off()">
<br><br><br>
<!-- 复选框有3个，input框外面才是文字 -->
<input type="checkbox" name="cloth">上衣
<input type="checkbox" name="cloth">裤子
<input type="checkbox" name="cloth">裙子
<br><br>
<!-- 给一个按钮，按钮里面有文字 ,是在这里绑定事件onclick，因为你点击的是这两个按钮,给onclick的方法记得带括号-->
<input type="button" value="全选" onclick="checkALL()">
<input type="button" value="反选" onclick="reverse()">
<br><br><br>
<!-- 这是一个文本框，因为是文本类型，要给id或者name或者classname，document通过id获取元素 ,绑定大写小写事件-->
<input type="text" id="words" value="abcd" onclick="upper()" onclick="lower()">
</body>
<!-- 写JavaScript代码： -->
<script>
//给它一个on()方法
function on(){
//获取img元素对象
var imgs = document.getElementById('model');
//设置src属性
imgs.src="image/sun.png";
}
//给它一个on()方法
function off(){
//获取img元素对象
var imgs = document.getElementById('model');
//设置src属性
imgs.src="image/moon.png";
}
//单击事件onclick全选
function checkALL(){
//获取cloth复选框里面的所有元素,记得它是一个数组
var cloths =document.getElementsByName('cloth');
//设置选中状态---true,但前提是先遍历一下数组拿到里面各个元素
for(let i =0; i<=cloths.length; i++){
//这里一般是for搭配const使用，var声明变量，let与var用法类似，但const是声明常量的
const element =cloths[i];
//给元素设置一个属性，true可以理解为打钩选中的意思
element.checked = true;
}
}
//单击事件onclick全选
function reverse(){
//获取cloth复选框里面的所有元素,记得它是一个数组
var cloths =document.getElementsByName('cloth');
//设置选中状态---true,但前提是先遍历一下数组拿到里面各个元素
for(let i =0; i<=cloths.length; i++){
//这里一般是for搭配const使用，var声明变量，let与var用法类似，但const是声明常量的
const element =cloths[i];
//给元素设置一个属性，true可以理解为打钩选中的意思
element.checked = false;
}
}
//转为大写看这里
function upper(){
//第一步还是获取元素对象
var input =document.getElementById('words');
//将input里面的value值转为=大写，用这个方法：toUpperCase()
input.value=input.value.toUpperCase();
}
//转为大写看这里
function lower(){
//第一步还是获取元素对象,就是文本框里面的文字，因为可以输入，所以是变量用var声明变量
var input =document.getElementById('words');
//将input里面的value值转为=大写，用这个方法：toLowerCase()
input.value=input.value.toLowerCase();
}
</script>
</html>日间模式---反选---小写
夜间模式---全选--大写
扫一扫
5293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
