css選擇器分為哪兩類(lèi)，強(qiáng)大利用JS應(yīng)用的Javascript網(wǎng)格插件有哪些呢？

工具類(lèi)

方便操作對(duì)象，數(shù)組等的工具庫(kù)

underscore.js

lo-dash 與underscore.js的api基本一致。與underscore比其優(yōu)勢(shì)是，效率高；可自定義構(gòu)建

Sugar 在原生對(duì)象上增加一些工具方法

functional.js 提夠了一些Curry的支持

Watch.js 監(jiān)視對(duì)象或?qū)傩缘淖兓?/p>

bacon.js 函數(shù)式編程，cool

streamjs 用流的方式來(lái)對(duì)數(shù)組，對(duì)象進(jìn)行系列操作

異步流程控制

eventproxy 樸靈出品

Arbiter.js 詳細(xì)

發(fā)布訂閱

q Promise風(fēng)格的

Async.js

mock

Mock.js 生成隨機(jī)數(shù)據(jù)和mock Ajax 請(qǐng)求

jQuery-mockjax mock ajax請(qǐng)求

時(shí)間庫(kù)

moment

datejs

瀏覽器探測(cè)

Bowser 探測(cè)具體瀏覽器和版本

ua-parser-js 探測(cè)具體瀏覽器和版本，操作系統(tǒng)，設(shè)備類(lèi)型等

調(diào)試

console-polyfill 能放心的使用 console.log()之類(lèi)的console方法

log 讓控制臺(tái)輸出的log有樣式

Konsole.js 在頁(yè)面的一個(gè)元素里輸出log信息 詳細(xì)

uri.js uri操作

cookie 增刪改cookie的工具庫(kù)

director 前端路由庫(kù) 詳細(xì)

BigDecimal.js 提高精度的數(shù)字操作

JSDoc 根據(jù)javascript文件中注釋的信息，生成API文檔 詳細(xì)

hotkeys 鍵盤(pán)事件的封裝

MD5 用 MD5 的方式加密文件的庫(kù)

瀏覽器增強(qiáng)類(lèi)

讓一些舊瀏覽器變牛逼的庫(kù)

Selectivizr 讓IE 6-8一些的css3選擇器

ieBetter 讓ie6-8有高級(jí)瀏覽器的特性

ExplorerCanvas 讓IE8-的瀏覽器支持canvas

CSS3 Pie 讓IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js時(shí)，box-radious的元素有背景色時(shí)，不顯示背景色。。。

formFive 讓舊的瀏覽器支持HTML5表單的一些特性，如 placeholder,autofocus

https://github.com/anselmh/object-fit 讓瀏覽器支持object-fit這css規(guī)則

HTML5 Cross Browser Polyfills 一堆Polyfills

flexibility 讓舊的 IE 也支持 Flexbox

選擇器增強(qiáng)

Lining.js 讓瀏覽器實(shí)現(xiàn)類(lèi)似::nth-line(), ::nth-last-line()的效果

未歸類(lèi)

prefixfree 用了它，寫(xiě)css時(shí)，就不需要加瀏覽器的前綴了

表單類(lèi)

jquery-file-upload 上傳文件組件 詳細(xì)

zTree 文件樹(shù)形視圖控件

Treed 樹(shù)編輯器。感覺(jué)展示的感覺(jué)很像思維導(dǎo)圖

FileAPI 對(duì)文件選擇框內(nèi)的文件的一些處理

表單驗(yàn)證

.Validate 詳細(xì)

jquery-Validation-Engine

表單元素美化

uniform 提供對(duì)下拉框，單，復(fù)選框，按鈕等表單元素的美化

select2 多選下拉框

selectivity 和unfirom比較類(lèi)似

DropKick 下拉框，單，多選。外觀比uniform好

switchery ios7風(fēng)格的開(kāi)關(guān)組件

nouislider 用滾動(dòng)條來(lái)設(shè)置/控制（音量等）

range.css 美化input[type=range]元素的外觀

圖片類(lèi)

holderjs 生成占位圖片

lazyload

imagesLoaded 選取的圖片都加載好后執(zhí)行調(diào)回

CSSgram 用CSS3的Filter實(shí)現(xiàn)Instagram濾鏡的庫(kù)

圖標(biāo)類(lèi)

Icon Font匯總

SVG做的圖標(biāo)

svgicons

iconic

HYBICON 帶交互效果。如 hover, click

HTML字符實(shí)體圖標(biāo)

http://www.amp-what.com/

transformicons 圖標(biāo)點(diǎn)擊時(shí)，會(huì)有一些變換效果。如，加號(hào)變成叉號(hào)

