标签：function 25 张鑫 08 value let querySelector div document
实训四十七天 元素操作 BOM
1.学习内容
自定义属性
设置元素属性
<div haha="abc" id="xyz"></div>
<script>
let div = document.querySelector("div");
//获取属性值
//元素.属性名 的方式只能适用于元素原生的属性
console.log(div.getAttribute("haha"));
//设置元素的属性
div.className="mmm";
//用元素，属性名的方式行不通
div.setAttribute("class","nnn");
div.setAttribute("hehehe","hiehiehie");
//重复赋值会覆盖
div.setAttribute("hahaha","hijklmn");
//删除属性
div.removeAttribute("haha");
</script>
获取元素属性
<div haha="abc" id="xyz"></div>
<script>
let div = document.querySelector("div");
//拿到元素的所有屬性
//返回的结果是一个属性节点的映射和集合
console.log(div.attributes);
console.log(div.attributes[1]);
console.log(div.attributes[1].name);
console.log(div.attributes[1].value);
div.attributes[1].value='xxx';
</script>
定义样式
<div>112233</div>
<script>
let div = document.querySelector("div");
div.id="aaa";
div.title = "bbb";
//样式特殊 className
div.className ="fontStyle";
//行内样式
div.style="color:yellow;display:inline";
</script>
BOM
BOM:Browser Obje Model
BOM核心对象 window
回调函数
let callback = function(a){
console.log(a);
}
callback(1);
callback("hello");
callback({name:"zhangsan"});
callback([1,2,3]);
/*
test函数中，入参可以是一个函数
*/
let test = function(fun){
console.log("before");
//调用传进来的函数
fun(1000);
console.log("after");
}
let calllback = function(data){
console.log("I am calllback."+data);
}
/*
传入的参数是一个函数类型时
只需要写函数名，不需要写小括号
*/
test(calllback);
/*
回调函数，一个函数的参数是另一个函数
*/
//function fun(){}
时间计时器
<body>
<button onclick="btimer">开始</button>
<button onclick="etimer">终止</button>
<script>
/*
参数1：函数
参数2：延迟时间
*/
//5000毫秒后打印
//timer 叫一个计时器
let timer = setTimeout(function () {
document.write("<h1>5s中后可以见到我</h>")
},5000);
//清除计时函数
//参数：要清除哪一个计时器
clearTimeout(timer);
/*
定义两个按钮
点击第一个按钮，几秒钟后打印输出一句话
点击第二个按钮，终止这个操作
*/
let btimer = setTimeout(function () {
document.write("<h1>2s中后可以见到我</h>");
},2000);
//清除计时函数
//参数：要清除哪一个计时器
let etimer = clearTimeout(btimer);
</script>
</body>
周期定时器
<script>
let timer = setInterval(function () {
console.log("123");
}, 2000);
clearInterval(timer);
/*
倒计时
*/
let i = 5;
let goTime = setInterval(function () {
if (i >= 1) {
document.write(i);
i--;
}
else
document.write("go")
}, 2000)
clearInterval(timer);
</script>
浏览器
<script>
/*
浏览器自带小型数据库
浏览器自带的一个map集合，永久保存
*/
//向Storage中设置键值对
window.localStorage.setItem("name","lucy");
//从Storage中根据键获取值
console.log(localStorage.getItem("name"));
//从Storage中删除对应的键值对
localStorage.removeItem("name");
//清空Storage中所有的键值对
localStorage.clear();
/*
session:会话--一问一答
*/
sessionStorage.setItem("name","jack");
</script>
警告弹窗
<script>
//警告弹窗
alert(1);
//带有确认和取消的弹窗
//点击确定返回true，点击取消，返回false
let flag =confirm("你是小黑子吧？");
alert(flag);
//带有文本框的弹窗
let name = prompt("请输入你的名字：","例如：ikun");
alert(name);
//开发基本不用
</script>
页面跳转
<a href="demo02.html"></a>
<script>
/*
localStorage
sessionStorage
history
*/
function fun(){
//前进
history.forward();
//退退退
history.back();
//既可以前进也可以后退
//传入参数为正，前进；传入参数为负，后退
history.go();
}
</script>
<button onclick="fun()">按钮</button>
<script>
//location
function fun(){
//值是要跳转页面的路径
//可以是相对路径，也可以是绝对
location.href ="demo02.html";
//取值
alert(location.href);
}
</script>
获取浏览器参数
<script>
//navigator
//获取一些浏览器的参数
console.log(navigator.platform);
console.log(navigator.appVersion);
console.log(navigator.appName);
</script>
关闭浏览器
<button onclick="fun()">关闭</button>
<script>
function fun() {
window.close();
window.open("demo01.html");
window.print();
}
</script>
事件
创建事件
<script>
//获取指定元素
let div =document.querySelector("div");
/*
参数1：要添加的事件类型
参数2：添加事件要触发的函数
*/
div.addEventListener("click",function(){
alert("click");
});
//操作元素的属性
div.onclick=function(){
alert("onclick");
};
</script>
删除事件
<script>
let div = document.querySelector("div");
div.onclick =function(){
alert("onclick")
}
//删除事件的方式
div.onclick=null;
div.onclick=false;
div.onclick="";
let callback = function(){
console.log("callback");
}
div.addEventListener("click",callback);
div.removeEventListener("click",callback);
</script>
<form action="aaa" onsubmit="return fun()">
<input type="text" required>
<input type="submit" value="提交">
</form>
<script>
/*
onsubmit注意事项
1.onsubmit加在form表单上
2.onsubmit要有return
3.函数也要返回Boolean类型
*/
function fun(){
return true;
}
</script>
阻止事件冒泡
<script>
function fun(){
alert("111");
}
let li =document.querySelector("li");
li.addEventListener("click",function(event){
alert("222");
//阻止事件冒泡
event.stopPropagation();
})
//阻止事件冒泡
/*
1.在子元素的事件触发函数中阻止
2.借助event对象
3.调用一个方法
event必须用add添加才能使用
*/
</script>
ES6
<script>
/*
ES6语法
1.let const
2.模板字符串
3.箭头函数
4.Symbol
5.Promise 函数，处理回调地狱
*/
setInterval(() => {
setInterval(() => {
setInterval(() => {
}, 4000)
}, 3000)
}, 2000);
let a = Symbol("hello");
let b = Symbol("hello");
console.log(a == b);
let callback = (a, b) => { a };
setInterval(() => { }, 2000)
let sql = `select * from student left join teacher on st sadf
asf
dasdfa
asfa
sa
asf
asfda
ffasd fasdfsdfas
fasdfsad
false`;
</script>
案例1
<!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>
</head>
<body>
<button onclick="show()">3秒看结果</button>
<button onclick="stopShow()">不看结果</button>
<script>
let timer;
function show(){
timer=setTimeout(function(){
console.log("我就是你要看的");
},3000)
}
function stopShow(){
clearTimeout(timer);
}
</script>
</body>
</html>
案例2
<!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>
</head>
<body>
<button onclick="goTime()">倒计时</button>
<div>
</div>
<script>
function goTime(){
let div = document.querySelector("div");
let i=5;
let timer =setInterval(function(){
div.innerHTML=`<h1>${i}</h>`;
i--;
if(i<0){
// clearInterval(timer);
div.innerHTML="<h1>GO!!</h1>"
return;
}
},1000)
}
</script>
</body>
</html>
案例3——点餐系统
<!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>
</style>
</head>
<body>
<h1>欢迎来到本小店</h1>
<p>
辣子鸡----------------------￥45
<button id="but1down">-</button>
<input type="text" size="2" value="0" id="numlzj">
<button id="but1up">+</button>
<button id="but1add">添加</button>
</p>
<p>
木须柿子--------------------￥25
<button id="but2down">-</button>
<input type="text" size="2" value="0" id="nummxsz">
<button id="but2up">+</button>
<button id="but2add">添加</button>
</p>
<p>
可口可乐--------------------￥ 4
<button id="but3down">-</button>
<input type="text" size="2" value="0" id="numkl">
<button id="but3up">+</button>
<button id="but3add">添加</button>
</p>
<p>
米饭二两--------------------￥ 2
<button id="but4down">-</button>
<input type="text" size="2" value="0" id="nummf">
<button id="but4up">+</button>
<button id="but4add">添加</button>
</p>
<button id="order">查看订单</button>
<button id="empty">清空订单</button>
<button id="check">结账</button>
<script>
let laziji = "";
let n1 = document.querySelector("#numlzj");
let p1 = document.querySelector("#numlzj").value;
let but1down = document.querySelector("#but1down");
let but1up = document.querySelector("#but1up");
let but1add = document.querySelector("#but1add");
but1down.onclick = function () {
let n1 = document.querySelector("#numlzj");
let p1 = document.querySelector("#numlzj").value;
if(p1 != 0){
p1--;
laziji = "辣子鸡----------------------￥45*" + p1;
n1.value = p1;
}
}
but1up.onclick = function () {
let n1 = document.querySelector("#numlzj");
let p1 = document.querySelector("#numlzj").value;
p1++;
laziji = "辣子鸡----------------------￥45*" + p1;
n1.value = p1;
}
but1add.onclick = function () {
let p1= document.querySelector("#numlzj").value;
laziji = "辣子鸡----------------------￥45*" + p1;
n1.value = p1;
}
let muxushizi = "";
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#numlzj").value;
let but2down = document.querySelector("#but2down");
let but2up = document.querySelector("#but2up");
let but2add = document.querySelector("#but2add");
but2down.onclick = function () {
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#nummxsz").value;
if(p2 != 0){
p2--;
muxushizi = "木须柿子----------------------￥25*" + p2;
n2.value = p2;
}
}
but2up.onclick = function () {
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#nummxsz").value;
p2++;
muxushizi = "木须柿子----------------------￥25*" + p2;
n2.value = p2;
}
but2add.onclick = function () {
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#nummxsz").value;
muxushizi = "木须柿子----------------------￥25*" + p2;
n2.value = p2;
}
let kele = "";
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
let but3down = document.querySelector("#but3down");
let but3up = document.querySelector("#but3up");
let but3add = document.querySelector("#but3add");
but3down.onclick = function () {
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
if(p3 != 0){
p3--;
kele = "可口可乐--------------------￥ 4*" + p3;
n3.value = p3;
}
}
but3up.onclick = function () {
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
p3++;
kele = "可口可乐--------------------￥ 4*" + p3;
n3.value = p3;
}
but3add.onclick = function () {
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
kele = "可口可乐--------------------￥ 4*" + p3;
n3.value = p3;
}
let mifan = "";
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
let but4down = document.querySelector("#but4down");
let but4up = document.querySelector("#but4up");
let but4add = document.querySelector("#but4add");
but4down.onclick = function () {
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
if(p4 != 0){
p4--;
mifan = "米饭二两----------------------￥2*" + p4;
n4.value = p4;
}
}
but4up.onclick = function () {
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
p4++;
mifan = "米饭二两----------------------￥2*" + p4;
n4.value = p4;
}
but4add.onclick = function () {
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
mifan = "米饭二两----------------------￥2*" + p4;
n4.value = p4;
}
order.onclick = function () {
let n1 = document.querySelector("#numlzj");
let n2 = document.querySelector("#nummxsz");
let n3 = document.querySelector("#numkl");
let n4 = document.querySelector("#nummf");
let p1 = document.querySelector("#numlzj").value;
let p2 = document.querySelector("#nummxsz").value;
let p3 = document.querySelector("#numkl").value;
let p4 = document.querySelector("#nummf").value;
alert(laziji + "\n" + muxushizi + "\n" + kele + "\n" + mifan + "\n" + "总价：" + (45 * p1 + 25 * p2 + 4 * p3 + 2 * p4));
}
empty.onclick = function () {
let n1 = document.querySelector("#numlzj");
let n2 = document.querySelector("#nummxsz");
let n3 = document.querySelector("#numkl");
let n4 = document.querySelector("#nummf");
laziji = "";
muxushizi = "";
kele = "";
mifan = "";
n1.value = 0;
n2.value = 0;
n3.value = 0;
n4.value = 0;
}
check.onclick = function () {
let n1 = document.querySelector("#numlzj");
let n2 = document.querySelector("#nummxsz");
let n3 = document.querySelector("#numkl");
let n4 = document.querySelector("#nummf");
let p1 = document.querySelector("#numlzj").value;
let p2 = document.querySelector("#nummxsz").value;
let p3 = document.querySelector("#numkl").value;
let p4 = document.querySelector("#nummf").value;
let flag = confirm("共消费" + (45 * p1 + 25 * p2 + 4 * p3 + 2 * p4) + "是否结账？");
if (flag == true) {
laziji = "";
muxushizi = "";
kele = "";
mifan = "";
n1.value = 0;
n2.value = 0;
n3.value = 0;
n4.value = 0;
alert("消费成功");
}
}
</script>
</body>
</html>
标签：function,25,张鑫,08,value,let,querySelector,div,document 来源： https://www.cnblogs.com/zxscj/p/16631327.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。