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:代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息
网友评论