❶ js除了有JQuery框架以外,還有哪些強大點的框架,或者比較實用的也可以。。 誰能給我介紹一下
目前來看,JS框架以及一些開發包和庫類有如下幾個,Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx
Dojo (JS library and UI component ):
Dojo是目前最為強大的j s框架,它在自己的Wiki上給自己下了一個定義,dojo是一個用javaScript編寫的開源的DHTML工具箱。dojo很想做一個「大一統」的 工具箱,不僅僅是瀏覽器層面的,野心還是很大的。Dojo包括ajax, browser, event, widget等跨瀏覽器API,包括了JS本身的語言擴展,以及各個方面的工具類庫,和比較完善的UI組件庫,也被廣泛 應用在很多項目中,他的UI組件的特點是通過給html標簽增加tag的方式進行擴展,而不是通過寫JS來生成,dojo的API模仿Java類庫的組織 方式。 用dojo寫Web OS可謂非常方便。dojo現在已經4.0了,dojo強大的地方在於界面和特效的封裝,可以讓開發者快速構建一些兼容標準的界面。
優點:庫相當完善,發展時間也比較長,功能強大,據說利用dojo的io.bind()可以實現comet,看見其功能強大非一般,得到IBM和SUN的支持
缺點:文件體積比較大,200多KB,初次下載相當慢,此外,dojo的類庫使用顯得不是那麼易用,j s語法增強方面不如prototype。
Prototype (JS OO library):
是一個非常優雅的JS庫,定義了JS的面向對象擴展,DOM操作API,事件等等,以prototype為核心,形成了一個外圍的各種各樣 的JS擴展庫,是相當有前途的JS底層框架,值得推薦,感覺也是現實中應用最廣的庫類(RoR集成的AJAX JS庫),之上還有 Scriptaculous 實現一些JS組件功能和效果。
優點:基本底層,易學易用,甚至是其他一些js特效開發包的底層,體積算是最小的了。
缺點:如果說缺點,可能就是功能是他的弱項
Scriptaculous (JS UI component based on prototype):
Scriptaculous是基於prototype.js框架的JS效果。包含了6個js文件,不同的文件對應不同的js效果,所以說,如果底層用 prototype的話,做js效果用Scriptaculous那是再合適不過的了,連大名鼎鼎的digg都在用他,可見不一般
優點:基於prototype是最大的優點,由於使用prototype的廣泛性,無疑對用戶書錦上添花,並且在《ajax in action》中就拿Scriptaculous來講述js效果
缺點:剛剛興起,需要時間的磨練
yui-ext (JS UI component):
基於Yahoo UI的擴展包yui-ext是具有CS風格的Web用戶界面組件 能實現復雜的Layout布局,界面效果可以和backbase媲美,而且使用純javascript代碼開發。真正的可編輯的表格Edit Grid,支持XML和Json數據類型,直接可以遷入grid。許多組件實現了對數據源的支持,例如動態的布局,可編輯的表格控制項,動態載入的Tree 控制項、動態拖拽效果等等。1.0 beta版開始同Jquery合作,推出基於jQuery的Ext 1.0,提供了更多有趣的功能。
優點:結構化,類似於java的結構,清晰明了,底層用到了Jquery的一些函數,使整合使用有了選擇,最重要的一點是界面太讓讓人震撼了。
缺點:太過復雜,整個界面的構造過於復雜。
Jquery :
jQuery是一款同prototype一樣優秀js開發庫類,特別是對css和XPath的支持,使我們寫js變得更加方便!如果你不是個js高手又想寫出優 秀的js效果,jQuery可以幫你達到目的!並且簡介的語法和高的效率一直是jQuery追求的目標,
優點:注重簡介和高效,js效果有yui-ext的選擇,因為yui-ext 重用了很多jQuery的函數
缺點:據說太嫩,歷史不悠久。
Mochikit :
MochiKit自稱為一個輕量級的js框架。MochiKit 主要受到 Python 和 Python 標准庫提供的很多便利之處的啟發,另外還緩解了瀏覽器版本之間的不一致性。其中的 MochiKit.DOM 尤其方便,能夠以比原始 JavaScript 更友好的方式處理 DOM 對象。MochiKit.DOM 大部分都是針對 XHTML 文檔定製的,如果與 MochiKit 和 Ajax 結合在一起,使用 XHTML 包裝的微格式尤其方便。Mochikit可以直接對字元串或者數字格式化輸出,比較實用和方便。它還有自己的 js 代碼解釋器
優點:MochiKit.DOM這部分很實用,簡介也是很突出的
缺點:輕量級的缺點
mootools :
MooTools是一個簡潔,模塊化,面向對象的JavaScript框架。它能夠幫助你更快,更簡單地編寫可擴展和兼容性強的JavaScript代碼。Mootools跟prototypejs相類似,語法幾乎一樣。但它提供的功能要比prototypejs多,而且更強大。比如增加了動畫特效、拖放操作等等。
優點:可以定製自己所需要的功能,可以說是prototypejs的增強版。
缺點:不大不小,具體應用具體分析
moo.fx :
moo.fx是一個超級輕量級的javascript特效庫(7k),能夠與prototype.js或mootools框架一起使用。它非常快、易於使用、跨瀏覽器、符合標准,提供控制和修改任何HTML元素的CSS屬性,包括顏色。它內置檢查器能夠防止用戶通過多次或瘋狂點擊來破壞效果。moo.fx整體採用模塊化設計,所以可以在它的基礎上開發你需要的任何特效。
優點:小塊頭有大能耐
缺點:這么小了,已經不錯了
❷ highlight.js
一行代碼就能讓我的網站支持代碼高亮的工具庫,也支持在 Vue 中使用,強烈推薦給大家。
highlight.js 是一款使用 javascript 開發代碼高亮工具庫,能夠讓網頁上的代碼顯示接近我們使用的代碼編輯器的高亮樣式,從而看起來更舒服,增強閱讀體驗。
常來我網站的小夥伴都知道,我的文章有一個欄目是「前端」,主要推薦一下實用的前端開源項目或者組件庫,寫技術類文章免不了要貼代碼,我的網站基於 wordpress 搭建,此前我一直為找一款代碼高亮插件煩惱,但大部分 wordpress 的代碼高亮插件實在太臃腫,出來的樣式又不美觀。大多時候是截圖 VsCode 的代碼界面,甚至還用過 codepng 這個工具把代碼變成圖片貼在文章中,但這樣做是美觀了,但也存在2個問題:
最終還是找到了 highlight.js,完美解決了上面兩個問題,而且配置簡單,演示漂亮,定製化簡單。不禁感嘆:用純前端的方式解決,才能精準控制,實現想要的效果。
下面以我的網站為例,展示將 highlight.js 用在我們的項目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安裝,我的網站基於 wordpress 開發,主題是自己寫的,最簡單的方式就是在文章詳情頁引入 highlight.js 和主題樣式。
雖然 highlight.js 支持幾百種開發語言,但為了將文件體積控制到最小,我們可以點擊「get version」按鈕進入下載頁,通過勾選我們需要的開發語言,來構建最輕量的庫。
下載解壓後得到的 highlight.min.js 就是我們需要引入的 js 文件,主題樣式都在 style 文件夾里,我選擇了一個比較喜歡的 monokai-sublime 主題,只需要一個 css 文件,然後初始化:
就是這么簡單,highlight.js 會自動將文章中的
點擊查看本次分享的網址以及代碼高亮效果
highlight.js - 讓網頁上的代碼高亮美化的免費開源工具庫 那些免費的磚
❸ jquery.js和jquery.min.js的區別介紹
jquery.js和jquery.min.js的區別介紹:
1、區別:
jquery.js是完整的未壓縮的jQuery庫,文件比較大,一般用於閱讀學習源碼或修改源碼,一般不用於線上項目。
jquery.min.js是由完整版的jQuery庫經過壓縮得來,壓縮後功能與未壓縮的完全一樣,只是將其中的空白字元、注釋、空行等與邏輯無關的內容刪除,並進行一些優化。這個版本一般用於網站引用使用,減小文件體積,降低網站流量,提升訪問速度等。
2、介紹:
jQuery 是繼prototype 之後又一個優秀的輕量級JavaScript 框架。其宗旨是「Write Less, Do
More」,寫更少的代碼,做更多的事情。 它是一個快速和簡潔的JavaScript 庫,可以簡化HTML
文檔元素的遍歷,事件處理,動畫和Ajax 交互以實現快速Web 開發,它被設計用來改變編寫JavaScript 腳本的方式。
jQuery是免費、開源的,使用MIT許可協議。jQuery的語法設計可以使開發更加便捷,例如操作文檔對象、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能。除此以外,jQuery提供API讓開發者編寫插件。其模塊化的使用方式使開發者可以很輕松的開發出功能強大的靜態或動態網頁。
❹ jquery-1.4.2.min.js文件有什麼用途裡面的代碼都有什麼用途
不管是1.4.2還是jQuery以後的版本,都是用封裝的功能庫,方便開發者使用。下面是就jQuery的具體作用:
1 、取得頁面中的元素。如果不使用JavaScript 庫,遍歷DOM (Document Object Model ,文檔對象模型)樹,以及查找HTML 文檔結構中某個特殊的部分,必須編寫很多行代碼。jQuery 為准確地獲取需要檢查或操縱的文檔元素,提供了可靠而富有效率的選擇符機制。
2 、修改頁面的外觀。CSS 雖然為影響文檔呈現的方式提供了一種強大的手段,但當所有瀏覽器不完全支持相同的標准時,單純使用CSS 就會顯得力不從心。 jQuery 可以彌補這一不足,它提供了跨瀏覽器的標准解決方案。而且,即使在頁面已經呈現之後,jQuery 仍然能夠改變文檔中某個部分的類或者個別的 樣式屬性。
3 、改變頁面的內容。jQuery 能夠影響的范圍並不局限於簡單的外觀變化,使用少量的代碼,jQuery 就能改變文檔的內容。可以改變文本、插入或翻轉圖像、對列表重新排序,甚至,對HTML 文檔的整個結構都能重寫和擴充——所有這些只需一個簡單易用的API 。
4 、響應用戶的頁面操作。即使是最強大和最精心設計的行為,如果我們無法控制它何時發生,那它也毫無用處。jQuery 提供了截取形形色色的頁面事件 (比如用戶單擊一個鏈接)的適當方式,而不需要使用事件處理程序搞亂HTML代碼。此外,它的事件處理API 也消除了經常困擾Web 開發人員的瀏覽器不一 致性。
5 、為頁面添加動態效果。為了實現某種互動式行為,設計者也必須向用戶提供視覺上的反饋。jQuery 中內置的一批淡入、擦除之類的效果,以及製作新效果的工具包,為此提供了便利。
6 、無需刷新頁面即可從伺服器獲取信息。這種編程模式就是眾所周知的AJAX (Asynchronous JavaScript and XML ,非同步JavaScript 和XML ),它能輔助Web 開發人員創建出反應靈敏、功能豐富的網站。jQuery 通過消除這一過程中的瀏覽器特定的復 雜性,使開發人員得以專注於伺服器端的功能設計。
❺ min.js跟js的區別
區別:
jquery.js是完整的未壓縮的jQuery庫,文件比較大,一般用於閱讀學習源碼或修改源碼,一般不用於線上項目。
jquery.min.js是由完整版的jQuery庫經過壓縮得來,壓縮後功能與未壓縮的完全一樣,只是將其中的空白字元、注釋、空行等與邏輯無關的內容刪除,並進行一些優化。這個版本一般用於網站引用使用,減小文件體積,降低網站流量,提升訪問速度等。
❻ 有哪些用 JavaScript 實現的圖形庫
JS圖形、圖標庫推薦:
1. JS Charts
JS Charts 是個基於JavaScript的圖表生成器,不需要任何編碼。JS Charts 非常容易使用,只要用戶使用客戶端腳本(比如,在 web 瀏覽器中執行)。它不需要多餘的插件和伺服器模塊,只需要下載 JS Charts 的腳本,准備好 XML,JSON 或者 JavaScript 數組數據。
2. Canvasjs
CanvasJS 是個易用的 HTML5 & JavaScript 圖表庫,基於 Canvas 元素。Graphs 可以通過設備渲染,包括 iPhone,iPad,Android,Windows Phone,Microsoft Surface,Desktops 等等。它允許用戶創建適用於所有設備,不影響 web 應用程序的功能和可維護性的富儀表盤。CanvcasJS 有著非常漂亮的主題和超過傳統的 Flash 和 SVG 圖表 10x 倍以上的速度——生成輕量級,漂亮和響應式的儀表圖。
3. Chart.js
Chart.js 是個簡單的,面向對象的客戶端圖形庫,用戶可以用 6 中不同的方式來可視化數據。每個方式都是動畫效果的,完全自定義,而且看起來非常好看,即使在 retina 顯示。它使用 HTML5 canvas 元素,支持所有現代瀏覽器,並且支持 IE7/8。
4. Aristochart
Aristochart 是個高度自定義,靈活的折線 Canvas 圖表庫,允許用戶集中精力在圖表的審美方面,後台工作做得非常好。Aristochart 有個持續進步的社區,提供許多不斷增長的主題給用戶選擇。
5. xCharts
xCharts 是一個使用 D3.js 來構建漂亮的可定製的數據驅動的 JavaScript圖表庫,他使用HTML,CSS,SVG實現圖表,xCharts 被設計為一個動態的、流暢的、開放的和可定製化的庫。
6. BonsaiJS
BonsaiJS 是個輕量級的 JavaScript圖形庫,提供直觀的圖形 API 和 SVG 渲染器。主要特性包括:架構分離的運行器和渲染器;iFrame,Worker 和 Node 運行上下文;形狀,路徑,Assets(音頻,圖像,字體,subMovies),Keyframe 和常規動畫,等等。支持現代化瀏覽器: Safari, Chrome 和 Firefox。
7. Sigma.js
Sigma.js 是個免費開源的 JavaScript圖形庫,使用 HTML5 canvas 元素。它的設計是特別為了在 web 界面分享互動式網路 Map 和動態展示網路資料庫。
8. Morris.js
Morris.js 是個輕量級的 JavaScript庫,使用 jQuery 和 Rapha&enuml 來繪制時序圖。 Morris.js 生命周期是從代碼驅動 howmanyleft.co.uk 圖表開始的。它支持的瀏覽器有: IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小,只有一個函數: Morris.Line(選項),包括了許多配置選項。
9. Paper.js
Paper.js 是一個開源的向量圖形腳本框架,基於 HTML5Canvas 開發。提供清晰的場景圖、DOM和大量強大的功能用來創建各種向量圖和貝塞爾曲線。
10. AmCharts
AmCharts 是個高級圖表庫,適用於所有數據的可視化。AmCharts 包括: Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。
11. Smoothie Charts
Smoothie Charts是個極小的圖表庫,專為實時流媒體數據設計的。Joe Walnes 想展示 WebSocket推動的實時的流數據。雖然很多圖表庫允許用戶動態更新數據,但是沒有一個是可以優化源源不斷的流數據。
12. Dygraphs
Dygraphs 是個快速,靈活,開源的 JavaScript 圖表庫。它允許用戶展示和解析密集的數據集。可以高亮需要強調的數據集。可以使用滑鼠點擊或者用滑鼠拖動來縮放圖表;可以修改數值或者點擊條目來調整平均周期。
13. Grafico
Grafico 是 Grafico 是一個基於 Raphaël 和 Prototype.js 構建的 JavaScript 圖表庫,提供了各種圖表類型。這些漂亮的圖表,有利於傳遞他們的信息。
14. Highchart JS
Highcharts JS 是一個製作圖表的純 Javascript類庫,主要特性如下:兼容性:兼容當今所有的瀏覽器,包括 iPhone、IE 和火狐等等;對個人用戶完全免 費;純JS,無BS;支持大部分的圖表類型:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖;跨語言:不管是 PHP、Asp.net 還是 Java 都可以使用。
15. Flotr
Flotr 是一個基於 Prototype 開發的 JavaScript繪圖工具。支持圖例,滑鼠跟蹤,圖片區域選擇,圖片縮放,添加事件鉤子(event hook),通過CSS設置樣式等。
16. Flot
Flot 是受 Plotr 和 PlotKit 的 啟發,Ole Laursen 基於 jquery 開發了一個圖表繪制(WEB Chart)插件並命名為 flot。 flot 是個純 JavaSript 庫,專注於簡單的使用方式,迷人的外觀和互動式特性。支持的瀏覽器有: Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
17. jFreeChart
JFreeChart 主要用來各種各樣的圖表,這些圖表包括:餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、區域圖、分布圖、混合圖、甘特圖以及一些儀表盤等等。JFreeChart 項目歷史悠久,而且有大量的開發者在維護。
18. Plotkit
PlotKit 是一個純 JavaScript 繪圖工具包。它支持 HTML Canvas 和 Adobe SVG。有著很完整的文檔,方便用戶使用。
19. Planetary.js
Planetary.js 是個令人稱奇的創建互動式 web 地球儀的 JavaScript庫。它使用 D3 和 TopoJSON 來解析和渲染地理信息。Planetary.js 使用基於插件的架構,甚至默認自身就是個插件!這使得 Planetary.js 非常靈活,而且它是允許用戶完全自定義,包括顏色,大小,rotation 等等。更重要的是,用戶可以在任意位置使用自定義的顏色和大小來顯示動畫「pings」;它還支持滑鼠拖動和縮放,100% 免費和開源。
20. Ember Charts
Ember Charts 是個圖表庫,使用 Ember.js 和 d3.js 框架構建的。它包括時間線,條形圖,餅圖和散點圖,非常容易擴展和修改。這些圖表組件都是開箱即用的,在圖表交互和演示方面應用的很好。
21. Sparky
Sparky 是個免費的 JavaScript 波形圖庫,依賴於 Raphaël ,非常容易使用。支持多個圖表類型(折線,條形,area),折線和區域圖可以有多個顏色選擇。
22. Envision.js
Envision.js 是個 JavaScript 庫,用來簡化,快速創建互動式的 HTML5 可視化圖表。它包括兩個圖表類型:時序圖和 Finance ,提供 API 給開發者,用戶可以直接自定義創建圖表。這個庫氏基於 Flotr2 和 HTML5 Canvas 的。它與框架無關,依賴於幾個小的 JavaScript 庫。
23. Dc.js
dc.js 是個 JavaScript 圖表庫,有著原生的 crossfilter, 支持和允許高效展示大型多維數據集(基於 crossfilter 的示例);圖表使用 dc.js 渲染,是使用原生數據驅動,所以能得到用戶的實時反饋;dc.js 最大的亮點在於能提供一個簡單而強大的 JavaScript 庫,能進行數據可視化和分析;不僅支持桌面瀏覽器還支持移動端。
24. ElyCharts
Elycharts 是一個易於使用的,可定製的 JavaScript圖表繪制組件。這個組件可用於繪制大部分常用的圖表類型包括:line, column, are, bar, pie, sparklines and combinations。它支持多種互動式功能包括:滑鼠跟蹤、事件處理、利用各種動畫高亮顯示選擇中的區域,Tooltip,HTML錨點等。可以動 態修改數據,並以漂亮的動畫效果展示圖表中的變化。圖表利用SVG/VML技術生成,基於jQuery + Raphaël開發。
25. AwesomeChartJS
AwesomeChartJS Awesome Chart JS 是一個 JavaScript生成圖表的類庫,它利用了 HTML5 的 canvas 標簽來創建統計圖表。此類庫就是為了減輕開發者的工作量,使用它只需書寫幾行代碼便能生成漂亮的圖表。
26. Arbor.js
Arbor.js 是一個利用 Web Works 和 jQuery創建的可視化圖形庫,它為圖形組織和屏幕刷新處理提供了一個高效的、力導向的布局演算法。
27. CanvasXpress
canvasXpress 是一個基於HTML5 canvas標簽實現的 JavaScript圖表類庫,它能夠支持線性圖、柱形圖、餅圖和熱點圖等多種常見的圖表類型。它所生成的圖表交互性很強,滑鼠放 上去時會動態顯示值。除此之外,它也具有相當高的可定製性,可設置圖表的文字、顏色和要顯示/隱藏的元素等。當然更重要的一點是,雖然它使用了 HTML5,但是依然支持IE6瀏覽器。
28. JSXGraph
JSXGraph 是一個支持各種瀏覽器的互動式幾何圖庫繪制。JSXGraph 使用 SVG 和 VML。
29. Rickshaw
Rickshaw 是一個用於繪制時序圖的簡單 jS 庫,基於 Mike Bostock』s delightful D3 庫構建。
30. rGraph
RGraph 是基於HTML5 canvas標簽的HTML5 canvas圖形庫,支持 20 種不同的可視化類型。使用 canvas 標簽,RGraph 創建「HTML5 圖表」,意味著更快的 web 頁面載入和更少的 web 伺服器載入。這能幫助減小 web 頁面的大小,低能耗和更快的瀏覽速度。
31. Fusion Chart
FusionCharts Suite XT 是個專業的 JavaScript圖表庫,能創建任何類型的圖表。它創建的圖表都是可以進行完全自定義的,標簽,字體,邊界等等,都可以進行修改。它有很強的交互功能,有許多信息提示,可 點擊的 legend 關鍵字,還有 dril-down,縮放/滾動 和單擊列印圖表功能。
32. Graph Dracula
Dracula 是用一系列的工具來顯示和布局互動圖表,包括各種相關的演算法。它只是純 JavaScript 和 SVG ,並無 Flash,Java,其他插件。它非常容易使用,用戶可以很簡單的自定義任意的元素。
33. Bluff
Bluff 是個 JavaScript 的 Ruby 的 Gruff graphing library埠。它支持所有 Gruff 的特性,但是有著最小的依賴。用戶只需要運行一個第三方腳本: JS.Class 副本(壓縮後只有 2.6kB ) 和 Google 的 ExCanvas 副本,用來支持 IE 中的 canvas。這兩個腳本在 Bluff 中都有下載。Bluff 自身壓縮後大小大概有 11KB 。
34. Pizza Pie Chart
Pizza Pie Charts 是個響應式餅圖圖表,基於 Adobe Snap SVG 框架,通過 HTML 標記和 CSS 來替代 JavaScript 對象,更容易集成各種先進的技術。
35. jGraph
HTML5 圖表組件,完全支持l IE 6-8 和觸屏設備。 JGraph 自2001年來就一直提供最先進的圖表軟體組件,是第一個流行的 JGraph Swing 庫。然後在 2005 年走在時代的前沿開發 mxGraph。