0
点赞
收藏
分享

微信扫一扫

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

RockYoungTalk 2021-09-27 阅读 84

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.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获取当前事件的标签,然后通过类名等加以判断。

事件的传播

  • 捕获阶段
  • 目标阶段
  • 冒泡阶段

事件绑定

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:代表浏览器的地址栏,可以获取地址栏信息,或者操作浏览器跳转页面
  • History:代表浏览器历史纪录,可以操作历史纪录,由于隐私原因,该对象不能获取具体的历史记录,只能操作浏览器前后翻页
  • Screen:代表用户的屏幕信息,通过该对象可以获取到用户的显示器的相关信息
举报

相关推荐

0 条评论