如果使用Firefox浏览器创建一个jQuery实验室:
1、要安装一个Firefox浏览器(这个好像在说讲废话,呵呵)
2、其次要安装一个Firebug的插件(对于Firebug做前端开发的人员应该不陌生吧!可从http://getfirebug.com下载)
前面2步是准备好了后,我打开FireFox浏览器,然后打开Google首页(http://www.google.com.hk/),等Google首页加载完了后,点击浏览器窗口顶部的Firebug按钮如图:
然后就会出现如下图
默认是html选项卡被选中,此时要选择控制台选项卡,然后就会出现如下图:
如果控制台被禁用就要点一下启用,然后刷新(不刷新也可以)一下页面只要出现如下图所示红圈部分就可以了
然后再控制台里输入如下脚本代码:
1 var s=document.createElement('script'); s.setAttribute('src', 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js'); document.getElementsByTagName('body')[0].appendChild(s);
然后再按一下Enter键就会出现如下图所示的内容
然后就可以在控制台里输入jQuery代码进行实验了!上面的一段脚本是获取jquery的代码。当然那段脚本代码里“http://jquery.com/src/jquery-latest.js”可以改成你所知道的jquery的地址(如:我改成了microsoft CDN的jquery地址:http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js)
现在我们来测试,隐藏Google首页的Google logo图标.
首页要知道Google logo图标放在html里的那个元素里,用Firebug就很容易知道放在一个id值为:hplogo的div元素里。
然后我们就在控制台里输入jquery('#hplogo').hide()并按下回车键就OK。结果下如图:
用Firefox浏览器创建一个简单的jQuery实验室,就这样完成了!当然这只是一个简单的功能!