一 控制class选择器
<style>
.c1
{400px;height:400px;border-radius: 400px;}
.bg_red
{background: red;}
.bg_green
{background: green;}
</style>
<body>
<button>点击</button>
<div id="box" class="c1 bg_red bg_green"></div>
<script>
var div = document.getElementById("box")
console.log(div)
// 以数组形式,获取该节点元素所有的class样式
console.log(div.classList)
// remove 移除bg_green类选择器
div.classList.remove("bg_green")
// add 添加bg_green类选择器
div.classList.add("bg_green")
// 判断是否包含某个类选择器
console.log(div.classList.contains("bg_green"))
btn = document.querySelector("button")
btn.onclick = function(){
// 有这样class选择器就删除,没有就添加.有则删无则加;
div.classList.toggle("bg_green")
}
</script>
</body>
二.onmouseover/onmouseout移入移出事件
<style>
*
{margin:0px;padding:0px;}
#box
{100px;height:100px;background: red;position:absolute;left:0px;}
</style>
<body>
<!-- https://www.w3school.com.cn/jsref/dom_obj_event.asp 事件手册-->
<!-- 事件静态绑定 -->
<button onclick="func()">点击</button>
<div id="box" ></div>
<script>
var box = document.querySelector("#box")
function func(){
var left = parseInt(window.getComputedStyle(box).left)
console.log(left , typeof(left))
id = setInterval(function(){
left += 1
box.style.left = `${left}px`;
},50)
}
// 事件动态绑定
// onmouseover 鼠标移到某元素之上触发事件
box.onmouseover = function(){
clearInterval(id)
}
// onmouseout 鼠标从某元素移开触发事件
box.onmouseout = function(){
func()
}
</script>
</body>
三 遮罩层/模态框效果
<style>
#box
{
100%;height:100%;
background-color: black;
position:fixed;top:0px;
/* 设置透明度 */
opacity: 0.7;
display: none;
}
#content
{
border:solid 1px red;
300px;
height:300px;
background-color: cornflowerblue;
margin:15% auto ;
}
#close
{cursor: pointer;}
</style>
<body>
<button id="login">点我</button>
<div id="box">
<div id="content">
<div id="close">x</div>
<img src="./quanquan.gif" alt="" width=100 >
</div>
</div>
<script>
var btn = document.querySelector("#login")
var box = document.querySelector("#box")
var close = document.querySelector("#close")
btn.onclick = function(){
box.style.display = "block"
}
close.onclick = function(){
box.style.display = "none"
}
</script>
</body>
四.onfocus/onblur聚焦事件
<body>
<input type="text" value="请输入内容" class="ceshi" >
<script>
var input = document.querySelector(".ceshi")
console.log(input)
// onfocus元素获得焦点触发事件
input.onfocus = function(){
console.log(1)
input.value = ""
}
// onblur元素失去焦点触发事件
input.onblur = function(){
if(!input.value){
input.value = "请输入内容"
}
}
</script>
</body>
五.onchange 省市区三级联动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onchange 省市区三级联动</title>
</head>
<body>
<!-- 第一个下拉框 -->
<select name="" id="d1">
<option value="" disabled selected>---请选择---</option>
</select>
<!-- 第二个下拉框 -->
<select name="" id="d2">
</select>
<script>
data = {
"河北" :["石家庄","邢台","廊坊","保定","张家口"],
"北京" :["大兴","朝阳","顺义","海淀"],
"辽宁" :["沈阳","大连","葫芦洞","锦州"],
"深圳" :["南山","福田","龙岗","光明"]
}
var d1 = document.querySelector("#d1")
var d2 = document.querySelector("#d2")
console.log(d1)
// 循环插入option 到 select下拉框中
for(var i in data){
var option = document.createElement("option")
// 在option中插入城市名 (给用户看的)
option.innerHTML = i
// 在value中插入城市名(给后台看的)
option.value = i
// 插入节点
d1.appendChild(option)
}
d1.onchange = function(){
console.log(d1.value)
var current_opt = d1.value // 北京
// 获取对应的数组
var citylist = data[current_opt]
console.log(citylist)
var string = "<option disabled selected >--请选择--</option>"
// 将标签文本直接放进去
d2.innerHTML = string;
for(var i = 0 ; i < citylist.length;i++){
console.log(i)
// citylist[i]获取区域名字
var current_city = citylist[i]
var option = document.createElement("option")
// 在option中插入城市名 (给用户看的)
option.innerHTML = current_city
// 在value中插入城市名(给后台看的)
option.value= current_city
// 插入到select下拉框中
d2.appendChild(option)
}
}
</script>
</body>
</html>
二级联动六.onload事件 与 BOM对象location
<body>
<button onclick="func1()">查看location</button>
<button onclick="func2()">跳转页面</button>
<button onclick="func3()">刷新页面</button>
<button onclick="func4()">过一秒刷新页面</button>
<script>
function func1(){
console.log(location)
/* 地址: 协议 http:// ip + 端口号 + 路径 + 参数 + 锚点 */
console.log(location.protocol) // 协议
console.log(location.hostname) // ip
console.log(location.port) // 端口
console.log(location.pathname) // 文件路径
console.log(location.hash) // 获取锚点
console.log(location.search) // 获取地址参数
console.log(location.href) // 获取完整地址
}
function func2(){
location.href = "http://www.baidu.com"
}
function func3(){
location.reload();
}
function func4(){
setTimeout(func3,1000)
}
// 每过一秒刷新一下页面
// 触发时机: 等待页面所有内容[文字,图片,连接]加载完毕之后,再去执行对应代码
window.onload = function(){
console.log(1111)
func4()
}
</script>
七.ajax js异步传输技术 ***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax js异步传输技术</title>
</head>
<body>
<input type="text" name="city" value="">
<button id="btn">查询</button>
<div id="info"></div>
<script>
var btn = document.getElementById("btn")
var city = document.querySelector("input[name=city]")
var info = document.querySelector("#info")
btn.onclick = function(){
// 获取城市名
console.log(city.value)
// 1.创建ajax请求对象
var xhr = new XMLHttpRequest()
console.log(xhr)
// 2.打开连接
/*
// open语法:
// method：请求的类型；GET 或 POST
// url：文件在服务器上的位置
// async：true（异步）或 false（同步）
*/
xhr.open("get",`http://wthrcdn.etouch.cn/weather_mini?city=${city.value}`,true) // 第三个参数可选,默认异步;
// 3.发送请求
xhr.send()
// 4.获取服务端客户端状态码
xhr.onreadystatechange = function(){
// 服务端的状态码为4, 客户端的状态码为200 ,代表数据传输完毕,得到数据了;
if(xhr.readyState == 4){
if(xhr.status == 200){
// 获取响应的数据
var data = xhr.responseText
console.log(data , typeof(data))
// 把json格式的字符串 => js对象
var res = JSON.parse(data)
console.log(res , typeof(res))
// 过滤想要的数据
data_lst = res.data.forecast
console.log(data_lst)
// 拼装数据
var content = "<table border=1 width=500>"
content += "<tr><th>日期</th><th>天气</th></tr>";
for(var i of data_lst){
content += `<tr><td>${i.date}</td><td>${i.type}</td></tr>`;
}
content += "</table>";
// 插入到div当中;
info.innerHTML = content;
}
}
}
console.log("执行结束 .... ") // ajax 是异步程序;
}
// 数据展示
// date: "22日星期五"
// fengli: "<![CDATA[1级]]>"
// fengxiang: "东北风"
// high: "高温 5℃"
// low: "低温 -7℃"
// type: "晴"
</script>
</body>
</html>
ajax