JQuery霹雳：一、Hello JQuery

来源：互联网发布：上虞淘宝培训编辑：程序博客网时间：2024/04/27 21:17

（原创：灰灰虫的家http://hi.baidu.com/grayworm）
JQuery是一个功能非常强大的JavaScript库。

一、JQuery特点：
1.轻量级：只有几十K大，压缩后一般只有18K。
2.强大选择器：拥有类似于CSS的选择器，可以对任意DOM对象进行操作
3.动画操作不再复杂：可以使用很简单的语句实现复杂的动画效果
4.Ajax支持：$.ajax()从底层封装了ajax的细节问题。
5.浏览器兼容性高：不用再担心客户端浏览器兼容性问题。
6.连式操作：同一个JQuery对象上的多个操作可以连写，无需分开写。
7.隐式迭代：自动对获取到的JQuery对象迭代操作，不需要再编写循环代码。
8.丰富的插件：大量的稳定实用的插件可以大大提高我们开发效率。
9.开源：自由使用，集全世界程序员的智慧，有更广阔的发展前景。

二、JQuery配置：
首先：去http://jquery.com下载最新的JQuery库；

《图0》
在网站上有两种类库可供我们下载
jquery-1.3.x.js ：完整，无压缩版，可供学习、开发。
jquery-1.3.x.min.js ：压缩后的版本，主要用于项目的发布。
在这里我们主要使用jquery-1.3.x.js来开发

如果你使用的是VS2010 Beta2，在新建网站的时候会自动导入JQuery1.3.2库，并放在Scripts文件夹中。这里我都使用VS2010 Beta2为开发工具。

《图1》

然后：在使用的时候需要在页面的<head>中导入jquery-1.3.x.js文件，在VS2010中我们可以从“解决方案管理器”中拖动js文件到页面<head></head>中就可以生成脚本导入语句。

《图2》
一般来说JQuery的导入语句应当写在比较靠前的地方。即：在我们使用JQuery对象之前导入JQuery库，否则会找不到JQuery对象。

三、第一个JQuery程序：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                alert('hello world');
            }
   );
    </script>
</head>
......
</html>

首先要导入jquery库文件
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

在JQuery中$代表的是JQuery，$(document)等价于JQuery(document)。

$(document).ready(function(){
/*......*/
});
上面这段代码会在以后的JQuery代码中经常用到。它类似于JavaScript的window.onload();在文档加载完成后会执行function(){}中的内容。但它们之间又有细微的不同之处：
a.执行时机不同：window.onload()是等待页面所有内容加载完成后被触发。而$(document).ready();是等待页面中DOM元素绘制完成后被触发。
如果页面中有大量图片，window.onload()是等待所有图片都显示完成后再被触发；而$(document).ready();是页面中HTML生成完成后就被触发，可以此时图片还没来得及显示出来。
b.编写个数不同：
如果页面中有多个$(document).ready()，那这些代码都能被执行。
如：
$(document).ready(
             function () {
                 alert('hello world');
             }
   );
   $(document).ready(
         function () {
             alert('hello again');
         }
   );
  执行结果：会依次弹出两个提示框。

如果页面中有多个window.onload()，那只有最后一个的代码会被执行
如：
  window.onload=function(){
    alert("hello world");
   };
   window.onload=function(){
    alert("hello again");
   }
   执行结果：只会弹出一个提示框“hello again”。

四、稍微复杂的点JQuery程序
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready( //页面加载执行
        function () {
            $("#btn").click( //绑定按钮点击事件，$("#btn")代表id是btn的DOM对象。
            function () {
                $("#dd").html($("#txt").val()); //将文本框中的内容写入id="dd"的div中去。
            });
        }
        );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="txt" type="text" /><input id="btn" type="button" value="Click" />
        <div id="dd"></div>
    </div>
    </form>
</body>
</html>
执行的效果是：当点击按钮的时候会在div中显示文本框中的内容（原创：灰灰虫的家http://hi.baidu.com/grayworm）

五、JQuery的主要知识点：
JQuery看似复杂，实际它就是一种客户端的脚本。我们只有接受JQuery这种语法格式才能学好。
学习JQuery不要被它纷繁复杂的表现特效所迷惑，特效你是学不完的，但“万变不离其宗”，我们需要学习的是JQuery中“根本的东西”和“相对稳定的东西”，并熟练应用，然后“以不变应万变”，达到掌握JQuery的目的。

在JQuery学习中要学习哪些东西呢？
学习JQuery必须的基础是CSS样式表，如果对样式表一无所知，是学不懂JQuery的。
1.JQuery选择器与DOM操作
选择器是JQuery中非常强大的功能，也是它比JavaScript表现更方便的一种功能，它是学习JQuery 的基础。
DOM操作是所有编程语言的必备功能，通过它我们能够解析DOM树，能够对HTML页面进行全面操控。

2.JQuery的事件与动画
通过JQuery的事件与动画我们可以用很简单的代码实现很华丽的动画效果。

3.JQuery实现Ajax
过去在JavaScript中实现Ajax有两个难点：1.考虑客户端代码与浏览器的兼容性；2.对XMLHttpRequest对象的操作很多，消息我们很多的精力。
而JQuery可以很好地解决这两个问题，当然还是免不了要写一些JQuery代码的。

4.插件的使用
我们学习JQuery的目的是用它来简化开发过程中复杂应用的，插件可以为我们提供高效健壮的解决问题的方法，好多功能没有必要我们用JQuery 一一实现，我们应当知道要实现这个功能应当使用什么样的插件，以及如何使用这个插件。
所以插件的使用应当是JQuery的学习重点。

六、本系列的示例页面：
页面：
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div>
   <div class="one" id="one" >
   id为one,class为one的div
       <div class="mini">class为mini</div>
   </div>

     <div class="one" id="two" title="test" >
   id为two,class为one,title为test的div.
       <div class="mini" title="other">class为mini,title为other</div>
       <div class="mini" title="test">class为mini,title为test</div>
   </div>

   <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
     <div class="mini">class为mini</div>
     <div class="mini"></div>
   </div>

   <div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>

   <div style="display:none;" class="none">style的display为"none"的div</div>

<div class="hide">class为"hide"的div</div>

   <div>
     包含input的type为"hidden"的div
     <input type="hidden" size="8"/>
   </div>

   <span id="mover">正在执行动画的span元素.</span>
</div>

标式表style.css：
div,span,p
{
     width:140px;
     height:140px;
     margin:5px;
     background:#aaa;
   border:#000 1px solid;
     float:left;
     font-size:17px;
     font-family:Verdana;
   }
div.mini
{
     width:55px;
     height:55px;
     background-color: #aaa;
     font-size:12px;
}
div.hide
{
    display:none;
}

运行效果：

《图3》

（原创：灰灰虫的家http://hi.baidu.com/grayworm）