JQuery是一套非常优秀的javascript核心框架,我们可以很轻松的利用Jquery完成许多工作.不过有件事情大家一定要清楚,那就是Jquery与YUI、Extjs、Dojo之类的JavaScript FrameWork比起来它最大的优点就是短小精悍,不会像其他的框架库一样什么都包含进来,它的主要工作就是对DOM文件的操作,同时它的选择器功能做的非常的棒,可以非常简单的起到javascript/xhtml/css之间的黏合剂的作用,并且Jquery在Ajax与事件处理的功能上也是一流的,它可以帮助你很容易的就完成一些Ajax工作。
JQuery的扩展功能也是非常好的,现在在互联网中大家可以找到几百以上的Jquery的各种各样的插件,同时官方网站也推出了Jquery UI这种官方效果插件,现在看起来还是非常棒的,大家可以去看看(http://ui.jquery.com).还有一个好消息就是JQuery以得到微软官方的支持,在下一代Visual Studio中将内部支持Jquery,所以Jquery可以说是asp.net开发者不二的选择。
要想使用Jquery就得必须下载它,大家可以过 在百度或者google中键入jquery就可以找到相关的网站来进行下载了,下载之后我们基础就可以在项目中添加使用了。
一般来说所有的应用程序第一例子都是Hello World,我们也来做一个Hello Word的JQuery程序。见下例
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5: <title>欢迎来到jquery的世界</title>
6: <script type="text/javascript" src="lib/jquery/jquery.js"></script>
7: <script type="text/javascript">
8: $(document).ready(function(){
9: $("div").append("大家好欢迎使用 jquery");
10: });
11: </script>
12: </head>
13: <body>
14: <div></div>
15: </body>
16: </html>
在这段代码中我们使用了一些大家也许以前都没有见过的东东。
$号是Jquery中的对象,使用$("div")就是用Jquery来选取元素,这个例子中如果使用$("div")的话,那么就代表着对文件中所有的xhtml中的div标签进行操作。
为保证可以对文件中所有的div标签都生效,所以要等到整个dom文档都载入成功后才能执行,所以我们又用到了ready事件,它的做用是必须在文档的dom对象都载入后才能执行事件,这个方法我们在以后使用jquery时是经常使用的。
为了使我们的例子更加有趣我们再一次的改变一下这个代码:
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5: <title>欢迎来到jquery的世界</title>
6: <script type="text/javascript" src="lib/jquery/jquery.js"></script>
7: <script type="text/javascript">
8: $(document).ready(function(){
9: $("div").append("大家好欢迎使用 jquery");
10: $("h1").click(function(){
11: alert("哈哈哈,你胆子真大!");
12: });
13: });
14: </script>
15: </head>
16: <body>
17: <div></div>
18: <h1>点我</h1>
19: </body>
20: </html>
在学习Jquery中还有一个乐趣就是Jquery对Css的支持,真的是出奇的好,看以下的例子:
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5: <title>Jquery的Css支持</title>
6: <style type="text/css">
7: body, div, p, h1, h2, h3, h4, ul, li, table {
8: margin: 0;
9: padding: 0;
10: border: none;
11: }
12:
13: body {
14: font-family: Tahoma, Arial, sans-serif;
15: font-size: 75%;
16: }
17: .master_header {
18: margin: -1px auto 0 auto;
19: 800px;
20: }
21: .demoarea {
22: padding: 20px;
23: background: #FFF url(images/demotop.png) no-repeat left top;
24: }
25: </style>
26: <script type="text/javascript" src="lib/jquery/jquery.js">
27: </script>
28: <script type="text/javascript">
29: $(document).ready(function(){
30: $("#header").addClass("master_header");
31: $("#content").addClass("demoarea");
32: });
33: </script>
34: <body>
35: <div id="header">
36: 我是头
37: </div>
38: <div id="content">
39: 我是躯干
40: </div>
41: <div id="footer">
42: 我是尾
43: </div>
44: </body>
45: </html>