函数
$\rm Javascript$中的函数和$\rm Python$中极其相似
函数表达式
1 | let sayHi = function() { |
函数表达式可作为参数传递(称为回调函数)
rest参数(形式为’…变量名’),rest参数只能作为最后一个参数,相当于*args
箭头函数
1 | let func = function(arg1, arg2, ..., argN) { |
特性
或运算
寻找第一个真值
1 | result = value1 || value2 || value3; |
若value1,value2都为null则返回value3(非空)
与运算
寻找第一个假值
1 | // 如果第一个操作数是真值, |
…扩展运算符
相当于python的解包*
模板字符串
反引号``
除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式
正则表达式
1 | let re = new RegExp('ab+c'); |
DOM
文档对象模型,每个 HTML 标签都是一个对象
从而有利于js对HTML元素进行修改
window.onload与$(document).ready()
一个是需要网页全部加载完(包括图片)
第二个只要DOM树加载完就行
Event
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态
事件监听
1 | window.addEveantListener(eventType, (event)=>{}, false) |
事件由子元素传递到父元素的过程叫做冒泡(false)
事件由父元素传递到子元素的过程叫做事件捕获(ture)
false
表示事件冒泡,为true
表示事件捕获
事件捕获和事件触发(冒泡)是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源
属性 | 描述 |
---|---|
altKey | 返回当事件被触发时,”ALT” 是否被按下。 |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 |
ctrlKey | 返回当事件被触发时,”CTRL” 键是否被按下。 |
metaKey | 返回当事件被触发时,”meta” 键是否被按下。 |
relatedTarget | 返回与事件的目标节点相关的节点。 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 |
shiftKey | 返回当事件被触发时,”SHIFT” 键是否被按下。 |
cancelable |
返回布尔值,指示事件是否可拥可取消的默认动作。 |
---|---|
currentTarget |
返回其事件监听器触发该事件的元素。 |
eventPhase | 返回事件传播的当前阶段。 |
target |
返回触发此事件的元素(事件的目标节点)。 |
timeStamp | 返回事件生成的日期和时间。 |
type |
返回当前 Event 对象表示的事件的名称。 |
initEvent() | 初始化新创建的 Event 对象的属性。 |
preventDefault() |
通知浏览器不要执行与事件关联的默认动作。 |
stopPropagation() |
不再派发事件,阻止冒泡 |
target:触发事件的元素。
currentTarget:事件绑定的元素
比如说现在有A和B,A包含B, A监听鼠标点击事件 那么当点击B时,target是B,currentTarget是A 也就是说,currentTarget始终是监听事件者,而target是事件的真正发出者
比如有两个div
1 | <div id="div_1"> |
1 | document.getElementById("div_2").addEventListener("click",(event)=>{ |
点div_2时
1 | document.getElementById("div_1").addEventListener("click",(event)=>{ |
点哪个哪个变红
1 | document.getElementById("div_2").addEventListener("click",(event)=>{ |
始终都是大的都变红
数据传输
跨源读取阻止 (CORB) 是一种浏览器功能,旨在防止攻击者通过欺骗用户的方式获取敏感信息。 它通过阻止浏览器向具有不同域的服务器发送请求,并将其响应内容作为 text/html 解析来实现。
例如,假设你有一个页面,其中包含一个带有恶意内容的 iframe。 如果你的浏览器没有 CORB 功能,则可能会被攻击者欺骗,将恶意信息发送到服务器,而不知道这是在发生什么。 但是,如果你的浏览器具有 CORB 功能,则浏览器会阻止请求,并告诉你发生了什么。
- GET – 从指定的资源请求数据。
- POST – 向指定的资源提交要被处理的数据。
get 可以直接从地址栏提交
post需要用到相关插件
获取坐标
1 | var rect=element.getBoundingClientRect() |