ES6/CSS3/JS/JQuery学习笔记

这篇文章上次修改于 704 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

ES6基础写法

~~不一定是ES6才有的~~

箭头函数:let func = () => {主体}

匿名函数:(() => {}),一定要拿括号包裹,否则会 Uncaught SyntaxError: Unexpected token '('

赋值1:let {a, b, c} = {a : 1, b : 2, c : 3};(对于非对象等效2)
赋值2:let [x, y, z] = [true, 'USAO', false];
if条件式: if(true) func;(执行函数等其他操作均可)

其他重要的东西

"use strict";:写在script第一行,开启严格模式

Date.parse(new Date())/1000:获取客户端当前时间戳

let date = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, " ").replace(/\.[\d]{3}Z/, "");:类似于PHPdate('Y-m-d H:i:s')

`:字符串模板,EL表达式?字符串内可用函数/变量

Symbol():生成唯一值,给常量可以避免被修改

严格模式:

变量必须声明再使用

函数参数不能使用同名属性

不可修改只读属性,如length

不可删除不可删除属性,如delete arr.length;

变量不能删除

ES6

1.完整的fetch:

POST:
let headersObj = new Headers({
'Content-type': 'application/x-www-form-urlencoded'
});
fetch(request, {
method : 'POST', 
body : '参数部分和GET一样,用=&,不然服务器收不到', 

headers : headersObj
}).then((response) => response.json()).then((data) => {
console.log
}).catch(console.error);

GET:
fetch('https://v1.hitokoto.cn?c=k')
    .then(response => response.json())
    .then(data => {
        console.log
    })
    .catch(console.error);

包含了五大主体和异常输出,一次完整的请求示例.

CSS

选择器

document.querySelectorAll("p.example")[0]:选择p标签中class为example的第一个元素

document.querySelectorAll("a[target]"):选择a标签且有target属性的所有元素

document.querySelectorAll("div > p"):选择父元素为div的p元素

document.querySelectorAll("h2, div, span"):选择这些元素

伪类&伪元素

element:hover:当鼠标移动到element时触发

element:focus:焦点触发

p:first-child:第一个p元素才生效

element:lang:我看不懂,但我大受震撼.jpg

p:first-letter:设置首字母样式

body:before:在元素前插入内容,常用

a:after:也常用

JS

算数/比较/赋值运算符

运算符在不同语言中基本是通用的,但也不完全通用.

+ : 数字相加,非 PHP 还可用于字符串相加

- : 相减,同样可用于字符串,但一般不会这样用

* : 相乘(str*int 字符串重复)

/ : 相除

% : 取余

// : Python除法取整

^异或

~取反码

\>> : 向右位移

\<< : 向左位移

\>>> : 带符号右移(目前只发现 JS 支持)

! : 将值转换成 Boolean 型后取非

& : 位运算与,判断奇偶性方便

| : 或(两边都判断,类似 &),若为 float 返回 int

== : 逻辑判断

=== : 全等(同类型)

!== : 不全等(!= 本质也是使用这种方法比较)

&&与运算(a&b=b,没事别用&)

|| : 当a为true直接停下,否则继续判断b

** : 次方

值得一提的是 ?? 的用法.从左到右返回第一个不为空的值,我用 JavaScript 测试实例如下:

false??true
>>>false
0??true
>>>0
''??true
>>>''
null??true
>>>true
undefined??true
>>>true

发现不管是布尔值false还是整形0空字符串''都不为空,而null和undefined则表示真空.

因为前三个属性虽然在逻辑判断时会被当做False,但他们都是经过赋值的,而后两个则是真的没赋值过,也就是为空.

匹配元素

a = document.querySelectorAll(element):匹配所有符合的元素,并返回list

document.querySelector(element):匹配第一个符合的元素,若匹配失败返回null

a.style.backgroundColor='#ee0000';改变上面匹配到的a的样式

事件绑定

id.onmousemove=function():为id为x的元素绑定一个事件,如果绑定多个,只有最后一个生效

document.getElementById().addEventListener('click', function()):也是绑定,可以绑定多个函数

JS基础

concat():连接两个....值?

arr.splice():创建新的空数组并返回

arr.splice(x):从下标x开始删除到结尾,并返回被删除的值为新数组

arr.slice(x,y):截取下标x到y的元素为一个新数组(复制)

arr.join(','):使用,把数组拼接成字符串

str.spilt(','):根据,将字符串分割为数组

str.padStart(8,'*'):类似于Python{:*<8}

~~时间戳,最好用的时间表达方式!!!~~

new Date().getTime():获取客户端时间戳(没什么用,还是得看服务器时间)

let date = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, " ").replace(/\.[\d]{3}Z/, "");:获取正常格式的时间显示(鬼知道这是什么东西,还有正则)

动态加载JS

'use strict';
console.group('%c批量删除', 'color:#009a61; font-size: 36px; font-weight: 400');

var s = document.createElement('script');
s.setAttribute(
  'src',
  'https://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js'
);
s.onload = function(){}

JQuery

选择器

$('div'):选取所有div元素
$('div.box'):选取class为box的div元素
$('div#user'):选取id为user的div元素

操作样式

$(xxx).css(属性名,属性值)

Canvas

感觉这个还是挺复杂的,单独拎出来罢.(其实是我不知道该放CSS还是JS)

主要用于2D绘图,3D用的是我不会的技术了.比如OpenGL和Three.js

基本方法

let ctx=document.querySelector('#').getContext("2d");
ctx.beginPath();
ctx.moveTo(x,y);// 设置起点

ctx.lineTo(x,y);// 画线

ctx.closePath();// 闭合路径

ctx.stroke();// 通过线条绘制轮廓

ctx.fill();// 填充区域内容(会自动闭合路径)

高级点的

translate(x,y):(相对当前原点)移动原点

rotate(Math.PI):绕原点旋转

scale(x,y):缩放,1为不变

transform():二维矩阵~~Tips:珍惜生命,远离矩阵~~

save():保存当前配置,入栈

restore():加载配置,出栈

ctx.fillStyle=rgba():设置填充颜色

ctx.strokeStyle='#EE0000':线条颜色

ctx.lineCaps=butt/round/square:线条结尾样式

ctx.lineJoin=round/bevel/miter:同一path内线条拼接处样式

其他懒得写的:虚线,加载图片,图层合并,切片

这是我画的唱片,是不是有点像哈哈

2021-12-12T14:44:16.png
TO BE CONTINUED...

酢豚的家