1,使用jQuery
时间:2010-09-06 来源:耀哥
推荐的学习资源来自:张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/
付老张的无私奉献:api手册
概要:
什么是jQuery?在vs2010中怎么使用jQuery?最后再来个jQuery的例子。
内容:
jQuery是一套JavaScript脚本库,类似于.net的类库,我们将一些方法封装进去,方便使用。
所以使用jQuery可以提高我们编写JavaScript的效率。在这些同类的js脚本中,jQuery是应用非常广的一个。值得我们花时间去学习使用的好处有:
1, 强大的函数功能
2, 解决浏览器兼容性(这个足以让你内牛满面)
3, 实现丰富的UI
4, 与.net无缝结合
5, 更健壮,更简单,更丰富 等等等
在vs2010中使用jQuery非常方便,不像是在vs2008中需要你装些东西。在vs2010中只要新建个web程序,jQuery版本的类库就会被自动引入在Scripts中:
1, jquery-1.3.2-vsdoc.Js:含有jQuery类库和vs智能感知库,提示输入
2, jquery-1.3.2.js:含有jQuery类库
3, jquery-1.3.2.min.js:含有压缩后的jQuery类库,正式的环境使用
还需要引用:
<scripttype="text/javascript"src="scripts/jquery-1.3.2-vsdoc2.js">
然后就可以使用此类库和智能感知了。
网上推荐的引入方法是:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<%if (false)
{ %>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<%} %>
此方法在编写的时候会有智能感知,编译的时候只编译min.js。
在.js中引用的方法是:
/// <reference path="jquery-1.3.2-vsdoc2.js" />
Hello World例子:
<div id="div">
Hello world!
</div>
<input id="btnShow"type="button" value="显示"/>
<input id="btnHide"type="button" value="隐藏"/>
<input id="btnChange"type="button" value="修改为Hello world jQuery!"/>
<scripttype="text/javascript">
$("#btnShow").bind("click", function (event) {$("#div").show(); });
$("#btnHide").bind("click", function (event) {$("#div").hide(); });
$("#btnChange").bind("click", function (event) {$("#div").html("Hello world jQuery!"); });
</script>
此例子中使用到的知识:
1, jQuery的Id选择器:$(“#btnShow”)
2, 事件绑定:bind()
3, 隐藏和显示的函数:show()和hide()
4, 修改元素内部html的函数:html()