css3patterns css3 做的可平鋪紋理。瀏覽器兼容性不好。

瀏覽圖片

fancybox 彈出查看圖片，視屏等等 demo

yoxview 彈出查看圖片，圖片尺寸縮放很自然

圖片墻

wookmark

UI 框架

WeUI 由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開(kāi)發(fā)量身設(shè)計(jì)。

Framework7

UI 組件類(lèi)

拖拽

dragula 支持Draggable，Dropable和Sortable。感覺(jué)比jqueryUI的輕量級(jí)，好用的樣子

angular-dragula dragular 官方的 angular 版本

數(shù)據(jù)可視化(圖表)

Echarts 百度出品

highcharts 功能強(qiáng)大。是收費(fèi)的。

Plottable.JS 基于D3的一個(gè)圖表庫(kù)

flot 文檔不給力

chartJs 中文文檔 demo很漂亮，很清晰。比較輕量級(jí)。

ichartJs 中國(guó)的一個(gè)家伙搞的，感覺(jué)還不錯(cuò)。

時(shí)間選取組件

foundation-datepicker

DatePicker 一個(gè)簡(jiǎn)單的日歷 詳細(xì)

full calendar 支持脫放的方式來(lái)改變待辦事宜的時(shí)間

Simple Events Calendar 外觀很喜歡。收費(fèi) 5$

jQuery ui datepicker 經(jīng)典，不是很好看

pickadate 輕量級(jí)，手機(jī)友好的，漂亮。但貌似只能在彈出層中顯示，而沒(méi)有下拉這種方式顯示。

zebra-datepicker 可配置性很強(qiáng)。但貌似只能在彈出在右上方。。。

bootstrap-datepicker bootstrap風(fēng)格。

dateRangePicker 選取時(shí)間段。bootstrap風(fēng)格。該組件依賴(lài)Twitter Bootstrap, Moment.js和jQuery.

自定義滾動(dòng)條

perfect scrollbar 輕量級(jí)的滾動(dòng)條。外觀與mac上chrome的滾動(dòng)條一樣。

iscroll 在移動(dòng)設(shè)備上用不錯(cuò)

加載(Loding)效果

CSS Spinners CSS做的

Loaders.css CSS做的

表格組件

jsGrid Data Grid。 詳細(xì)

backgrid 基于Backbone.js的DataGrid

excellentexport 把表格的內(nèi)容生成excel。兼容 Firefox, Chrome, IE6+

datatables 表格可交互（對(duì)內(nèi)容進(jìn)行排序，刪除等）

handsontable 生成Excel外觀的數(shù)據(jù)

JSpreadsheets 表格數(shù)據(jù)的組件庫(kù)

選取顏色

Spectrum

分享到SNS

JiaThis 生成分享代碼。

編輯器

ace 代碼編輯器，可以用來(lái)做demo演示

ckeditor

ueditor 百度做的

tinymce 對(duì)html內(nèi)容進(jìn)行實(shí)時(shí)的編輯

summernote 在移動(dòng)設(shè)備上用不錯(cuò)

通知組件

notie.js

HTML5播放器

jwplayer 被大量網(wǎng)站使用

html5media 簡(jiǎn)單的h5player，輕量級(jí)

jplayer 功能強(qiáng)太，可換膚

展示

Impress.js 各種旋轉(zhuǎn)，和奇特的體驗(yàn)

fullPage 全屏顯示。用滾輪來(lái)翻頁(yè) 詳細(xì)

zepto.fullpage 專(zhuān)注于移動(dòng)端的fullPage.js，依賴(lài)Zepto

pagePiling 和fullPage類(lèi)似

turn.js 做一本書(shū)，帶漂亮的翻頁(yè)的效果

幻燈

slidesjs 挺好用的，只是那幻燈導(dǎo)航的CSS都要自己寫(xiě)，呵呵 詳細(xì)

iSlider 無(wú)任何插件依賴(lài)的手機(jī)平臺(tái)javascript滑動(dòng)組件 詳細(xì)

bgstretcher 全屏幻燈，會(huì)隨著頁(yè)面大小的變化而變化。

Swiper 開(kāi)源、免費(fèi)、強(qiáng)大的移動(dòng)端觸摸滑動(dòng)插件 Swiper中文網(wǎng)

coin-slider 兼容IE6。蠻好的~。不過(guò)其切換方式是一塊塊的。不能配置切換方式。。。

wowslider 幻燈切換時(shí)各種很炫的效果。收費(fèi)。

cycle2 普通的幻燈，竟然不支持垂直滾動(dòng)。。。

jcarousel 普通的幻燈，不兼容IE6

reveal 3d滾動(dòng)。做ppt相當(dāng)不錯(cuò)

