[TOC]
## :-: 调用jquery插件
```
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
```
## :-: 特效·输入框打字爆出火花
```
<!-- js代码·打字爆出火花 -->
<script type="text/javascript" src="https://xhu5.com/content/templates/FLY/js/xg.js"></script>
<script>
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener('input', POWERMODE);
</script>
```
## :-: 使网页跳转到指定的地址
```
<script>
location.href = "你想要设置的跳转链接";
</script>
```
## :-: 其他
```
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
while (条件) { 要执行的代码块 } -- while 循环会一直执行代码块,只到指定的条件为 true。
// 字符串方法
str = "String method";
// 查找字符串中是否包含指定的子字符串。true/false
str.includes("String"); // true
// 返回某个指定的字符串值在字符串中首次出现的位置。
str.indexOf("method"); // 7
navigator.onLine -- 返回浏览器的联网状态。正常联网(在线)返回true,不正常联网(离线)返回false。
Object.keys( obj ) -- 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。
Object.keys( { aaa: 1, bbb: 2, ccc: 3 } ); // 返回:["aaa", "bbb", "ccc"]
lastIndexOf() -- 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。
['Dodo', 'Tiger', 'Penguin', 'Dodo'].lastIndexOf('Penguin') // 返回:2
object.prototype.constructor -- 返回创建实例对象的 Object构造函数 引用。
({}).constructor === Object // -- true
(123).constructor === Number // -- true
[1,2,3,5].constructor === Array // -- true
```
:-: JSON格式化输出
```
语法:JSON.stringify(value[, replacer [, space]])
value -- 将要序列化成 一个JSON 字符串的值。
replacer -- 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为null或者未提供,则对象所有的属性都会被序列化;关于该参数更详细的解释和示例,请参考使用原生的 JSON 对象一文。
space -- 指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(字符串的前十个字母),该字符串将被作为空格;如果该参数没有提供(或者为null)将没有空格。
返回值 -- 一个表示给定值的JSON字符串。
JSON.stringify({a:123,b:{abc:456},c:789},null,2)
{
"a": 123,
"b": {
"abc": 456
},
"c": 789
}
```
## :-: 获取元素的宽高 / 位置 / 绝对位置
:-: `element.getBoundingClientRect()`
![](https://img.kancloud.cn/12/1c/121c6c204b2d4d2f2c367afc5d4efba2_1037x434.png)
## :-: 纯js实现上传文件
```
function easyUpload(){
var input = document.createElement("input");
input.type = "file";
input.click();
input.onchange = function(){
var file = input.files[0];
var form = new FormData();
form.append("file", file); //第一个参数是后台读取的请求key值
form.append("fileName", file.name);
form.append("other", "666666"); //实际业务的其他请求参数
var xhr = new XMLHttpRequest();
var action = "http://localhost:8080/upload.do"; //上传服务的接口地址
xhr.open("POST", action);
xhr.send(form); //发送表单数据
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
var resultObj = JSON.parse(xhr.responseText);
//处理返回的数据......
}
}
}
}
```
- 前端工具库
- HTML
- CSS
- 实用样式
- JavaScript
- 模拟运动
- 深入数组扩展
- JavaScript_补充
- jQuery
- 自定义插件
- 网络 · 后端请求
- css3.0 - 2019-2-28
- 选择器
- 边界样式
- text 字体系列
- 盒子模型
- 动图效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 画布
- SVG - 矢量图
- 多媒体类
- H5 - 其他
- webpack - 自动化构建
- webpack - 起步
- webpack -- 环境配置
- gulp
- ES6 - 2019-4-21
- HTML5补充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 页面配置
- 组件生命周期
- 自定义组件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定义功能 - 2019-7-20
- 自定义组件 - 2019-7-22
- 脚手架的使用 - 2019-7-25
- vue - 终端常用命令
- Vue Router - 路由 (基础)
- Vue Router - 路由 (高级)
- 路由插件配置 - 2019-7-29
- 路由 - 一个实例
- VUEX_数据仓库 - 2019-8-2
- Vue CLI 项目配置 - 2019-8-5
- 单元测试 - 2019-8-6
- 挂载全局组件 - 2019-11-14
- React框架
- React基本使用
- React - 组件化 2019-8-25
- React - 组件间交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props属性校验 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能优化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模块收纳
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基础 2020-3-6
- TypeScript - 进阶 2020-3-9
- Ordinary小助手
- uni-app
- 高德地图api
- mysql
- EVENTS
- 笔记
- 关于小程序工具方法封装
- Tool/basics
- Tool/web
- parsedUrl
- request