大一/web/js

函数

$\rm Javascript$中的函数和$\rm Python$中极其相似

函数表达式

let sayHi = function() {
  alert( "Hello" );
};//可以匿名

console.log(sayHi)//打印出函数的代码

函数表达式可作为参数传递(称为回调函数)

rest参数(形式为’…变量名’)，rest参数只能作为最后一个参数，相当于*args

箭头函数

let func = function(arg1, arg2, ..., argN) {
  return expression;
};
//等价于
let func = (arg1, arg2, ..., argN) => expression;
//若无参数()=>

特性

或运算

寻找第一个真值

result = value1 || value2 || value3;

若value1，value2都为null则返回value3(非空)

与运算

寻找第一个假值

// 如果第一个操作数是真值，
// 与运算返回第二个操作数：
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// 如果第一个操作数是假值，
// 与运算将直接返回它。第二个操作数会被忽略
alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0

…扩展运算符

相当于python的解包*

模板字符串

反引号``

除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式

正则表达式

let re = new RegExp('ab+c');

// 等价于
let re = /ab+c/;

DOM

文档对象模型，每个 HTML 标签都是一个对象

从而有利于js对HTML元素进行修改

window.onload与$(document).ready()

一个是需要网页全部加载完(包括图片)

第二个只要DOM树加载完就行

Event

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

事件监听

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

<div id="div_1">
<div id="div_2">
click here
</div>
</div>

document.getElementById("div_2").addEventListener("click",(event)=>{
    tar=event.target
    tar.style.background="red"

点div_2时

document.getElementById("div_1").addEventListener("click",(event)=>{
    tar=event.target
    tar.style.background="red"

点哪个哪个变红

document.getElementById("div_2").addEventListener("click",(event)=>{
    tar=event.currentTarget
    tar.style.background="red"

始终都是大的都变红

数据传输

跨源读取阻止 (CORB) 是一种浏览器功能，旨在防止攻击者通过欺骗用户的方式获取敏感信息。 它通过阻止浏览器向具有不同域的服务器发送请求，并将其响应内容作为 text/html 解析来实现。

例如，假设你有一个页面，其中包含一个带有恶意内容的 iframe。 如果你的浏览器没有 CORB 功能，则可能会被攻击者欺骗，将恶意信息发送到服务器，而不知道这是在发生什么。 但是，如果你的浏览器具有 CORB 功能，则浏览器会阻止请求，并告诉你发生了什么。

• GET – 从指定的资源请求数据。
• POST – 向指定的资源提交要被处理的数据。

get 可以直接从地址栏提交

post需要用到相关插件

获取坐标

 var rect=element.getBoundingClientRect()
 var x=rect.left//相对于窗口来说
 
window.scrollY滚动了多少
var width = window.innerWidth;
var height = window.innerHeight;
获取当前窗口的长宽
$(ele)[0].offsetHeight
获取高