nodePPT 國(guó)人做的，做ppt也相當(dāng)不錯(cuò)。有些方面比 reveal做的還好。但生成導(dǎo)出的html有些問(wèn)題

roundabout 3d切換，看的后面圖片的邊

彈出框

Magnific-Popup 兼容PC，Mobile。還不錯(cuò)，有5k+的star

layer 國(guó)人開(kāi)發(fā)的，兼容ie6+。不喜歡其調(diào)用方式。

動(dòng)畫(huà)效果

mixitup 用漂亮的動(dòng)畫(huà)效果來(lái)完成排序和篩選

jQuery.Marquee 跑馬燈效果

quickflip 卡片翻轉(zhuǎn)效果

卡片翻轉(zhuǎn)效果2 兼容性可以。寫(xiě)的比較簡(jiǎn)單：1，只支持x方向翻轉(zhuǎn) 2,類(lèi)名都是規(guī)定好的 3，只能被調(diào)用一次。 需要改寫(xiě)一下。我的改進(jìn)版見(jiàn)這里

TheaterJS 模擬兩個(gè)人在屏幕上對(duì)話

midnight.js 文字顏色隨著背景變，屌炸了

color-animation jquery的顏色漸變動(dòng)畫(huà)插件。jquery的動(dòng)畫(huà)不支持顏色值的變化。改庫(kù)提供了這個(gè)支持。

transit 對(duì)元素進(jìn)行css的變換

tagcanvas 3D標(biāo)簽云效果 詳細(xì)

iconate 圖片切換動(dòng)畫(huà)

Snap.js 左/右側(cè)導(dǎo)航的出現(xiàn)效果

CSS shake 抖動(dòng)動(dòng)畫(huà)

ClickSpark.js 點(diǎn)擊后的一些酷炫的效果

視覺(jué)差插件

scrollorama 比較簡(jiǎn)單

superscrollorama 能做的效果更多，但要用第三方Tween的庫(kù)，使用起來(lái)比較復(fù)雜。

scrolldeck

flash

swfobj 能夠自動(dòng)檢測(cè)PC、Mac機(jī)器上各種主流瀏覽器對(duì)Flash插件的支持情況。它使得插入Flash媒體資源盡量簡(jiǎn)捷、安全。而且它是非常符合搜索引擎優(yōu)化的原則的。此外，它能夠避免您的HTML、XHTML中出現(xiàn)object、embed等非標(biāo)準(zhǔn)標(biāo)簽，從而符合更加標(biāo)準(zhǔn)。 詳細(xì)

抽獎(jiǎng)

wScratchPad 刮刮卡刮獎(jiǎng)效果

jqueryrotate 旋轉(zhuǎn)插件。可以用來(lái)做轉(zhuǎn)盤(pán)抽獎(jiǎng)效果

用戶(hù)體驗(yàn)增強(qiáng)類(lèi)

Intro.js 用來(lái)介紹網(wǎng)站的功能很不錯(cuò)。也可以做新手引導(dǎo)。

blockUI Lolding組件。

simple-hint 提示信息。用css做的。兼容性IE 9+。

dotdotdot 文字溢出時(shí)，添加在文字末尾加省略號(hào)

jQuery-menu-aim 二級(jí)菜單的切換如Amazon主頁(yè)上一樣迅速

AnythingZoomer 放大鏡功能

美化/高亮語(yǔ)法代碼

google-code-prettify

DlHighlight 僅支持JavaScript、CSS、XML、HTML 這4語(yǔ)法高亮

please 按要求隨機(jī)舒服的顏色

Awesomplete 輸入的智能提示，自動(dòng)補(bǔ)全

proTip 提示。感覺(jué)比 Bootstrap 的 tip 好

Hammerjs 手勢(shì)庫(kù)。封裝了 Swipe, Tap, Pinch, Pan等手勢(shì)

動(dòng)畫(huà)

velocity 提高Jquery動(dòng)畫(huà)的性能。以及顏色動(dòng)畫(huà)之類(lèi)的新特性。

SVG

Snap.svg 操作 SVG 的 JS 庫(kù)。號(hào)稱(chēng) SVG 的 jQuery。demo

walkway 以動(dòng)畫(huà)的方式，漸漸地畫(huà)出 SVG 的路徑。

測(cè)試

Mocha

Chai

Should

Snoion

DeviceMock.js mock 設(shè)備。

其他類(lèi)

ZeroClipboard 將內(nèi)容復(fù)制到剪切板兼容主流瀏覽器的解決方案 詳細(xì)

html2canvas html轉(zhuǎn)化成canvas，可以用來(lái)做截圖。詳細(xì)

Ink 響應(yīng)式html郵件框架

