前端JavaScript学习

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>

3. <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方式添加事件才可以使用