JavaScript最后
元素的属性
获取元素的属性
所有的HTML元素，我们可以根据具体需求，
自定义添加属性<div haha="abc" id="xyz" name="123"></div>
获取这个属性的值
为什么name拿不到，id能拿到
元素.属性名的方式只适用于元素原生的属性
方法 getAttribute("属性名")
设置元素的属性
div.className="mmm";//设置class属性的值
div.setAttribute("class","nnn");
设置其他的属性和值
div.setAttribute("haha","hijklmn");
删除属性
div.removeAttribute("haha");
拿到元素的所有的属性
返回的结果是一个属性节点的映射和集合
<div haha="abc" id="xyz" class="nnn"></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";
// 行内css样式
div.style = "color:yellow;display:inline";
</script>
BOM
BOM：Browser Object Model
BOM核心对象window
navigator：
history：
screen：
location：
回调函数
ES6语法
普通函数中可以传入许多类型的值
<script>
let callback = function (a) {
console.log(a);
}
callback(1);
callback("hello");
callback({name:"zhangsan"});
callback([1,2,3]);
</script>
test函数中，入参可以是一个函数
<script>
let test = function(fun){
console.log("before");
// 调用了传进来的函数
fun(1000);
console.log("after");
}
let callback = function(data) {
console.log("I am callback，" + data);
}
</script>
传入的参数是一个函数类型时，只需要写函数名，不需要写()小括号
回调函数，一个函数的参数是另一个函数
JS数据类型，number,string,boolean,object,array,null,undefined,function
延迟
setTimeout（）
参数1：函数
参数2：延迟时间
<script>
let timer = setTimeout(function(){
document.write("<h1>5秒钟后可以见到我</h1>")
},5000);
</script>
清除计时函数clearTimeout();
参数：要清除哪一个计时器： clearTimeout(timer);
setInterval
周期性定时器，每隔多少秒走一次
<script>
let timer = setInterval(function() {
console.log("123");
},2000);
clearInterval(timer);
</script>
Storage
浏览器自带了一个小型的数据库
浏览器自带的一个map集合，永久保存
向Storage中设置键值对
window.localStorage.setItem("name","lucy");
window.localStorage.setItem("age",25);
从Storage中根据建获取值
console.log(localStorage.getItem("name"));
从Storage中删除对应的键值对
localStorage.removeItem("name");
清空Storage所有的键值对
localStorage.clear();
按钮跳转
<button onclick="fun()">按钮</button>
<input type="text">
<script>
function fun() {
// 值是要跳转页面的路径
// 可以是相对路径，也可以是绝对路径，还可以是http地址
// location.href = "demo02.html";
// location.href = "http://www.baidu.com";
// 取值
// alert(location.href);
// 刷新页面
location.reload();
}
</script>
获取浏览器的参数
console.log(navigator.platform);
console.log(navigator.appVersion);
console.log(navigator.appName);
关闭浏览器
<button onclick="fun()">关闭</button>
<script>
function fun() {
// window.close();
// window.open("demo01.html");
window.print();
}
</script>
事件
元素添加事件
方法：1.在元素内加事件
<div onclick="fun()"></div>
<script>
// 获取指定的元素
let div = document.querySelector("div");
/*
参数1：要添加的事件类型
参数2：添加的事件要触发的函数
传说中，这种添加事件的方式有兼容性问题。
*/
div.addEventListener("click",function(){
alert("click");
});
</script>
-
<script>
操作元素的属性
div.onclick = function() {
alert("onclick");
}
</script>
元素删除事件
方式一：
<script>
let div = document.querySelector("div");//获取元素
// 删除事件的方式一
div.onclick = null;
div.onclick = false;
div.onclick = "";
</script>
方式二：
div.removeEventListener("click",callback);
表单设置能否提交
<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;//true可以提交 false 不可提交
}
</script>
冒泡事件
<ul onclick="fun()">
<li>哈哈哈</li>
</ul>
<script>
/*如果ul和li都有自己的单击事件，点击li就会执行li和ul的单击事件，这就是冒泡事件*/
function fun() {
alert("111");
}
let li = document.querySelector("li");
li.addEventListener("click",function(event){
alert("222");
// 阻止事件冒泡
event.stopPropagation();
})
</script>
阻止冒泡事件
阻止事件冒泡
1.在子元素的事件触发函数中阻止
2.借助event对象
3.调用一个方法
event对象必须通过addEventListener方式添加事件才可以使用
标签：function,25,console,log,JavaScript,let,div,孙乃宇,函数 From： https://www.cnblogs.com/sunnaiyu/p/16625674.html