前端

JavaScript散乱(三、对象,BOM,DOM)

2018-06-07  本文已影响25人  强某某

js对象

let obj={};
obj.name="zeng";
obj["123"]="hehe";
console.log(obj["name"],obj["123"]);//zeng hehe
console.log(obj[name],obj["123"],obj.name);//underfined hehe zeng
说明：[]内部必须是字符串,内部可以传入字符串类型的变量更加灵活

通过该运算符可以检查一个对象中是否包含有指定的属性，返回布尔值

函数

- 直接return其实返回的是underfined
- 自执行函数

(function(){
    console.log("自执行函数")
})()
说明：匿名函数，如果外面不加()则{}会被当成代码块，全面的function无法识别。

作用域

    test();//test
    //函数式声明
   function test(){
       console.log("test");
   }
    test1();//报错
    //函数表达式
    var test1=function(){
       console.log("test");
   }

this

var name="呵呵";
function test(){
    console.log(name,this.name,this);
    //name如果函数内部不存在就会去全局找，但是this.name指向调用者
}
test();//呵呵 呵呵 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
var obj={
    show:test,
    name:"测试"
}
obj.show()//呵呵 测试 {show: ƒ, name: "测试"}

数组

arguments

DOM

DOM查询

    //页面加载完毕才执行
    window.onload = function () {
        let btn = document.getElementById("btn");
        //绑定事件
        btn.onclick = () => {
            btn.innerText = btn.className;
            btn.style.width=100+"px";
            // console.log(btn.style);//这种方式只能读取标签的内联样式
            //获取元素当前显示的样式
            //只在IE上面有效
            // console.log(btn.currentStyle)
            //其他浏览器上面getComputedStyle,是window的方法,IE9以上支持
            //参数一：要获取样式的元素
            //参数二：可以传递一个伪元素，一般都传递null
            console.log(getComputedStyle(btn,null)["width"])
        }
    }

其他相关的属性

事件对象(event)

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。event对象包含该事件的所有信息。

let d=document.querySelector("div");
d.onmousemove=(event)=>{
    console.log(event.offsetX);
}

事件冒泡

事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

事件委托

<body>
    <ul>
        <li><a href="javascript:;" class="cl">1</a></li>
        <li><a href="javascript:;" class="cl">2</a></li>
        <li><a href="javascript:;" class="cl">3</a></li>
        <li><a href="javascript:;" class="cl">4</a></li>
        <li><a href="javascript:;" class="cl">5</a></li>
        <li><a href="javascript:;" class="cl">6</a></li>
    </ul>
</body>

</html>
<script>
    let ul=document.querySelector("ul");
    ul.onclick=function(event){
        let tar=event.target;
        if(tar.className==='cl'){
            console.log(tar.innerText);
        }
    }
</script>
说明：li可能有多个，而且可能后期点击按钮添加，则这
时候，如果每隔a标签都是代码里面设置onclick明显不合理，这时候可以利用冒泡原理，在父元素上面设置监听点击事件，但是本意只是a标签能点击，可是此时li也可以点击；可以借用event.target获取当前事件的标签，然后通过类名等加以判断。

事件的传播

1.png

事件绑定

let li=document.querySelector("li");
    li.addEventListener("click",()=>{
        alert("ceshi");
    })
    li.addEventListener("click",()=>{
        alert("ceshi1");
})
参数一：事件的字符串，不要on，例如onclick只是click
参数二：回调函数
参数三：是否在捕获阶段触发事件，需要一个布尔值，默认false

说明：如果通过onclick类似方式绑定事件，只能绑定一个，最后一个生效。此时addEventListener可以多次绑定事件，而且都会执行。
补充：回调函数内部this指向调用者，即li

BOM

location.reload(true) true代表刷新之后会清空缓存，输入数据都不会存在了，默认是false，会保存

上一篇 下一篇

猜你喜欢

热点阅读