1.addEventListener 的第三个参数 true:捕获 由大到小
false：默认---冒泡 由小到大
阻止捕获和冒泡 e.stopPropagation() e是function的形参
2.事件委托 其中的target
<ul></ul>
<script>
let ul = document.querySelector("ul")
ul.addEventListener("click", function (e) {
// console.log(e)
e.target.style.color = "pink"
})
</script>
3.事件移除
btn.addEventListener("click", fn)
btn.removeEventListener("click", fn) 以此就可以移除上面的那个
4bom
bom:浏览器对象模型 核心就是window
全局作用域的变量和函数会默认的放到window
5.window的常见事件
load加载事件 等所有的dom加载之后执行 这样位置就不成问题了
window.addEventListener("load", function () {}）
addEventListener全部会依次执行 .onload则是相同的只执行第一个
DOMContebtLoaded:z当dom加载结束后完成（不会等待样式表、图片）
window.addEventListener("DOMContentLoaded", function () {}）
innerWidth:返回当前屏幕的尺寸
window.addEventListener("load", function () {
let div = document.querySelector("div")
window.addEventListener("resize", function () {
if (window.innerWidth <= 800) {
div.style.display = "none"
}
})
})6.js执行的机制
js单线程 同步：前一段代码执行完毕，下一段代码才能够开始
异步:做一件事情的同时去干别的事情
js的执行机制：同步任务：放到主线程进行执行，形成执行栈
异步任务：放到任务队列中 不同事件 资源加载 定时器
7.location
url 获取或者设置url 通讯协议://主机（域名）[端口号]/路径[?参数]#片段
location.href获取uel
location.search获取全部参数
location.assign("https://www.baidu.com")跳转
location.replace("https://www.baidu.com")改变
location.reload()
| location.href | 获取url |
| ocation.search("https://www.baidu.com") | 获取全部参数 |
| location.replace("https://www.baidu.com") | 改变 |
| location.assign | 跳转 |
| location.reload() | 强制刷新 |
8.navigator
console.dir(navigator.userAgent) 获取浏览器的相关信息
navigator 接口表示用户代理的状态和标识。它允许脚本查询它和注册自己进行一些活动
9.history
| history.forward() | 此异步方法转到浏览器会话历史的下一页，与用户单击浏览器 的 Forward 按钮的行为相同。等价于 history.go(1)。 |
| history.back() | 此异步方法转到浏览器会话历史的上一页，与用户单击浏览器 的 Back 按钮的行为相同。等价于 history.go(-1)。 |
10.client
element.clientWidth(不包含边框） 该属性包括内边距（padding），但不包括边框 （border）、外边距（margin）和垂直滚动条（如果在）
Top Left类似于上面
element.offsetWidth 返回一个元素的布局宽度。
11.scroll
| element.scroll() | 是用于在给定的元素中滚动到某个特定坐标的 Element 接口。 |
| element.scrollWidth | 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。 |
| element.scrollHeight | 只读属性是一个元素内容高度的度内容。量，包括由于溢出导致的视图中不可见 |
| pelementscrollTop | 属性可以获取或设置一个元素的内容垂直滚动的像素 |
12.构造函数
<body>
<script>
// 1|{}
// 2。Object
// 3、构造函数
// let name1 = {
// uname: "zhangsan",
// age: 21,
// sing: function () {
// console.log("唱歌")
// }
// }
// let name2 = {
// uname: "zhangsan",
// age: 21,
// sing: function () {
// console.log("唱歌")
// }
// }
function Person(uname, age) {
this.uname = uname
this.age = age
// this.sing = function () {
// console.log("sing~~~")
// }
}
// 原型：构造函数通过原型分配的函数能够被所有的实例化对象共享
// 每一个构造函数都存在一个属性叫做prototype，会指向另外一个对象，因此成为原型对象
// 把不变的方法，直接定义在prototype上，让所有的实例化对象共享
// Person.prototype.sing = function () {
// console.log("66667777")
// }
// Person.prototype.dance = function () {
// console.log("dance")
// }
// console.dir(Person)
// 原型覆盖：constructor会丢失，一定要手动追加
Person.prototype = {
constructor: Person,
sing: function () {
console.log("sing~~~")
},
dance: function () {
console.log("dance")
}
}
let obj1 = new Person("zhangsan", 22)
// console.log(obj1)
// obj1.sing()
// console.log("obj1的对象原型指向：")
// console.log(obj1.__proto__)
// console.log(obj1.constructor
// )
// 实例对象中，存在对象原型__proto__，指向构造函数的原型对象
console.log(obj1.__proto__)
console.log(obj1 instanceof Person)
// let obj2 = new Person("lisi", 22)
// console.log(obj2)
// obj2.sing()
// console.log(obj1.sing === obj2.sing)
let arr = new Array()
// arr.push()
console.dir(Array)
</script>
</body>
object.prototype.constructor 数据属性返回一个引用，指向创建该实例对象的构造函数。注
jkincoulijiayinwoainijin意，此属性的值是对函数本身的引用，而不是一个包含函数名称 + 的字符串。
13. 在·构造函数的继承
<body>
<script>
// function Father() {
// this.uname = "zhangsan"
// }
// function Son() {
// this.age = 21
// }
// Son.prototype = new Father()
// let son1 = new Son()
// console.log(son1.uname)
// function Father() {
// this.uname = "father"
// }
// Father.prototype.getName = function () {
// return this.name
// }
// function Son() {
// Father.call(this)
// this.type = "son"
// }
// let son = new Son()
// console.log(son)
var A = {
print: function () {
console.log('hello');
}
}
// 实例对象
var B = Object.create(A)
console.log(B)
</script>
</body>
function.prototype.call() 会以给定的 this 值和逐个提供的参数调用该函数。
14.this的指向
<script>
// 1、全局作用域中this ,指向window
window.console.log(this)
// 2、函数调用中的this
function fn() {
console.log(this)
}
window.fn()
// window.setTimeout("alert(this)", 1000)
// 3、对象中的this,默认指向对象本身
let obj = {
fn: () => {
console.log(this)
}
}
obj.fn()
// 箭头函数是没有this的概念的，父作用域
// 4、构造函数 ：指向实例化对象‘
// apply()\call()\bind()改变this的指向
const obj1 = { name: "zhangsan" }
function Person() {
// console.log(this)
console.log(this.name)
}
// Person.apply(obj1)
// Person.call(obj1)
// console.log(Person.bind(obj))
Person.bind(obj1)()
// 5、事件中的this ，指向事件源
</script>
</body>| 1、全局作用域中this ,指向window |
| 2、函数调用中的this指向window,定时器之类也是如此 |
| 3、对象中的this,默认指向对象本身 |
| 4.箭头函数是没有this的概念的，作用在父作用域 |
| 5、构造函数 ：指向实例化对象‘ |
| 6.apply()\call() 改变函数对象 bind()改变后返回一个新的值 改变this的指向 |
| 7、事件中的this ，指向事件源 |
15.正则表达式
<body>
<script>
// 1、通过构造函数创建
// let reg = new RegExp("格式字符串"，[修饰符])
let reg = new RegExp("aaa")
let str = "nanhang"
console.log(reg.test(str))
console.log(str.match(reg))
// 2、字面量
// /格式字符串/修饰符
let reg1 = /a/
console.log(str.match(reg1))
</script>
</body>
</html>修饰符可写可不写 ，console.log返回true false
16.正则格式字符串
<body>
<script>
// 普通字符
// 特殊字符
// 元字符
// .:匹配非换行符外的任意字符 \s \S \d:匹配数字 \D \w：数字、字母、下划线 \W \
let str1 = "nanhangjincheng"
console.log(str1.match(/./))
// console.log(str1.match(/\d/))
// 限定符
// *0~n
console.log(str1.match(/.*/))
// + 1~n
console.log(str1.match(/.+/))
// ？ 0~1
console.log(str1.match(/a?/))
// {n} 重复n次
console.log("aaa2119554644cdcdc".match(/\d{9}/))
// {n,} >=n
console.log("aaa21195111".match(/\d{5,}/))
// {m,n}至少出现m次，至多出现n次
console.log("aaa2119554644".match(/\d{9,12}/))
// 便边界符 ^表示开头 $表示结尾
console.log("2119554644".match(/^\d{9,}\d$/))
// 特殊的符号
// let a = "<strong>hello</strong>"
// let reg3 = /<[a-z]+>[a-z]+<\/[a-z]+>/
// console.log(a.match(reg3))
// []
console.log("2119554644".match(/[0-9a-zA-Z_]+/))
console.log("2119554644".match(/[^2]+/))
// |
console.log("2119554644".match(/(1|9)+/))
// i\g
</script>
</body>
string.prototype.match() 方法检索字符串与正则表达式进行匹配的结果 v
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
