日推薦的GitHub項目是AG Grid,它是一個功能齊全且高度可定制的JavaScript數(shù)據(jù)網(wǎng)格。AG Grid提供了出色的性能,不需要第三方依賴,并且可以與所有主要的JavaScript框架流暢地集成。
該項目已經(jīng)收獲了8.6k的Star。
項目地址:https://github.com/ag-grid/ag-grid#readme
下圖為啟用多個過濾器和分組情況下的網(wǎng)格外觀。
特性功能
AG Grid可以提供任何網(wǎng)格都具備的標準功能,如下所示。
除此之外,AG Grid還能提供一些特有功能,如下所示。
開始上手
安裝依賴
$ npm install --save ag-grid-community
添加一個占位符到HTML
<div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-alpine"></div>
導(dǎo)入網(wǎng)格和風格
import { Grid } from 'ag-grid-community';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
設(shè)置配置
var gridOptions={
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
};
初始化網(wǎng)格
var eGridDiv=document.querySelector('#myGrid');
new Grid(eGridDiv, this.gridOptions);
更多細節(jié)請參照原項目。
裝對象
我們知道,基本類型值不是對象,因而從邏輯上講它們不應(yīng)該有方法。但是為了便于操作基本類型值,JavaScript提供了3個特殊的引用類型:Boolean、Number和String。說其特殊,是因為每當讀取一個基本類型值的時候,后臺就會創(chuàng)建一個對應(yīng)的包裝對象,從而讓我們能夠調(diào)用一些方法來操作這些數(shù)據(jù)。
例子:
console.log("love".slice(1)); //輸出:ove
對象與包裝對象的主要區(qū)別就是生存期。后臺自動創(chuàng)建的包裝對象,只存在于一行代碼的執(zhí)行瞬間,然后立即被銷毀。因此我們不能為包裝對象添加屬性和方法。
例子:
var str="love"; str.name="me"; console.log(str.name); //輸出:undefined
*我們也可以顯式地調(diào)用 String 構(gòu)造函數(shù)來創(chuàng)建字符串對象(Boolean 和Number 也可以),但基本用不到。
例子:
var str=new String("love"); console.log(str); //輸出:love
字符串的屬性
length 屬性
字符串的每個實例都有一個length屬性,表示字符串中包含多少個字符。
例子:
console.log("love".length); //輸出:4 console.log("媽媽".length); //輸出:2 console.log("m e".length); //輸出:3
字符串的方法
訪問單個字符的方法
charAt()和charCodeAt() 方法
charAt()方法接受一個參數(shù),即基于0的字符位置,返回給定位置的那個字符。charCodeAt() 方法返回字符編碼。
例子:
console.log("love".charAt(1)); //輸出:o
訪問個別字符更為常用的是使用方括號加數(shù)字索引的方式。
例子:
console.log("love" [1]); //輸出:o
取得字符位置的方法
indexOf()和lastIndexOf() 方法
這兩個方法都是從一個字符串中搜索給定的子字符串,然后返回子字符串的位置(如果沒有找到該子字符串,則返回-1)。這兩個方法的區(qū)別在于:indexOf()方法從字符串的開頭向后搜索子字符串,而lastInddexOf()方法是從字符串的末尾向前搜索子字符串。這兩個方法都可以接收可選的第二個參數(shù),表示從字符串中的哪個位置開始搜索。
例子:
console.log("love".indexOf("o")); //輸出:1 console.log("love".indexOf("a")); //輸出:-1 console.log("love".indexOf("o", 2)); //輸出:-1
includes() 方法
這個方法接受兩個參數(shù),第一個參數(shù)指定要搜索的文本;第二個參數(shù)指定開始搜索的位置的索引值。如果在字符串中檢測到指定的文本則返回true。
例子:
console.log("love me".includes("me")); //輸出:true console.log("love me".includes(" ")); //輸出:true console.log("love me".includes("o", 2)); //輸出:false
startsWith()和 endsWith() 方法
這兩個方法都接受兩個參數(shù),一個參數(shù)指定要搜索的文本;第二個參數(shù)指定開始搜索的位置的索引值。其中,startsWith() 方法會從字符串起始位置開始匹配,如果檢測到指定文本則返回true。endsWith() 方法從字符串末尾位置開始匹配,如果檢測到指定文本則返回true。如果指定了第二個參數(shù),則startsWith() 方法會從這個索引值的位置開始匹配。endsWith() 方法從字符串長度減去這個索引值的位置開始匹配。
例子:
console.log("love me!".startsWith("love")); //輸出:true console.log("love me!".endsWith("!")); //輸出:true console.log("love me!".startsWith("o", 2)); //輸出:false console.log("love me!".endsWith("o", 2)); //輸出:true
復(fù)制子字符并創(chuàng)建新字符串的方法
concat() 方法
concat() 方法用于將一個或多個字符串拼接起來,返回拼接得到的新字符串。
例子:
console.log("love ".concat("me", "!")); //輸出:love me!
拼接字符串使用更多的是加號操作符(+)。
例子:
console.log("love " + "me" + "!"); //輸出:love me!
substring() 方法
這個方法會返回被操作字符串的一個子字符串,接受的兩個參數(shù)分別指定子字符串的開始位置和結(jié)束位置(不包括結(jié)束位置的字符)。如果沒有傳遞第二個參數(shù),則將字符串的長度作為結(jié)束位置。當傳入的參數(shù)是負值時,substring()方法會把所有負值參數(shù)都轉(zhuǎn)換為0。
例子:
console.log("love me".substring(0)); //輸出:love me console.log("love me".substring(0, 4)); //輸出:love console.log("love me".substring(-1)); //輸出:love me
substr() 方法
這個方法會返回被操作字符串的一個子字符串,接受的兩個參數(shù)分別指定子字符串的開始位置和返回的字符個數(shù)。如果沒有傳遞第二個參數(shù),則將字符串的長度作為結(jié)束位置。當傳入的參數(shù)是負值時,substr()方法將負的第一個參數(shù)加上字符串的長度,而將負的第二個參數(shù)轉(zhuǎn)換為0。
例子:
console.log("love me".substr(0)); //輸出:love me console.log("love me".substr(0, 1)); //輸出:l console.log("love me".substr(-1)); //輸出:e
slice() 方法
這個方法會返回被操作字符串的一個子字符串,接受的兩個參數(shù)分別指定子字符串的開始位置和結(jié)束位置(不包括結(jié)束位置的字符)。如果沒有傳遞第二個參數(shù),則將字符串的長度作為結(jié)束位置。當傳入的參數(shù)是負值時,slice()方法會將傳入的負值與字符串的長度相加。
例子:
console.log("love me".slice(0)); //輸出:love me console.log("love me".slice(0, 4)); //輸出:love console.log("love me".slice(-2)); //輸出:me
repeat() 方法
這個方法接受一個number類型的參數(shù),表示該字符串的重復(fù)次數(shù),返回當前字符串重復(fù)一定次數(shù)后的新字符串。
例子:
console.log("0".repeat(2).concat("7")); //輸出:007
操作字符串前后內(nèi)容的方法
trim()方法
這個方法刪除字符串前后的所有空格,返回沒有前后空格的新字符串。
例子:
console.log(" love ".trim()); //輸出:love
padStart()和padEnd() 方法
這兩個方法用于字符串的補全功能,一共接受兩個參數(shù),第一個參數(shù)是字符串補全生效的最大長度,第二個參數(shù)是用來補全的字符串。如果省略第二個參數(shù),默認使用空格補全長度。其中,padStart()用于頭部補全,padEnd()用于尾部補全。返回補全之后的新字符串。
例子:
console.log("7".padStart(3, "0")); //輸出:007 console.log("7".padEnd(3, "0")); //輸出:700
字符串大小寫轉(zhuǎn)換方法
toLowerCase()和toUpperCase() 方法
例子:
console.log("LOVE".toLowerCase()); //輸出:love console.log("love".toUpperCase()); //輸出:LOVE
字符串轉(zhuǎn)為數(shù)組的方法
split() 方法
這個方法用于把一個字符串分割成數(shù)組并返回該數(shù)組,接受兩個參數(shù),第一個參數(shù)可以是字符串或正則表達式,表示從該參數(shù)指定的地方分割;第二個參數(shù)用于指定數(shù)組的最大長度。
例子:
console.log("love".split()); //輸出:["love"] console.log("love".split("")); //輸出:["l", "o", "v", "e"] console.log("lo,ve".split(",")); //輸出:["lo", "ve"] console.log("l,o,v,e".split(",", 2)); //輸出:["l", "o"]
字符串用于正則匹配的方法
match() 方法
這個方法只接受一個正則表達式作為參數(shù),可在字符串內(nèi)檢索匹配的文本并返回一個數(shù)組。這個方法的行為在很大程度上依賴于正則表達式是否具有標志 g。如果正則表達式?jīng)]有標志 g,那么 match() 方法就只會在字符串中執(zhí)行一次匹配。
例子:
var str="A;B;C;" var m=str.match(/.;/g); console.log(m); //輸出:["A;", "B;", "C;"]
replace() 方法
這個方法用于在字符串中用一些字符替換另一些字符。接受兩個參數(shù):第一個參數(shù)可以是一個正則表達式或者一個字符串,表示檢索文本,第二個參數(shù)可以是一個字符串或者一個函數(shù),表示替換文本。如果第一個參數(shù)是字符串,那么只會替換第一個子字符串。要想替換所有子字符串,唯一的辦法就是提供一個正則表達式,而且要指定全局(g)。該方法返回替換后新創(chuàng)建的字符串。
例子:
var str="a_1;a_1;a_1"; var new_str_1=str.replace(1, 2); var new_str_2=str.replace(/1/g, 2); console.log(new_str_1); //輸出:a_2;a_1;a_1 console.log(new_str_2); //輸出:a_2;a_2;a_2
ES6的模板字符串
模板字符串是增強版的字符串,用反引號(`)標識。它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。
基本用法
1、用反引號替換單、雙引號。
例子:
let str=`love`; console.log(str); //輸出:love
在模板字符串中不需要轉(zhuǎn)義單、雙引號。但如果想在字符串中使用反引號,則要用反斜杠(\)進行轉(zhuǎn)義。
例子:
let str1=`I am a "fool"`; let str2=`I am a \`fool\``; console.log(str1); //輸出:I am a "fool" console.log(str2); //輸出:I am a `fool`
2、ES6之前,創(chuàng)建多行字符串我們通常會在字符串中手動加入換行符(\n):
例子:
var str=["A", "B", "C"].join("\n"); console.log(str); //輸出:A B C (多行顯示)
但在ES6的模板字符串中,如果需要在字符串中添加新的一行,只需在代碼中直接換行:
例子:
let str=`A B C`; console.log(str); //輸出: A B C (多行顯示)
*在反引號中的所有空白符都屬于字符串的一部分,所以要小心縮進。
3、在模板字符串中,可以把任何合法的JavaScript 表達式嵌入到 ${} 占位符之中。
例子:
變量和表達式
let n1=1, n2=2; let str=`${n1}+${n2}=${n1+n2}`; console.log(str); //輸出:1+2=3
函數(shù)
let fn=()=> "love"; let str=`${fn()} me`; console.log(str); //輸出:love me
模板字符串本身也是JavaScript 表達式,因此也可以在模板字符串里面嵌入另一個。
例子:
let name="Tom"; let str=`hello,${`my name is ${name}.`}`; console.log(str); //輸出:hello,my name is Tom.
Boolean、Number
包裝對象的兩外兩個 :Boolean和 Number ,由于實際應(yīng)用比較少,所以在此不再敘述
https://zhuanlan.zhihu.com/p/53949660
作者:為愛心太軟
來源:慕課網(wǎng)
ransform變形
transform在字面上就是變形、改變之意。
CSS3的transform主要包括rotate(旋轉(zhuǎn))、skew(扭曲)、scale(縮放)和translate(移動)以及matrix(矩形變形)。
rotate使用格式:(取值范圍0-360, 單位deg)
rotate(10deg)
rotate(360deg)
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
角度等同于鐘表: 12點: 0deg 3點: 90deg 6點: 180deg 9點: 270deg
【實例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>圖片轉(zhuǎn)換演示</title>
<style type="text/css">
img{
width:460px;
height:480px;
border-radius:50%;
transition:1s;
}
/*
過渡到···deg,而不是過渡···deg
*/
img:hover{
/*transform: rotate(45deg);*/
transform: rotateX(45deg);/*沿著x軸旋轉(zhuǎn)*/
transform: rotateY(45deg);/*沿著y軸旋轉(zhuǎn)*/
transform: rotateZ(45deg);/*沿著z軸旋轉(zhuǎn)*/
/*正數(shù)順時針*/
transform: rotate(45deg);/*z軸*/
/*負數(shù)逆時針*/
transform: rotate(-45deg);/*z軸*/
}
</style>
</head>
<body>
<img src="http://p1.ifengimg.com/2018_42/C03628FF6F4ED06948E0A488AD90E26E780BA05E_w981_h658.jpg"/>
</body>
</html>
transform-origin: 設(shè)置旋轉(zhuǎn)元素的基點位置
實例2: 旋轉(zhuǎn)基點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
height: 220px;
display: block;
margin: 100px auto;
transition: 1s linear;
/*我們的旋轉(zhuǎn)基點默認是中心*/
/*規(guī)定旋轉(zhuǎn)基點的
* ①方位名詞left top bottom right center
* ②px(注意坐標原點為左上角)
* ③%(參考的是寬高)*/
transform-origin: center center;
transform-origin: right top;
transform-origin: -300px 110px;
transform-origin: 150px 110px;
transform-origin: 50% 50%;
transform-origin: 100% 100%;
}
body:hover>img{
transform: rotateX(45deg);/*沿著x軸旋轉(zhuǎn)*/
transform: rotateY(45deg);/*沿著y軸旋轉(zhuǎn)*/
transform: rotateZ(45deg);/*沿著z軸旋轉(zhuǎn)*/
transform: rotate(360deg);/*z軸*/
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>
skew使用格式:(取值范圍0-180, 單位deg)
skew(10deg,10deg)
skew(180deg,180deg)
實例: 斜切
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
width: 400px;
height: 300px;
display: block;
margin: 100px auto;
transition: 1s;
}
img:hover{
transform: skewX(45deg);
transform: skewX(-45deg);
transform: skewY(45deg);
transform: skewY(-45deg);
/*skew(x軸斜切角度,y軸斜切角度)*/
/*skew(x,y)同步動畫*/
/*transform: skew(45deg,45deg);*/
/*現(xiàn)在x斜切基礎(chǔ)之上再進行y斜切*/
transform: skewX(45deg) skewY(45deg);
transform: skewY(45deg) skewX(45deg);
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>
scale使用格式:
scale(0.2)
scale(2)
scale(2,3)
scale(0.5,2)
實例: 縮放
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
width: 400px;
height: 300px;
display: block;
margin: 100px auto;
transition: 1s;
}
img:hover{
transform: scale(1);/*本身*/
transform: scale(2);/*擴大*/
transform: scale(0.5);/*擴大*/
transform: scale(-1);/*倒立*/
transform: scale(-2);/*倒立放大2倍*/
transform: scale(-0.5);/*倒立縮小1半*/
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>
translate使用格式:
translate(10px)
translate(20px,20px)
translate(-25px,-25px)
實例: 平移
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
img{
width: 400px;
display: block;
margin: 100px auto;
transition: 1s;
}
img:hover{
transform: translateX(100px);
transform: translateX(-100px);
transform: translateY(100px);
transform: translateY(-100px);
transform: translate(100px,100px);
/*%參考的是各自的寬和高*/
transform: translateX(100%);
transform: translateY(100%);
}
</style>
</head>
<body>
<img src="img/薛凱琪.jpg"/>
</body>
</html>
綜合使用: 旋轉(zhuǎn)、斜切、縮放
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 300px;
margin: 100px auto;
background-color: orange;
transition: 1s;
}
div:hover{
/*transform: rotate(360deg);
transform: skew(45deg);*/
/*綜合使用*/
transform: rotate(360deg) skew(45deg) scale(0.5);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3新增特性都不會對盒子模型產(chǎn)生影響, 盒子模型大概永遠是由width/height+padding+border+marign組成
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。