jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)

2016-02-19 13:04 6 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF),希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

首先来看下软件的运行界面:

左边为HTML的代码,右边为jQuery代码,同时支持代码折叠,语法高亮(但是就是没有代码提示,感觉有点不爽,不过jQuery使用的时间长了基本的熟悉后应该就无所谓了),在编写好后就可以直接按F5就可以查看实际效果,同时可以点击下面的chrome,ff,ie按钮来查看在3个浏览器中的实际效果,如果觉得可以就可以保存成HTML,jQueryPad会自动把jQuery代码和HTML代码合并成HTML,可以直接双击运行,生成的代码如下:

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
!-- 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" /
titlejQueryPad 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
/div
/body
/html

怎么样看上去很不错把?我觉得是一个可以日常开发中可以替代VS的工具,因为毕竟VS太大了,如果平时要写些基本的代码可以就用这个工具。

这个工具还有个亮点就是支持模板(采用的是NVelocity),打开程序目录下的Templates下就会看到有个JQuery.js和Default.vm,其中Default.vm是实际生成HTML的模板这个可以由用户自己定义,只要用过NVelocity的基本都可以自己定制好模板,这样就可以根据自己的需求来定制模板了(感叹下:模板引擎真是好,以前没怎么用的时候觉得多此一举,现在用了一段时间觉得真不错,大家如果没用过的可以赶快去学习下,不一定要是NVelocity,也可以学习下VS自带的T4)

小贴士:使用这个工具的时候可以使用Ctrl+Tab键来切换HTML和jQuery代码的输入,这样大大加快了编写速度,不用让一只手离开键盘。

下载地址 jQueryPad 小巧的jQuery开发测试工具(支持IE,chrome,FF)

来源:http://www.tulaoshi.com/n/20160219/1602881.html

延伸阅读
标签: Web开发
Tab - 飞飞+PR /*TAB布局*/ #tab * {font-size:12px;} #tab h3 a {display:inline-block;} #tab h3 a {display:block;} #tab {position:relative;} #tab h3,#tab ul,#tab div,#tab li {margin:0;padding:0;list-style-type:none;} #tab ul li {position:absolute;left:0;top:0;float:left;display:block;width:100px;height:30px;f...
引自 webmote@CCF@CCF在VS安装后发现路径**VC7\Common7\Tools\Bin\下有许多小工具,我对带有Cert的文件比较感兴趣。经过研究,发现是有关证书和签名的,当然,该证书未被证书认证机构认可。下面列出这些工具和我的使用心得。1。Makecert.exe ---证书创建工具2。Cert2Spc.exe ---发行者证书测试工具3。Signcode.exe ---文件签名工具面对其众多参...
标签: Web开发
JavaScript代码看起来总是要比Java、C#乱的多,可能是自己还不熟悉JavaScript编程,因此一款优秀的JavaScript调试器就显得格外重要。目前在网络和书上见到最多的有: 第一个:Microsoft Script Debugger: 集成在IE中的一款很原始的调试工具,具备基本的调试功能,除了可以用于调试客户端脚本,还能调试在Microsoft IIS上运行的服务器端脚本。...
标签: Web开发
先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.in...
W-教程博主就比较喜欢圆角的盒子模型,现在CSS3已经可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端浏览器。 我们这样去定义一个盒子模型: -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px; 在Firefox,和Chrome中的效果: 其中 -moz-border-radius 是 Firefox 实现圆角的私...

经验教程

547

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部