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
说明：[]内部必须是字符串,内部可以传入字符串类型的变量更加灵活

in 运算符

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

函数

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

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

作用域

全局作用域
- 变量的声明提前
- 函数的声明会被提前，所以声明式的函数可以在任地方使用
- 函数表达式，不会被提前

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

函数作用域：基本和全局作用域一致，只是在函数块内起作用

this

根据函数的调用方式不同，this会指向不同对象
以函数形式调用，永远this都是windows
以方法的形式调用时，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: "测试"}

数组

slice截取(切片)数组得到截取的数组
返回从原数组中指定开始索引(包含)到结束索引(不包含)之间的项组成的新数组,原数组木变，索引从0开始
splice剪接数组原数组变化可以实现shift前删除，pop后删除,unshift前增加,同push后增加一样的效果
sort(回调函数) 回调函数返回值大于1则元素交换位置
indexOf数组元素索引，并返回元素索引，不存在返回-1,索引从0开始
join数组转成字符串，并返回字符串，原数组不变
reverse 数组翻转，并返回翻转后的原数组，原数组翻转了
reverse 数组翻转，并返回翻转后的原数组，原数组翻转了

arguments

是一个类数组对象，可以通过索引来操作数据，也可以获取长度
所有实参都保存在arguments中
arguments有个callee属性，代表就是当前正在指向的函数对象

DOM

DOM查询

通过document对象调用

getElementById()
getElementsByTagName() 通过标签名获取一组元素节点
getElementsByName() 通过name属性获取一组元素节点对象

通过具体的元素节点调用(获取元素节点的子节点)

getElementsByTagName() 获取当前节点的指定标签名的后代节点
childNodes属性当前节点的所以子节点
firstChild属性当前节点的第一个子节点
lastChild属性当前节点的最好一个子节点

获取父节点和兄弟节点(通过具体节点调用)

parentNode属性当前节点的父节点
previousSibling属性当前节点的前一个兄弟节点
nextSibling属性当前节点的后一个兄弟节点

剩余补充

document.body 获取body标签
document.documentElement 获取html根标签
document.getElementsByClassName()
document.querySelector(选择器) 返回满足条件的第一个
document.querySelectorAll(选择器) 返回所有满足条件的

    //页面加载完毕才执行
    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"])
        }
    }

其他相关的属性

计算规则：内容区+内边距
- clientHeight 返回元素可见高度(只读)
- clientWidth 返回元素可见宽度(只读)
计算规则：内容区+内边距+边框

offsetHeight 返回元素的高度(只读)
offsetWidth 返回元素的宽度(只读)
offsetParent 获取当前元素的定位父元素(获取的是一个对象,离当前元素最近的开启了定位的祖先元素)
offsetLeft 返回元素的水平偏移位置
offsetTop 返回元素的垂直偏移位置
scrollHeight 返回元素整体高度
scrollWidth 返回元素整体宽度
scrollLeft 返回元素左边缘与滚动条之间的距离
scrollTop 返回元素上边缘与滚动条之间的距离
当scrollHeight-scrollTop=clientHeight说明垂直滚动条到底

事件对象(event)

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

event.target 表示的是事件触发的对象

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

事件冒泡

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

阻止冒泡
- event.cancleBubble=true
- event.stopPropagation()

事件委托

<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

window:代表整个浏览器的窗口，同时也是网页的全局对象
Navigator:代表当前浏览器的信息，通过该对象可以识别不同的浏览器
Location:代表浏览器的地址栏，可以获取地址栏信息，或者操作浏览器跳转页面

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

History:代表浏览器历史纪录，可以操作历史纪录，由于隐私原因，该对象不能获取具体的历史记录，只能操作浏览器前后翻页
Screen:代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息

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

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

js对象

函数

作用域

this

数组

arguments

DOM

DOM查询

其他相关的属性

事件对象(event)

事件冒泡

事件委托

事件的传播

事件绑定

BOM

推荐阅读更多精彩内容