jQueryPad 實用的jQuery測試工具(支持IE,chrome,FF)
更新時間:2010年05月22日 02:38:10 作者:
這個jQueryPad也是我無意中在網(wǎng)上看頁面的時候看到的,下載下來試用了下,感覺很好,這個軟件是使用WPF開發(fā)的(不過不開源,需要安裝.NET Framework 3.5),整體界面很簡潔。
首先來看下軟件的運行界面:

左邊為HTML的代碼,右邊為jQuery代碼,同時支持代碼折疊,語法高亮(但是就是沒有代碼提示,感覺有點不爽,不過jQuery使用的時間長了基本的熟悉后應該就無所謂了),在編寫好后就可以直接按F5就可以查看實際效果,同時可以點擊下面的chrome,ff,ie按鈕來查看在3個瀏覽器中的實際效果,如果覺得可以就可以保存成HTML,jQueryPad會自動把jQuery代碼和HTML代碼合并成HTML,可以直接雙擊運行,生成的代碼如下:
<!-- saved from url=(0014)about:internet -->
<!-- the comment above allows the embedded browser to load the document without the ActiveX security prompt -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQueryPad Preview</title>
<script type="text/javascript" src="file:///D:/Documents and Settings/kyo/Local Settings/Application Data/jQueryPad/9bdfde77-f688-4bca-8a6a-aee5635fae9a/Jquery.js"></script>
<style type="text/css">
body
{
font-family: Segoe UI;
font-size: 10pt;
background: white;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("#hello").html("Hello world!");
});
</script>
</head>
<body>
<div id="hello">
</div>
</body>
</html>
怎么樣看上去很不錯把?我覺得是一個可以日常開發(fā)中可以替代VS的工具,因為畢竟VS太大了,如果平時要寫些基本的代碼可以就用這個工具。
這個工具還有個亮點就是支持模板(采用的是NVelocity),打開程序目錄下的Templates下就會看到有個JQuery.js和Default.vm,其中Default.vm是實際生成HTML的模板這個可以由用戶自己定義,只要用過NVelocity的基本都可以自己定制好模板,這樣就可以根據(jù)自己的需求來定制模板了(感嘆下:模板引擎真是好,以前沒怎么用的時候覺得多此一舉,現(xiàn)在用了一段時間覺得真不錯,大家如果沒用過的可以趕快去學習下,不一定要是NVelocity,也可以學習下VS自帶的T4)
小貼士:使用這個工具的時候可以使用Ctrl+Tab鍵來切換HTML和jQuery代碼的輸入,這樣大大加快了編寫速度,不用讓一只手離開鍵盤。
下載地址 jQueryPad 小巧的jQuery開發(fā)測試工具(支持IE,chrome,FF)

左邊為HTML的代碼,右邊為jQuery代碼,同時支持代碼折疊,語法高亮(但是就是沒有代碼提示,感覺有點不爽,不過jQuery使用的時間長了基本的熟悉后應該就無所謂了),在編寫好后就可以直接按F5就可以查看實際效果,同時可以點擊下面的chrome,ff,ie按鈕來查看在3個瀏覽器中的實際效果,如果覺得可以就可以保存成HTML,jQueryPad會自動把jQuery代碼和HTML代碼合并成HTML,可以直接雙擊運行,生成的代碼如下:
復制代碼 代碼如下:
<!-- saved from url=(0014)about:internet -->
<!-- the comment above allows the embedded browser to load the document without the ActiveX security prompt -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQueryPad Preview</title>
<script type="text/javascript" src="file:///D:/Documents and Settings/kyo/Local Settings/Application Data/jQueryPad/9bdfde77-f688-4bca-8a6a-aee5635fae9a/Jquery.js"></script>
<style type="text/css">
body
{
font-family: Segoe UI;
font-size: 10pt;
background: white;
}
</style>
<script type="text/javascript">
$(document).ready(
function() {
$("#hello").html("Hello world!");
});
</script>
</head>
<body>
<div id="hello">
</div>
</body>
</html>
怎么樣看上去很不錯把?我覺得是一個可以日常開發(fā)中可以替代VS的工具,因為畢竟VS太大了,如果平時要寫些基本的代碼可以就用這個工具。
這個工具還有個亮點就是支持模板(采用的是NVelocity),打開程序目錄下的Templates下就會看到有個JQuery.js和Default.vm,其中Default.vm是實際生成HTML的模板這個可以由用戶自己定義,只要用過NVelocity的基本都可以自己定制好模板,這樣就可以根據(jù)自己的需求來定制模板了(感嘆下:模板引擎真是好,以前沒怎么用的時候覺得多此一舉,現(xiàn)在用了一段時間覺得真不錯,大家如果沒用過的可以趕快去學習下,不一定要是NVelocity,也可以學習下VS自帶的T4)
小貼士:使用這個工具的時候可以使用Ctrl+Tab鍵來切換HTML和jQuery代碼的輸入,這樣大大加快了編寫速度,不用讓一只手離開鍵盤。
下載地址 jQueryPad 小巧的jQuery開發(fā)測試工具(支持IE,chrome,FF)
相關文章
jQuery插件Tooltipster實現(xiàn)漂亮的工具提示
Tooltipster是一個jQuery插件用于快速創(chuàng)建HTML5校驗并且靈活的Tooltips。它可以通過CSS來改變外觀,箭頭的位置之后,鼠標,延遲/期間的外觀都可以被定義。2015-04-04jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項對象
這篇文章主要介紹了jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項對象的相關資料,需要的朋友可以參考下2016-01-01jQuery獲取table下某一行某一列的值實現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實現(xiàn)代碼的相關資料,需要的朋友可以參考下2017-04-04