首先在寫代碼之前我們需要理清如何穿插圖片呢？
可以讓所有圖片都float：left，用一個大盒子裝進所有圖片，在用一個小盒子顯示圖片，溢出圖片就hidden，之后以每張圖片的寬度來scrollLeft.
可以給每張圖片一個name/id，用循環遍歷所有圖片
可以用float:left,但是除了我要顯示的圖片外，其他圖片都hidden，之后每當我需要某張圖片時，我就把它制定到某位置
…
在這里，我將用第二種方法，因為它很直觀明了，我要哪張圖片我就調哪張圖片。
HTML部分：在div里面我裝了一張圖片，name:0, 這是為了在剛打開的時候，我們的頁面是有東西的而不是一片空白。其他部分都好理解，不理解的可在下方評論。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
<link rel="stylesheet" href="輪播圖.css" />
<script src="輪播圖.js">
</script>
</head>
<body>
<header>
<div id="oImg">
<!-- 輪流播放圖片 -->
<img id="insert" src="img/輪1.jpg" name="0"/>
</div>
<!-- 左右切換圖片 -->
<p id="left" οnclick="goBack()"></p>
<p id="right" οnclick="goForward()"></p>
<ul id="nav">
<!-- 指定某張圖片 -->
<li id="1" οnclick="move(this)">1</li>
<li id="2" οnclick="move(this)">2</li>
<li id="3" οnclick="move(this)">3</li>
<li id="4" οnclick="move(this)">4</li>
<li id="5" οnclick="move(this)">5</li>
</ul>
</header>
</body>
</html>
CSS：
* { margin: 0 auto; padding: 0 auto; } header { width: 100%; height: 680px; position: relative; } img { width: 100%; height: 680px; } #nav { position: absolute; bottom: 5px; left: 30%; } #nav li { width: 30px; height: 30px; line-height: 30px; text-align: center; background: #ccc; font-size: 24px; border-radius: 9px; color: darkslategrey; font-family: 'Times New Roman', Times, serif; margin: 0 25px; float: left; cursor: pointer; list-style: none; } #nav li:hover { background: peru; } #left { width: 25px; height: 24px; left: 0; top: 50%; cursor: pointer; position: absolute; background: url(img/fx1.png); } #right { width: 25px; height: 24px; right: 0; top: 50%; cursor: pointer; position: absolute; background: url(img/fx2.png); }之后我們來看重中之重JS部分
JavaScript:
// 五張圖片的url var oImg1 = "img/輪1.jpg"; var oImg2 = "img/輪2.jpg"; var oImg3 = "img/輪3.jpg"; var oImg4 = "img/輪4.jpg"; var oImg5 = "img/輪5.jpg"; // 把5張圖片存入一個數組 var arr = [oImg1, oImg2, oImg3, oImg4, oImg5]; window.onload = function() { //剛加載時第一張圖片1號背景顏色 document.getElementById("1").style.background = "peru"; run() } //輪播 function run() { timer = setInterval(function() { //隨機點數字時能接著變化 var pic = document.getElementById("insert").name; var shade = document.getElementById("insert"); //如果為最后一張圖片則重新循環 if (pic == 4) { pic = -1; } //點一個數字該數字背景顏色變化其余的不變 var aLi = document.getElementsByTagName("li"); for (var j = 0; j < aLi.length; j++) { aLi[j].style.backgroundColor = "#CCCCCC"; } var i = parseInt(pic); document.getElementById("insert").src = arr[i + 1]; document.getElementById("insert").name = i + 1; //數字隨圖片變化 switch (i) { case 0: var temp = '2'; break; case 1: var temp = '3'; break; case 2: var temp = '4'; break; case 3: var temp = '5'; break; case -1: var temp = '1'; break; } document.getElementById(temp).style.background = "peru" }, 5000) } //右箭頭 function goForward() { var temp = document.getElementById("insert").name; var oBox = document.getElementById("insert"); var aLi = document.getElementsByTagName("li"); // 數字跟著圖片一起變 for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } switch (temp) { case "0": var n = '2'; break; case "1": var n = '3'; break; case "2": var n = '4'; break; case "3": var n = '5'; break; case "4": var n = '1'; break; } document.getElementById(n).style.background = "peru" // 向右移動圖片 for (var j = 0; j < arr.length; j++) { if (j < 4) { if (temp == j) { oBox.src = arr[j + 1]; } } else { if (temp == 4) { oBox.src = arr[0]; } } } // 輪到最后一張圖片時返回第一張 if (temp < 4) { oBox.name = parseInt(temp) + 1; } else { oBox.name = 0; } } //左箭頭 function goBack() { var temp = document.getElementById("insert").name; var oBox = document.getElementById("insert") var aLi = document.getElementsByTagName("li"); // 圖片移動時數字也跟著變 for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } switch (temp) { case "0": var n = '5'; break; case "1": var n = '1'; break; case "2": var n = '2'; break; case "3": var n = '3'; break; case "4": var n = '4'; break; } document.getElementById(n).style.background = "peru" // 向左移動圖片 for (var j = 0; j < arr.length; j++) { if (j > 0) { if (temp == j) { oBox.src = arr[j - 1]; } } else { if (temp == 0) { oBox.src = arr[4]; } } } // 輪到第一張圖片時返回最后一張 if (temp > 0) { oBox.name = parseInt(temp) - 1; } else { oBox.name = 4; } } //指定圖片 function move(num) { var oBox = document.getElementById("insert"); var temp = document.getElementById("insert").name; var aLi = document.getElementsByTagName("li"); for (var i = 0; i < aLi.length; i++) { aLi[i].style.backgroundColor = "#CCCCCC"; } document.getElementById(num.innerHTML).style.background = "peru" switch (num.innerHTML) { case "1": oBox.src = arr[0]; oBox.name = 0; break; case "2": oBox.src = arr[1]; oBox.name = 1; break; case "3": oBox.src = arr[2]; oBox.name = 2; break; case "4": oBox.src = arr[3]; oBox.name = 3; break; case "5": oBox.src = arr[4]; oBox.name = 4; break; } }JavaScript部分我寫的很詳細，仔細看的話是可以看懂的，主要分3個重要部分：
用src來調用每張圖片并給每張圖片一個name，這樣方便后面的重復使用
為下方的數字按鈕匹配圖片，點擊1跳到第1張圖片，點擊2跳到第2張圖片…因為我把所有的圖片都存在了一個數組里，所以在匹配的時候要注意數組0位置才是數字1指定的圖片
可以來回翻頁，當到達最后一張圖片時，我再點擊下一張圖片又能返回到第一張圖片了，亦或者當我點擊到第一張圖片時，再上一張圖片又回到第五張圖片了
效果如下：
大家有問題可以在下方評論哦，看到了會及時回復噠！
————————————————
版權聲明：本文為CSDN博主「weixin_43964414」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43964414/article/details/104844041
CSS介紹
整理完了HTML的筆記，接下來就是CSS了。我們可以使用HTML構建穩定的結構基礎，而頁面的風格樣式控制則交給CSS來完成。網頁的樣式包括各種元素的顏色、大小、線形、間距等等，這對于設計或維護一個數據較多的網站來說，工作量是巨大的。好在可以使用CSS來控制這些樣式，這將大大提高網頁設計和維護的效率，并且使網頁的整體風格很容易做到統一。
CSS概述
CSS是英文Cascading Style Sheet的縮寫，中文譯為層疊樣式表，也有人翻譯為級聯樣式表，簡稱樣式表。它是一種用來定義網頁外觀樣式的技術，在網頁中引入CSS規則，可以快捷地對頁面進行布局設計，可以的控制HTML標記對象的寬度、高度、位置、字體、背景等外觀效果。
CSS是一種標識性語言，不僅可以有效的控制網頁的樣式，更重要的是實現了網頁內容與樣式的分離，并允許將CSS規則單獨存放于一個文檔中， CSS文件的擴展名為“css”。
CSS3
CSS3標準早在1995年就開始制訂， 2001年提上W3C研究議程，但是，10年來CSS3可以說是基本上沒有什么很大的變化，一直到2011年6月才發布了全新版本的CSS3，目前，許多瀏覽器都廣泛支持CSS3。
CSS3是CSS技術的一個升級版本，CSS3語言將CSS劃分為更小的模塊，在朝著模塊化的方向發展。以前的版本是一個比較龐大而且比較復雜模塊，所以，把它分解成為一個個小的簡單的模塊，同時也加入了更多新的模塊。在CSS3中有字體、顏色、布局、背景、定位、邊框、多列、動畫、用戶界面等等多個模塊。
CSS的基本用法
CSS的使用規則由兩部分組成：選擇器和一條或多條聲明。其基本基本語法如下：
選擇器{ 屬性1: 值; 屬性2: 值; …
屬性n: 值; }CSS的使用規則由兩部分組成：選擇器和一條或多條聲明。其基本基本語法如下：
選擇器{ 屬性1: 值; 屬性2: 值; …
屬性n: 值; }
CSS屬性
CSS的屬性按照相關功能進行了分組，包含了字體、文本、背景、列表、動畫等多個分組，這些屬性的具體使用方法和示例將會在后續中提到。
在HTML文檔中使用CSS的方法
根據CSS在HTML文檔中的使用方法和作用范圍不同，CSS樣式表的使用方法分為三大類：行內樣式、內部樣式表和外部樣式表，而外部樣式表又可分為鏈入外部樣式表和導入外部樣式表。本節我們從四個分類來認識在HTML中使用CSS的方法。
行內樣式
內部樣式表
外部樣式表
鏈入外部樣式表
導入外部樣式表
行內樣式
行內樣式（inline style），也叫內聯樣式，它是CSS四種使用方法中最為直接的一種，它的實現借用HTML元素的全局屬性style，把CSS代碼直接寫入其中即可。
嚴格意義上行內樣式是一種不嚴謹的使用方式，它不需要選擇器，這種方式下CSS代碼和HTML代碼混合在一起，因此不推薦使用行內樣式。行內樣式的基本語法如下：
<標記 style="屬性:值; 屬性:值; …">
當單個文檔需要特殊的樣式時，應該使用內部樣式表。內部樣式表是將樣式放在頁面的head區里，這樣定義的樣式就應用到本頁面中了，內部樣式表使用style標記進行聲明，是較為常用的一種使用方法。其基本語法如下：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
選擇器1｛屬性:值;…｝
選擇器2｛屬性:值;…｝
……
選擇器n｛屬性:值;…｝
</style>
</head>
<head>
<meta charset="utf-8" />
<title></title>
<link href="樣式表路徑" rel="stylesheet" type="text/css" />
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("樣式表路徑");
</style>
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("樣式表路徑");
</style>
</head>
記錄倉促，遺漏之處日后補充，如有錯誤或不足之處，還望指正
————————————————
版權聲明：本文為CSDN博主「狗狗狗狗狗樂啊」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44122062/article/details/104848745
文章目錄
前言
一、白屏時間過長分析
二、針對性優化
針對animate.css
針對mint-ui的優化
針對圖片的優化
三、webpack打包優化與分析
webpack-bundle-analyzer打包分析
打包優化
四、優化后線上測試速度提升
五、優化總結
前言
最近在做項目時，測試提出了在App端的H5項目入口加載時間過長，白屏等待過久，需要優化的問題，于是著手開始分析：
項目技術棧：基于Vue全家桶做的一個移動端類似WebApp的項目，使用到的第三方庫有：mint-ui, echarts，momentjs。
項目痛點：白屏時間過長
一、白屏時間過長分析
通過訪問線上環境，結合Chrome devtool中Network和Performance功能可以具體分析整個白屏的耗時主要在哪一塊兒
Network耗時記錄：
Performance性能面板
通過上面兩張圖分析，從瀏覽器發起請求到解析HTML完成這一過程中：
animate.css, mini-ui.css的請求耗時最長。
圖片過大耗時。
二、針對性優化
針對animate.css
animate.css由于使用的是第三方CDN（國外服務器）所有請求時間相對較長，所以如果必須要用animate.css那么可以下載下來作為本地資源，也可以使用國內CDN，或者不用animate.css，而是針對使用到的幾個CSS動畫，直接自己造輪子
針對mint-ui的優化
由于mint-ui在原項目中使用的是全局引用的方式，這才導致打包資源過大，css單獨請求耗時過長的問題，所以主要解決方案是按需引入mint-ui，借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。
安裝babel-plugin-component， 若已安裝可忽略
修改 .babelrc (重點在plugins中)：
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
在main.js中引用使用到的插件
import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import 'mint-ui/lib/style.min.css' // 引用CSS
import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫為
* Vue.use(Button)
* Vue.use(Cell)
*/
new Vue({
el: '#app',
components: { App }
})
在使用的組件中改為按需引用組件
import Vue from 'vue'
var Popup = Vue.component('mt-popup')
var Swipe = Vue.component('mt-swipe')
var SwipeItem = Vue.component('mt-swipe-item')
export default {
name:'my-component',
components:{
Popup,
Swipe,
SwipeItem
}
}
此按需引入方案也同樣適用于其他第三方UI組件庫
圖片小圖通過webpack可以直接轉為base64，而大圖可以通過壓縮或者換格式的方式來優化，這里推薦一個好用的圖片壓縮工具，工具：tinyPNG,如下是圖片轉換前后對比
在完成了上述優化以后，下面著重關注下webpack打包后生成的文件大小，看還有沒有可以優化的余地。由于項目中已經通過路由按需加載的方式來做了功能拆分，所以通過webpack打包后生成了很多分散的js文件，如下圖：
通過上圖分析可以知道打包后有幾個文件相對較大，vendor.js都知道是第三方庫文件打包形成，之前通過mint-ui按需加載會有一定的變化，后面記錄。這里著重看另兩個帶hash的js文件，這里并看不出來它為什么這么大，所以這里需要用到webpack打包分析工具來做進一步的打包文件分析：webpack-bundle-analyzer
它的作用如下圖，即在打包后生成打包文件大小分析圖，方便我們更加直觀的看到文件大小和引用情況
npm intall -D webpack-bundle-analyzerwebpack.pro.conf.js. （這里由于只是用于生產打包分析且是通過vue-cli生成的項目框架）
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
// ...
plugins:[
new BundleAnalyzerPlugin()
]
}
運行npm run build，（webpack默認會在打包完成時生成分析圖）
版權聲明：本文為CSDN博主「Sophie_U」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Sophie_U/article/details/104840167
數據類型的轉化（JavaScript）—自動轉化和強制轉化
這一周，我來分享一下在JavaScript中的數據類型轉化。
首先我們要知道在JavaScript中的數據類型有什么？在這里我就不詳細介紹了，幫你總結好了。
1.布爾類型-----Boolean---isNaN()
用來判斷一個變量是否為非數字的類型,是數字返回false，不是數字返回true。
2.數值類型-----Number
存儲時,是按照二進制數值存儲,輸出時,默認都是按照十進制數值輸出。
在JavaScript中二進制前加0b/0B,八進制前面加0 ,十六進制前面加0x。
如果需要按照原始進制數值輸出，用格式為：
變量名稱.toString(進制) ；
注意的是：S必須大寫，將數值轉化為字符串形式輸出
如：console.log( a.toString(2) )；將a轉換成2進制的形式輸出。
3.字符串類型-----String
JavaScript可以用單引號嵌套雙引號, 或者用雙引號嵌套單引號(外雙內單,外單內雙)
字符串是由若干字符組成的,這些字符的數量就是字符串的長度。
通過字符串的length屬性可以獲取整個字符串的長度。
例子：var str = 'my name is xiaoming';
console.log(str.length);
輸出的結果是19。可以知道空格也代表一個字符。
4.undefined
表示沒有數值-----應該有數值，但是現在沒有數值
5.null
表示數值為空-----表示有數值，但是數值是“空”
上面就是數據類型的五種形式。那么它是如何轉化呢？聽我詳細給你講解。
在 JavaScript 程序中 , 變量中存儲的數據類型沒有限制，也就是在變量中可以存儲任何符合JavaScript語法規范的數據類型。但是在 JavaScript 程序的執行過程中,往往需要變量中存儲的數值是某種特定的數據類型,別的數據類型不行，此時就需要進行數據類型的轉化。
————————————————
版權聲明：本文為CSDN博主「什什么都繪」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39406353/article/details/104864224上面就是數據類型的五種形式。那么它是如何轉化呢？聽我詳細給你講解。
在 JavaScript 程序中 , 變量中存儲的數據類型沒有限制，也就是在變量中可以存儲任何符合JavaScript語法規范的數據類型。但是在 JavaScript 程序的執行過程中,往往需要變量中存儲的數值是某種特定的數據類型,別的數據類型不行，此時就需要進行數據類型的轉化。
JavaScript中數據類型的轉化,分為自動轉化和強制轉化：
自動轉化是計算機程序,自動完成的轉化。
強制轉化是程序員,強行完成的轉化
1.布爾類型的自動轉化：
在 執行 if 判斷時 ,其他數據類型會自動轉化為布爾類型
其他類型轉化為布爾類型的原則
0 '' undefined null NaN 這五種情況轉化為false
特別提醒 0.0 0.00000 都算是0
其他的所有都會轉化為 true
2.字符串的自動轉化：
執行字符串拼接, +號的兩側，應該都是字符串類型，會將其他數據類型轉化為字符串類型
轉化原則：
//基本數據類型 / 簡單數據類型------將數據數值直接轉化為字符串 , 然后執行拼接操作
布爾值 true ---> 字符串 'true'
布爾值 false ---> 字符串 'fasle'
undefined ---> 字符串 'undefined'
unll ---> 字符串 'null'
數值 ---> 將數值解析轉化為'對應的純數字的字符串'
// 引用數據類型 / 復雜數據類型
數組 ---> 將 [] 中的內容,轉化為字符串的形式,執行拼接操作
對象 ---> 任何對象,任何內容,都會轉化為 [object Object] 固定的內容形式,執行拼接操作
函數 ---> 將所有的程序代碼,轉化為字符串,執行拼接操作
3.數值的自動轉化：
在執行運算時，會觸發數據類型的自動轉化。
轉化原則：
布爾類型 : true ---> 1
false ---> 0
undefined : 轉化為 NaN
null : 轉化為 0
字符串 :
如果整個字符串,是純數字字符串,或者符合科學計數法 ---> 轉化為對應的數值
如果字符串內有不符合數字規范的內容 ---> 轉化為 NaN
數組,對象,函數：
如果是+加號執行的是字符串拼接效果，按照這些數據類型轉化為字符串的原則來轉化
如果是其他形式的運算 執行結果都是 NaN
4.布爾類型的強制轉化：
布爾類型的強制轉化就是使用JavaScript中定義好的 方法/函數 Boolean( 數據/變量 )
Boolean() 這個方法 不會改變 變量中存儲的原始數值
轉化原則與自動轉化原則相同
0 '' undefined null NaN --------> false
其他數據,都轉化為true
5.字符串類型的強制轉化：
方法1，變量.toString(進制類型)
將數值強制轉化為字符串,并且可以設定轉化的進制，.toString() 之前,不能直接寫數值,必須是寫成變量的形式
進制常用的數值是 2 8 16 ，可以設定的范圍是 2 - 36 進制
方法2，String( 變量 / 數據 )
將變量或者數據,轉化為字符串，原則按照自動轉化的原則來執行，不會改變變量中存儲的原始數值
但是在字符串拼接時,會將其他數據類型自動轉化為字符串
6.數字類型的強制轉化：
————————————————方法1 , Number(變量/數值)
console.log( Number(true) ); // 1
console.log( Number(false) ); // 0
console.log( Number(null) ); // 0
console.log( Number(undefined) ); // NaN
console.log( Number('100') ); // 對應的數值
console.log( Number('100.123') ); // 對應的數值
console.log( Number('2e4') ); // 對應的數值
console.log( Number('123abc') ); // NaN
console.log( Number( [1,2,3,4,5] ) ); // NaN
console.log( Number( {name:'zhangsan'} ) ); // NaN
console.log( Number( function fun(){console.log('abc')} ) ); // NaN
將其他類型強制轉化為數值類型,轉化原則與自動轉化選擇相同
方法2, parseInt(變量 / 數據) 是獲取變量或者數據的整數部分
從數據的 左側起 解析獲取 整數內容
console.log( parseInt(true) ); // 都是 NaN
console.log( parseInt(false) );
console.log( parseInt(null) );
console.log( parseInt(undefined) );
console.log( parseInt( {name:'zhangsan'} ) );
console.log( parseInt( function fun(){console.log('abc')} ) );
數組執行,是獲取 數值部分 也就是 沒有 []的部分
1,2,3,4,5 整數部分是 1 1之后是逗號 逗號不是整數,之后的部分也就不算整數
獲取第一個數值的整數部分,如果有就獲取,如果沒有,結果是NaN
console.log( parseInt( [1,2,3,4,5] ) ); // 結果是 1
console.log( parseInt( [null,2,3,4,5] ) ); // 結果是 NaN
如果是整數就直接獲取,如果是浮點數,或者科學計數法,就獲取整數部分
console.log( parseInt( 100 ) ); // 整數是直接獲取
console.log( parseInt( 0.0123 ) ); // 浮點數是獲取整數部分
console.log( parseInt( 3.123456e3 ) ); // 科學計數法是解析之后,獲取整數部分
字符串不同了
如果是純數字的字符串
console.log( parseInt( '100' ) ); // 與數字的結果相同
console.log( parseInt( '0.0123' ) ); // 與數字的結果相同
console.log( parseInt( '3.123456e3' ) ); //3
console.log( parseInt( '3abc' ) ); //3
console.log( parseInt( '3.123' ) ); //3
方法3 , parseFloat( 變量 / 數值 )
獲取浮點數部分
console.log( parseFloat(true) ); // 都是 NaN
console.log( parseFloat(false) );
console.log( parseFloat(null) );
console.log( parseFloat(undefined) );
console.log( parseFloat( {name:'zhangsan'} ) );
console.log( parseFloat( function fun(){console.log('abc')} ) );
//數值, 整數,浮點數,都會完整獲取
console.log( parseFloat(100) ); //100
console.log( parseFloat(100.1234) ); //100.1234
console.log( parseFloat(1.234567e3) ); //1234.567
// 關鍵是字符串
// 從字符串的左側起 解析 符合浮點數的部分
console.log( parseFloat( '100' ) ); // 與數字的結果相同
console.log( parseFloat( '0.0123' ) ); // 與數字的結果相同
console.log( parseFloat( '3.123456e3' ) ); // 科學技術法會解析
console.log( parseFloat( '3.1223abc' ) );
console.log( parseFloat( '3.123' ) );
好了，這就是在JavaScript中數據類型的轉化，希望可以幫助到你。
版權聲明：本文為CSDN博主「什什么都繪」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_39406353/article/details/104864224
CSS 函數大家多多少少都使用過，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。
今天小編給大家介紹幾個特殊的 css 函數。
attr() 這是一個很強的函數，他可以讓數據傳輸到你的 css 中，不需要借助其他東西。
用法：
<style>
div::before {
content : attr(data-abc);
}
</style>
<div data-abc='我是attr'></div>
calc() 用與動態計算長度值
給大家展示快速讓子盒子在父盒子中居中的另一種方法：
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.child {
position: absolute;
/ 這里的 50px 為子盒子寬（高）的一半 /
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="father">
<div class="child"></div>
</div>
cubic-bezier() 定義了一個貝塞爾曲線(Cubic Bezier)。在這我就不多描述了，關于貝塞爾曲線，感興趣的同學可以自行去了解。
var() 用于插入自定義的 css 屬性值。
用法：和 sass，less 中定義變量的語法相似
<style>
:root {
--abc-- : red;
}
div {
width: 100px;
height: 100px;
background-color: var(--abc--);
}
</style>
<div></div>
counters() 這是一個古老但實用的屬性，用與 css 中計數
用法：
counter-reset : item 1；
給定計數器 item 的初始值1，也可用與復位。參數 ‘item’ 為計數器的名稱，后面的 ‘1’ 參數如果不寫，默認是 0。
counter-increment: item 2;
設定當一個 item 計算器發生時計數器增加的值。參數 ‘2’為每次計數增長 2。
counters(item,’-’);
寫在content中，顯示計數器的值，‘-’ 設定倆計算器拼接時中間的符號為’-‘。它還有第三個參數，是list-style-type , 與 css 屬性 list-style-type 是一模一樣的。用與設定計數器以什么形式顯示（阿拉伯數字，英文大小寫，等）
<style>
ul {
counter-reset: item 1;
}
li:before {
counter-increment: item 2;
content: counters(item, "-");
}
</style>
<ul class="test">
<li> html
<ul>
<li> css</li>
<li> js</li>
</ul>
</li>
<li> Node</li>
<li> ts</li>
</ul>
bootstrap-multiselect動態加載數據，首先要引用bootstrap-multiselect.css和bootstrap-multiselect.js
<select id="demo" name="demo" multiple></select>
JS代碼
$("#demo").multiselect({
// 自定義參數，按自己需求定義
nonSelectedText : '--請選擇--',
inheritClass : true,
maxHeight : 350,
includeSelectAllOption : true,
numberDisplayed : 5,
//下拉回調函數
onDropdownShow : function(event) {
$.ajax({
url : "${ctx}/xx/xx",
async : false,
type : "get",
dataType : "json",
success : function(data) {
var mark = new Array();
for (var i = 0; i < data.length; i++) {
mark.push({
value : data[i].markId,
label : data[i].markName
});
}
$("#demo").multiselect('dataprovider', mark);
}
})
},
});
獲取選中的值的集合
var selectList = $('#demo option:selected');
1
遍歷集合得到選中的value和label
for (var i = 0; i < selectList.length; i++) {
value = siteList[i].value;
label = siteList[i].label;
}
希望這篇文章可以幫助到你
一、首先找到第一次發起網絡請求的地址，將服務器返回set-cookie當全局變量存儲起來
wx.request({
......
success: function(res) {
console.log(res.header);
//set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domain=.fengkui.net
// 登錄成功，獲取第一次的sessionid,存儲起來
// 注意：Set-Cookie（開發者工具中調試全部小寫）（遠程調試和線上首字母大寫）
wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
}
})
三、后臺獲取cookie中的PHPSESSID，將PHPSESSID當作session_id使用
<?php
// 判斷$_COOKIE['PHPSESSID']是否存在，存在則作session_id使用
if ($_COOKIE['PHPSESSID']) {
session_id($_COOKIE['PHPSESSID']);
}
session_start();
echo session_id();html5的新特點
1.語法更簡單
a) 頭部聲明
<!doctype html>
b) 簡化了字符集聲明
<meta charset="utf-8">
2.語法更寬松
a) 可以省略結束符的標簽
li、dt、dd、p、optgroup、option、tr、td、th
b) 可以完全省略的標簽
html、head、body
3.標簽語義化
增加了很多標簽，在作頁面的時候更加具有語義（定義了一些原本沒有語義的div模塊為有鮮明結構的語義模塊）
a) <header>標記定義一個頁面或一個區域的頭部
b) <nav>標記定義導航鏈接
c) <article>標記定義一篇文章內容
d) <section>標記定義網頁中一塊區域
e) <aside>標記定義頁面內容部分的側邊欄
f) <footer>標記定義一個頁面或一個區域的底部
語義化標簽圖示
4.表單新增常用屬性------要求掌握
required：必填
placeholder：輸入內容提示
autofocus：自動獲取焦點-----自動幫我們將光標點進去
<form method="post" action="http://www.baidu.com">
<!-- required 必填，必須的 -->
<!-- 自動獲取焦點----自動將光標定位到表單中 -->
<input type="text" placeholder="請輸入用戶名" autofocus="autofocus" required="required" />
<input type="submit" />
</form>
5.input新增type屬性值
a) type=“email”，文本框中只能輸入email地址
b) type=“date”，日期控件
c) type=“time”
d) type=“month”
e) type=“week”
f) type=“number”，喚醒數字鍵盤
g) type=“range”，滑塊
h) type=“color”
最近在做一個手機站，要求點擊分享可以直接打開微信分享出去。而不是jiathis，share分享這種的點擊出來二維碼。在網上看了很多，都說APP能喚起微信，手機網頁實現不了。也找了很多都不能直接喚起微信。
總結出來一個可以直接喚起微信的。適應手機qq瀏覽器和uc瀏覽器。
下面上代碼，把這些直接放到要轉發的頁面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引進mshare.js
-
<button data-mshare="0">點擊彈出原生分享面板</button>
-
<button data-mshare="1">點擊觸發朋友圈分享</button>
-
<button data-mshare="2">點擊觸發發送給微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接彈出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代碼分享，把這些代碼新建一個js文件放進去，然后在頁面中引進就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ兩個主流瀏覽器
-
* 上面觸發微信分享到朋友圈或發送給朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 瀏覽器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判斷 qq 瀏覽器
-
* 然而qq瀏覽器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 瀏覽器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 獲取操作系統信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq瀏覽器下面 是否加載好了相應的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 進一步細化版本和平臺判斷
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq瀏覽器下面 根據不同版本 加載對應的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回調函數
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加載過 qq 的 bridge 腳本之后
-
* 再去初始化分享組件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC瀏覽器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 關于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享會直接使用截圖
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享類型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 瀏覽器分享函數
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 對外暴露的接口函數
-
* @method mShare
-
* @param {Object} config 配置對象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 預加載 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，這樣就可以直接喚起微信進行分享啦
jQuery超詳細總結
文章目錄
jQuery超詳細總結
一 選擇器
特殊選擇器
二 篩選器
用在 jQuery 選擇的元素后面
都是方法,對選擇出來的元素進行二次篩選
三 文本操作
總結
四 元素類名操作
五 元素屬性操作
在 H5 的標準下, 給了一個定義, 當你需要寫自定義屬性的時候，最好寫成 data-xxx="值"，當大家看到 data-xxx 的時候, 就知道這是一個自定義屬性
六 元素樣式操作
七 綁定事件
on()方法是專門用來綁定事件one() 方法是專門用來綁定一個只能執行一次的方法off() 方法是專門用來解綁一個元素的事件的trigger() 方法是專門用來觸發事件的方法hover()常用事件offset()position()scrollTop()scrollLeft()ready() 事件each() 方法jQuery 發送一個 GET 請求jQuery 發送一個 POST 請求jQuery 的 $.ajax 方法position()
postition: 定位
只讀的方法
讀取:
元素相對于定位父級的位置關系
得到的也是一個對象 { left: xxx, top: xxx }
如果你寫的是 right 或者 bottom, 會自動計算成 left 和 top 值給你
十一 獲取卷去的尺寸（頁面滾動條）
scrollTop()
原生 js 里面 document.documentElement.scrollTop
讀寫的方法
不傳遞參數的時候就是獲取卷去的高度
傳遞一個參數就是設置卷去的高度
scrollLeft()
原生 js 里面 document.documentElement.scrollLeft
讀寫的方法
不傳遞參數的時候就是獲取卷去的寬度
傳遞一個參數的時候就是設置卷去的寬度
十二 jQuery中的函數
ready() 事件
類似于 window.onload 事件,但是有所不同
window.onload 會在頁面所有資源加載行
ready() 會在頁面 html 結構加載完畢后執行
也叫做 jQuery 的入口函數
有一個簡寫的形式 $(function () {})
each() 方法
類似于 forEach(), 遍歷數組的
jQuery 的元素集合, 是一個 jQuery 數組, 不是一個數組, 不能使用 forEach()
forEach語法： forEach(function (item, index) {})
each語法：each(function (index, item) {})
比較少用到, 因為 jQuery 隱式迭代 自動遍歷
十三 jQuery中的動畫
讓元素出現不同的移動, 改變
transition -> 過渡動畫
animation -> 幀動畫
標準動畫
show() 顯示元素
語法: show(時間, 運動曲線, 運動結束的函數)
hide() 隱藏元素
語法: hide(時間, 運動曲線, 運動結束的函數)
toggle() 改變元素顯示或隱藏（如果顯示就隱藏，如果隱藏就顯示）
語法: toggle(時間, 運動曲線, 運動結束的函數)
三個方法的參數都可以選填，不需要每個都填寫
折疊動畫
slideDown() 下滑顯示
語法: slideDown(時間, 運動曲線, 運動結束的函數)
slideUp() 上滑隱藏
語法: slideUp(時間, 運動曲線, 運動結束的函數)
slideToggle() 切換滑動和隱藏
語法: slideToggle(時間, 運動曲線, 運動結束的函數)
漸隱漸顯動畫
實質是透明的opacity的變化
fadeIn() 逐漸顯示
fadeIn(時間, 運動曲線, 運動結束的函數)
fadeOut() 逐漸消失
fadeOut(時間, 運動曲線, 運動結束的函數)
fadeToggle() 切換顯示和消失
fadeToggle(時間, 運動曲線, 運動結束的函數)
以上三個方法的參數，均有默認值
fadeTo() 設置元素透明度變為你指定的數字
fadeTo(時間, 你指定的透明度, 運動曲線, 運動結束的函數)
綜合動畫
animate()
基本上大部分的 css 樣式都可以動畫
transform 不行, 顏色不行
語法: animate({}, 時間, 運動曲線, 運動結束的函數)
{ }里面就寫你要運動的 css 屬性,默認單位為px
停止動畫
讓當前的動畫結束
因為 jQuery 的動畫你一直點擊，就會一直觸發。即使不再點擊讓事件發生，還是會把沒執行完的動畫執行完畢。
你點擊 10 次, 他就會觸發 10 次, 直到 10 次全都完畢才結束
stop()
當這個函數觸發的時候, 就會讓運動立刻停下來
你運動到哪一個位置了就停止在哪一個位置
finish()
當這個函數觸發的時候, 就會讓運動立刻停下來
不管你運動到了哪一個位置, 瞬間到達運動完成位置
十四 jQuery發送ajax請求
jQuery 里面幫我們封裝好了幾個方法
專門用來發送 ajax 請求的
$.get() -> 專門用來發送 get 請求的
$.post() -> 專門用來發送 post 請求的
$.ajax() ->
發送什么請求都可以(get, post, put, delete)
并且還可以發送一個 jsonp 請求
jQuery 發送一個 GET 請求
語法: $.get(請求地址, 需要攜帶到后端的參數, 成功的回調函數, 期望后端返回的數據類型)
請求地址: 你要請求的后端接口地址(必填)
攜帶參數: 你需要給后端傳遞的參數
可以是一個固定格式的字符串 ‘key=value&key=value’
也可以是一個對象 { a: 100, b: 200 }
成功回調: 當請求成功的時候會執行的函數
期望數據類型: 就是你是不是需要 jQuery 幫你解析響應體
$.ajax({
url: '', // => 請求地址(必填)
type: '', // => 請求方式(GET, POST, ...) 默認是 GET
data: '', // => 攜帶到后端的參數
dataType: '', // => 期望后端返回的數據類型, 默認不解析
async: true, // => 是否異步, 默認是 true
success: function () {}, // => 成功的回調
error: function () {}, // => 失敗的回調
timeout: 數字, // 單位是 ms, 超時時間(超過你寫的時間沒有響應, 那么就算失敗)
cache: true, // 是否緩存, 默認是 true
context: 上下文, // 改變回調函數里面的 this 指向
...
})
$.ajax 里面失敗的回調
不光是請求失敗的時候會觸發
jQuery 認定失敗就是失敗
當 dataType 寫成 json 的時候, jQuery 會幫我們執行 JSON.parse()
當后端返回一個不是 json 格式的字符串的時候
執行 JSON.parse() 就會報錯
也會執行失敗的回調, 請求雖然成功, 但是解析失敗了, 也是失敗
JSON.parse(‘你好 世界’) -> 就會報錯了
$.ajax 里面是否緩存的問題
這個請求要不要緩存
當兩次請求地址一樣的時候, 就會緩存
如果你寫成 false, 表示不要緩存
jQuery 就會自動再你的請求后面加一個參數 =時間戳
第一次請求 ./server/get.php?=11:10:01.325的時間戳
第二次請求 ./server/get.php?_=11:10:02.326的時間戳
$.ajax 里面的回調 this 指向問題
ajax 的回調里面默認 this 指向被 jQuery 加工過的 ajax 對象
context 的值你寫的是誰, 回調函數里面的 this 就時誰
$.ajax 里面的請求方式的問題
$.ajax 這個方法里面, type 表示請求方式
jQuery 還給了我們一個參數叫做 method，也表示請求方式
當你寫請求方式的時候
可以寫成 type: ‘POST’
也可以寫成 method: ‘POST’
$.ajax 里面的接收響應的問題(2015年以后的版本才有 promise 的形式)
jQuery 默認把 ajax 封裝成了 promsie 的形式
你可以用 success 選項接收成功的回調
也可以用 .then() 的方式接收響應
jQuery 的 ajax 全局鉤子函數
鉤子: 掛在你的身上, 你的所有動作都和它有關系
這些全局函數都是掛在 ajax 身上的, 這個 ajax 的每一個動作都和全局函數有關系
全局的鉤子函數
1.ajaxStart()
會在同一個作用域下多個 ajax 的時候, 第一個 ajax 之前開始的時候觸發
如果有多個 ajax 他只觸發一次
2.ajaxSend()
每一個 ajax 再發送出去之前, 都會觸發一下
xhr.send() 之前觸發
ajaxSuccess()
每一個 ajax 再成功的時候觸發
只要有一個 ajax 成功了就會觸發
ajaxError()
每一個 ajax 再失敗的時候觸發
只要有一個 ajax 失敗了就會觸發
ajaxComplete()
每一個 ajax 完成的時候觸發
只要有一個 ajax 完成了, 不管成功還是失敗, 都會觸發
ajaxStop()
會在同一個作用域內多個 ajax 的時候, 最后一個 ajax 完成以后觸發
如果有多個 ajax 它只觸發一次
作用: 通常用來做 loading 效果
<img src="./loading.gif" alt="">
// 利用ajax鉤子函數 做一個lading效果 等待頁面
// 提前利用鉤子函數準備 loading 效果
// 每一次發送出去的時候都要顯示圖片
$(window).ajaxSend(() => {
$('img').show()
})
// 每一次完成的時候都要圖片再隱藏起來
$(window).ajaxComplete(() => {
$('img').hide()
})
// 每次點擊按鈕的時候都會發送一個 ajax 請求
$('button').click(() => {
// 發送一個 ajax 請求
$.ajax({
url: './server/get.php',
data: { a: 100, b: 200 },
dataType: 'json',
success: function (res) {
console.log('請求成功了')
console.log(res)
}
})
})
十五 jQuery 發送一個 jsonp 請求
jQuery 也提供給我們發送 jsonp 請求的方式
jsonp: 利用 script 標簽的 src 屬性來請求
返回值: 是一個字符串, 字符串里面寫了一個 函數名(后端傳遞給前端的參數)
使用 $.ajax() 這個方法
必須寫的:dataType: 'jsonp'
發送 jsonp 請求
jQuery 幫我們準備好了一個函數名, 并且以參數的形式帶到了后端
jQuery 幫我們帶過去的 callback 參數, 就是它準備好的函數名
后端就應該返回一個 jQuery 準備好的函數名()
其他參數
jsonp: '', 你帶到后端表示你函數名的那個 key, 默認值是 callback
cache: false, 當 dataType === ‘jsonp’ 的時候, 默認 cache 就是 false
// 發送一個 jsonp 請求
$.ajax({
url: '
dataType: 'jsonp', // 表示我要發送一個 jsonp 請求
jsonp: 'cb', // 表示參數里面的 cb 屬性時我準備好的函數名
cache: true, // 表示緩存本次請求
success: function (res) {
console.log(res)
}
})
// jQuery 準備好的函數名
// + jQuery34108160883644340862_1582255906750
// + 變量名包含 數字 字母 下劃線 $
// + function jQuery34108160883644340862_1582255906750() {}
十六 jQuery 的多庫并存機制
因為 jQuery 引入頁面以后, 向全局添加了兩個名字
一個叫做 $
一個叫做 jQuery
萬一有別的類庫也起名叫做 jQuery 或者$ 怎么辦
當我兩個庫都需要使用的時候
因為向全局暴露的名字一樣, 就會發生沖突了
誰的文件引再后面, 誰的名字就占主要位置了
兩個只能選擇一個使用
jQuery 提供了一個方法
我可以不占用$ 或者 jQuery 這個名字
noConflict()
語法: $.noConflict() 或者jQuery.noConflict()
當你執行了 noConflict() 以后, jQuery 就交出了$的控制權。
jQuery向全局暴露的不在有$ 這個名字了。當你執行了noConflict(true) 以后, jQuery就交出了 $ 和jQuery 的控制權。
交出去以后, 我的 jQuery 就用不了
noConflict() 的返回值: 就是一個新的控制權
你只要接收一個返回值, 你定好的變量是什么,jQuery 的控制權就是什么
// 交出 $ 的控制權
// $.noConflict()
// 交出 $ 和 jQuery 的控制權
// $.noConflict(true)
// 改變 jQuery 的控制權
var $$ = $.noConflict(true)
十七 jQuery 的插件擴展機制
jQuery 還提供給我們了一個機制, 就是你可以向 jQuery 里面擴展一些方法
兩個方法
$.extend()
擴展給 jQuery本身使用的
語法:
$.extend({ 你要擴展的方法名: function () {}, 你要擴展的方法名: function () {}, ... })
使用的時候就是 $.你擴展的方法名()
$.fn.extend() => $.extend($.fn, { 你擴展的方面名 })
擴展給 jQuery 元素集合使用的
語法 $.fn.extend({ 你要擴展的方法名: function () {}, 你要擴展的方法名: function () {}, ... })
使用的時候就是 $(選擇器).你擴展的方法名()
$('div').html()
// 1. 擴展給 jQuery 本身
// jQuery 本身沒有操作 cookie 的方法
// $.extend({
// setCookie: function (key, value, expires) {
// // 寫上設置 cookie 的方法
// if (expires) {
// var time = new Date()
// time.setTime(time.getTime() - 1000 60 60 8 + 1000 expires)
// document.cookie = ${key}=${value};expires=${time}
// } else {
// document.cookie = ${key}=${value}
// }
// },
// getCookie: function (key) {
// // ...
// }
// })
// 使用我們擴展的方法去設置 cookie
// $.setCookie('a', 100)
// $.setCookie('b', 200, 10)
// 2. 擴展給元素集合
// 擴展一個全選的方法
// 方法以執行, 就能讓 input checkbox 變成選中狀態或者不選中狀態
$.fn.extend({
selectAll: function (type = true) {
// type 就是你傳遞進來的選中或者不選中一個標志
// 你不傳遞的時候, 我默認是 true, 你傳遞了就用你傳遞的
// console.log(this) // 就是你調用的時候前面的哪個元素集合
this.each(function (index, item) {
// 讓元素集合中的每一個 input 的 checked 屬性為 true
item.checked = type
})
// return 這個元素集合, 達到一個鏈式編程的效果
return this
}
})
$('button').click(() => {
// 讓所有 input 框變成選中狀態
console.log($('input').selectAll().attr('hello', 'world'))
})
十八 jQuery 的拷貝對象問題
$.extend() 深拷貝 與 淺拷貝
傳遞一個對象的時候, 可以做到插件擴展機制
傳遞多個對象的時候, 可以將后面幾個對象的內容復制到第一個對象里面
語法:
$.extend(是否深拷貝, 對象1, 對象2, 對象3, ...)
是否深拷貝: 默認是 false, 可以不寫
從 對象2 開始, 后面所有對象的內容都會被拷貝到 對象1 里面
再拷貝的時候, 如果有重復的 key, 那么以寫在后面的為準(后來者居上)
十九 jQuery 的插件
基于 jQuery 使用的, 別人封裝好的插件
我們拿來使用就可以了, 前提就是要有 jQuery
例子 一個叫做 jquery-validate 的插件
專門用來做表單驗證的
你輸入的內容是不是符合規則
下載
引入文件
去復制粘貼
<!-- 引入文件 --> <!-- 注意: 先引入 jQuery, 后引入 jquery-validate --> <script src="./jquery/jquery.min.js"></script> <!-- jquery-validate 這個文件依賴的 jquery --> <script src="./jquery-validate/jquery.validate.min.js"></script> <!-- 引入中文信息提示包, 必須在 jquery-validate 的后面 --> <script src="./jquery-validate/localization/messages_zh.min.js"></script> <script>
// 選擇到你要驗證的表單的 form 標簽
// 執行 validate 方法
// {} 里面就寫我們的驗證規則
$('#login').validate({
// 你需要的驗證規則
rules: {
// key 就是你要驗證的哪個 input 框的 name 屬性
username: 'required', // 用戶名必填
password: { // 一個字段可以寫多個驗證方式
required: true,
minlength: 6, // 最少是六個
maxlength: 12, // 最多十二個
}
},
// 你自定義提示的文本內容
messages: {
// key 就是你驗證的哪個 input 框的 name 屬性
username: '請輸入用戶名! ^_^',
password: {
required: '請輸入密碼!',
minlength: '最少要輸入 6 個字符噢!'
}
},
// 表單的提交事件
// 這個函數會在表單驗證通過以后執行
submitHandler: function (form) {
// form 接收的就是你的 form 標簽
// console.log(form)
// console.log('表單驗證通過了, 我需要使用 ajax 去提交數據了')
// 有一個 jQuery 的方法
// serialize() 快速獲取表單輸入的數據
// $(form).serialize() 就能拿到這個 form 標簽里面的表單數據
// console.log($(form).serialize()) // username=admin&password=123456
// 發送請求到后端
$.post('./server/login.php', $(form).serialize(), res => {
console.log(res)
}, 'json')
}
})
————————————————藍藍設計的小編 http://www.syprn.cn