[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()`

## :-: 純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