JavaScript 简单使用DOM
- DOM [Document Object Model] 文档对象模型
- 作用 : 浏览器提供操作网页标签对象和属性(习惯将浏览器提代对象属性API)
- #通过对象
- :创建标签
- :修改标签;标签内容;标签属性
- :查询指定标签;删除标签
- 浏览器对象: document #文档表示当前
- 网页对象
- -依据id属性获取标签元素
document.getElementById("id属性值");- 示例：
<input type="button" id="btn">var n = document.getElementById("btn");- -修改:内容
- (1) #修改标签内容:(要求:当前标签成对)
<h3 id="h3">失败</h3>- ① 获取标签
var h3 = document.getElementById("h3");- ② 直接修改标签中内容
h3.innerHTML = "成功";innerHTML表示标签中间内容- (2) -修改:属性样式
style <h3 id="h3">失败</h3>把文字修改红色 背景修灰色- ① 获取标签
var h3 =document.getElementById("h3");- ② 直接修改标签style属性
h3.style.color="#F00";h3.style.backgroundColor="#aaa";- (3) -创建元素[标签] innerHTML
<div id="box"></div> - ① 获取元素
var box = document.getElementById("box");- ②创建字符串[标签],将字符串赋值
innerHTML标签创建成功 - #在div中创建二个标签 h1 h2
var html = "<h1>h1</h1><h2>h2</h2>";box.innerHTML = html;- #程序中数据是不断变化与其对应网页标签也需动态变化
- #示例:小米 列表
小案例
案例一：点击上升气球
提示一:创建图像标签保存气球
提示二:为图像绑定点击事件 onclick
提示三:图像向上移动修改气球图片位置
position: absolute #定位:绝对定位
top:350px; #图像顶部位置
提示四:定时器
setInterval(()=>{},1000/60); #屏幕刷新率 60HZ 1000/60频率配置运行平滑
<!-- 代码是写在body里面的哦! -->
<h3>案例:飞起小气球</h3>
<!-- 图片是我自己找的,你用自己的图片就行,百度一个气球 -->
<img src="1.jpg" id="pic" width="81" onclick="check()"
style="position: absolute;top:350px">
<script>
//表示当前气球位置;浏览器内部有变量 top
var top2 = 350;
//position定位 absolute绝对定位 top顶端位置
function check(){
var time = setInterval(()=>{
//1:依据id获取气球元素 id=pic
var pic = document.getElementById("pic");
//2:top--
top2 -= 1;
//3:将新值赋值pic元素 top+"px";
pic.style.top = top2+"px";
//网页通用时间 屏幕刷新 60HZ
},1000/60);
}
</script>
案例二：动态创建表格
思路:(1)在js创建数组 [{id:1,name:"tom"},{id:2,name:"jerry"}]
(2)依据数组在网页创建标签 table
<table>
<tr><td>1</td><td>tom</td></tr>
<tr><td>2</td><td>jerry</td></tr>
</table>
<body>
<table border="1" width="700">
<thead>
<tr><td>编号</td><td>用户名</td></tr>
</thead>
<tbody id="data">
</tbody>
</table>
<script>
//思路的培养:多看,多练,多思考 [修理灯泡]
//1:创建一个数组
// 想要添加更多内容,在这儿添加即可
var rows = [{id:1,name:"tom"},{id:2,name:"kk"},{id:3,name:"KO"}];
//2:获取id=data元素 tbody
var data = document.getElementById("data");
//3:创建字符串
var html = "";
//4:通过循环创建动态标签 14:30
for(var i=0;i<rows.length;i++){
var obj = rows[i];
//!!拼接字符串,作用:创建标签
html += `<tr><td>${obj.id}</td>
<td>${obj.name}</td></tr>`;
}
//5:赋值 依据字符串创建对应标签!!!!!!
data.innerHTML = html;
</script>
</body>
ajax介绍
- 生活示例：
- 快递小哥 送货 取货
- -追踪小哥行走路线
- 程序示例：
- AJAX 发数据[提交] 收数据[显示] 追踪数据
- AJAX 发数据[提交] 收数据[显示] 追踪数据
- 优点：用户感受流畅
- 1:表单 发送数据 收数据 (用户感受非常不好)
- 2:AJAX 发送数据 收数据 (用户感受非常流畅)
- 示例:用户注册 判断用户名是否重复
- 通用套路:99%数据都是依据ajax 获取修改
AJAX同步异步 (–重点–)
- AJAX : Asynchronous JavaScript And XML 异步
- JavaScript And XML --重点
- 同步
- 当一个任务A进行中不能开启其它新任务(其它任务只能等待)
- 必须等A结束后其它的任务可以运行(霸道)
- 生活示例:打电话
- 异步
- 网络中程序一种工作方式
- 异步: 当一个任务A进行中能开启其它新任务，不需要等待
- 生活示例:微信
- AJAX 核心对象
XMLHttpRequest- 作用:向服务器发送请求并且接收返回数据
- 标准语法:
var xhr = new XMLHttpRequest(); - 示例:快递小哥上岗
- AJAX 对象核心属性
readyState- 此属性用来记录xhr对象当前状态
- 通过此属性用于追踪xhr对象己经工作到了哪个节点
- 属性值
- 0 UNSENT xhr对象创建,但是没有调用open方法 #上岗
- 1 OPENED open() 方法己经被调用 #快递单
- 2 HEADERS_RECEIVED send()方法己经被调用 #跑，东哥递
- 3 LOADING 下载中 #东哥瓜送路上
- 4 DONE 下载完成 #瓜到了
status 200此属性用于保存服务器响应状态码
- AJAX 对象核心方法
open();- 作用:创建一个服务器连接[建议通道]
- 三个参数
- ①
method请求方式 “GET” “POST” “PUT” “DELETE” - ②
url请求服务器地址 - ③
isAsyn是否是异步方式来发送请求 true/异步(建议) false/同步
- ①
send()向服务器程序发送数据- 如果请求方式 GET DELETE send() 没有参数
- 如果请求方式 POST PUT send(
id=19&name=dd&age=21);<模板字符串>
- AJAX 对象核心事件
onreadystatechange- 作用:当属性
readyState属性值发生变化时此事件调用 <readyState 属性详解在下面> - 01234 0~1 1~2 2~3 3~4
- 在此事件中接收服务器返回数据
- 接收服务器返回数据
- ① 在onreadystatechange 接收服务器返回数据
- ②接收之前先判断
//服务器数据接收完成 数据正确if(xhr.readState===4 && xhr.status===200){- ③
接收数据 xhr.responseText; #数据字符串类型 Text文本字符串 }
原生ajax请求
- 基本语法：
- GET：
//1.实例化 XMLHttpRequest对象
var xhr=new XMLHttpRequest();
//2.调用open方法，设置请求方式和url
xhr.open('GET','/common/time');
//3.调用send方法，发生请求
xhr.send();
//4.请求响应过程结束，接收服务器响应的结果
xhr.οnlοad=function(){
console.log(xhr.response);
console.log(xhr.responseText);//接收文本类型结果
}
//如果有请求参数：
//请求参数拼接到url后面即可
xhr.open('GET','/common/checkUser?username=lisi');
- POST：
//1.创建xhr对象
var xhr=new XMLHttpRequest();
//2.调用open方法，设置请求方式和url
xhr.open('POST','/message/addMsg');
//3.设置请求头，固定
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//4.调用send，发送请求
xhr.send('name="张三"&content="今天真好"');//必须用字符串
//5.设置onload事件，接收服务器响应的结果
xhr.οnlοad=function(){
console.log(this.response);
}
- GET和POST区别：
GET：请求一般用于获取服务器上的资源，这种请求不会改变服务器数据POST：一般用于提交数据给服务器，这种请求有可能会改变服务器上的资源- 请求参数位置不同
- POST请求多了一行代码
onreadystatechange和readyState
浏览器问题
兼容
- onreadystatechange事件配合readyState,完成获取响应结果的任务，代替onload事件，只不过使用onreadystatechange事件需要添加判断
- onload事件属于xhr对象新增的一个属性，ie678不支持，所以采用onreadystatechange
onreadystatechange事件：- 会触发多次
- 触发时机：
- 当readyState属性值（ajax状态）发生改变（0–>1,1—>2……）的时候，会触发事件
- 接收数据量发生变化，也会触发
- readyState属性：
- 表示ajax请求到哪个阶段，表示ajax执行状态，值分别为0,1,2,3,4，共计5个值
- 0 unsent xhr未创建 未调用open()
- 1 opened open方法调用 建立连接
- 2 headers_received send()方法调用 已经获取状态行和响应头
- 3 loading 响应体下载中 并不表示完成
- 4 done 响应体下载完成 完全接收
- 表示ajax请求到哪个阶段，表示ajax执行状态，值分别为0,1,2,3,4，共计5个值
ajax核心对象属性方法事件整理
- ajax核心对象属性方法事件
- xhr
readyState： 保存对象状态 0 1 2 3 4status： 保存对象响应状态码 200 404responseText： 保存服务器程序返回数据res.send("1")表示服务器数据 (自己写的接口)
open()： 创建连接send()： 发送数据onreadystatechange：状态修改事件
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