性能測(cè)試

抓取，解析RSS內(nèi)容（不能跨域，所以后臺(tái)要做代理，所謂的解析Rss其實(shí)就是解析xml）

jFeed

jRss 簡(jiǎn)單版的jFeed

scriptcam 與攝像頭交互

cylon.js 機(jī)器人框架，支持35個(gè)平臺(tái)

Masonry 一個(gè)瀑布流框架

devices.css 移動(dòng)設(shè)備邊框的外觀。做原型的時(shí)候用不錯(cuò)。

Bootstrap相關(guān)類(lèi)

Bootbox.js 對(duì)bootstrap的彈出框做的一些封裝

免費(fèi)皮膚

AdminLTE

JS Plugins倉(cāng)庫(kù)

jQuery Cards 高質(zhì)量的 jQuery 插件網(wǎng)站

jster

node modules

npmrank Sort npm packages by page rank

YOU MIGHT NOT NEED JQUERY PLUGINS 不依賴(lài) jQuery 的 js 插件。

awesome-nodejs

Libraries.io 各種語(yǔ)言的庫(kù)

OniUI 去哪兒網(wǎng)做的一套基于Avalon的框架

常用的移動(dòng)端框架

zepto.js

語(yǔ)法與jquery幾乎一樣，會(huì)jquery基本會(huì)zepto~

最新版本已經(jīng)更新到1.16

iscroll.js

解決頁(yè)面不支持彈性滾動(dòng)，不支持fixed引起的問(wèn)題~

實(shí)現(xiàn)下拉刷新，滑屏，縮放等功能~

最新版本已經(jīng)更新到5.0

underscore.js

筆者沒(méi)用過(guò)，不過(guò)聽(tīng)說(shuō)好用，推薦給大家~

該庫(kù)提供了一整套函數(shù)式編程的實(shí)用功能，但是沒(méi)有擴(kuò)展任何JavaScript內(nèi)置對(duì)象。

最新版本已經(jīng)更新到1.8.2

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁(yè)面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移動(dòng)中，并非所有的語(yǔ)法都全兼容，效果良好~

ps中如何使用選擇主體—選擇并遮住來(lái)?yè)笀D？

1、在電腦端打開(kāi)ps css軟件，然后選擇一張圖片放到PS中。

2、選擇選框工具，在上方的屬性欄中出現(xiàn)選擇并遮住的屬性進(jìn)行設(shè)置。

3、進(jìn)入到摳圖屬性欄，視圖模式相當(dāng)于圖層蒙版的顯示顏色，進(jìn)行操作。

4、打開(kāi)視圖主面板后，選擇模式選項(xiàng)，進(jìn)行操作，如圖所示。

5、接著選擇圖層蒙版的顏色，如圖所示。

6、然后接下來(lái)就是調(diào)節(jié)，左側(cè)第一個(gè)是快速選擇工具，第二個(gè)是邊緣調(diào)整，使用快速選擇工具的添加減少功能來(lái)?yè)笀D。

7、在蒙版上要顯示的內(nèi)容區(qū)是白色，黑色是不要的區(qū)域，用畫(huà)筆在細(xì)微調(diào)整邊緣處即可。

css中h1是什么選擇器？

.h1是類(lèi)選擇器

#h1是id選擇器

h1是標(biāo)簽選擇器

DW怎么設(shè)置超鏈接復(fù)合CSS樣式？

1.打開(kāi)文檔,然后打開(kāi)“CSS樣式”面板。

2.在“CSS樣式”面板中,點(diǎn)擊右下角的“新建 CSS 規(guī)則”按鈕,打開(kāi)“新建 CSS 規(guī)則”對(duì)話框, 在“選擇器類(lèi)型”中選擇“復(fù)合內(nèi)容(基于選擇的內(nèi)容)”項(xiàng)。 在“選擇器名稱(chēng)”中點(diǎn)擊右邊的下拉箭頭,我們可以看到: a:link:未訪問(wèn)的超鏈接。 a:visited:已經(jīng)訪問(wèn)過(guò)的超鏈接。 a:hover:鼠標(biāo)指針移動(dòng)到上面時(shí)的超鏈接。 a:active:正在訪問(wèn)的超鏈接。

3.在“選擇器名稱(chēng)”中選擇“a:link”項(xiàng),然后點(diǎn)擊“確定”按鈕,打開(kāi)“CSS 規(guī)則定義”對(duì)話框。

4.在“CSS 規(guī)則定義”對(duì)話框中,在“分類(lèi)”下拉框中選擇“類(lèi)型”,然后在右邊“類(lèi)型”部分設(shè)置鏈接字體的顏色、大小和修飾等。