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


Posted in Javascript onMay 22, 2010

首先来看下软件的运行界面:
jQueryPad 实用的jQuery测试工具(支持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>

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

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

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

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

Javascript 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
用jQuery打造TabPanel效果代码
May 22 #Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 #Javascript
jquery 多级下拉菜单核心代码
May 21 #Javascript
JQuery 学习技巧总结
May 21 #Javascript
Jquery调用webService远程访问出错的解决方法
May 21 #Javascript
ExtJS 下拉多选框lovcombo
May 19 #Javascript
javascript 得到变量类型的函数
May 19 #Javascript
You might like
php array_map()数组函数使用说明
2011/07/12 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
基于python实现微信模板消息
2015/12/21 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python中遍历列表的方法总结
2019/06/27 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
精选干货:Java精选笔试题附答案
2014/01/18 面试题
有针对性的求职自荐信
2013/11/14 职场文书
职专应届生求职信
2013/11/16 职场文书
初中地理教学反思
2014/01/11 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
项目建议书格式
2014/03/12 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
作息时间调整通知
2015/04/22 职场文书
上诉答辩状范文
2015/05/22 职场文书
Java Redisson多策略注解限流
2022/09/23 Java/Android