博客统计信息
  • 经验分:1269
  • 随笔:237
  • 文章:1
  • 评论:116

 

教程:jQuery是如何工作的

教程:jQuery是如何工作的

jQuery:基础

    这是一个基础教程,专为准备学习jquery的童鞋们准备。如果你还没有网页设置,就先创建一个html页面包括以下内容。

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8"> 
        <title>Demo</title>
     </head>
    <body>
        <a href="http://jquery.com/">jQuery</a>
        <script src="jquery.js"></script>
        <script>
        </script>
     </body>
    </html>
 
        编辑src属性在代码中标签来指向你jquery.js副本。例如,使用jquery.js在同一个目录作为您的HTML文件,你可以使用:
        <script src="jquery.js"></script>
 
    你可以从Downloading jQuery 下载你自己的jquery副本。

准备好启动代码文件

    很多js程序员最终会做的第一件事就是添加类似下面的一段代码到他们的程序中。

    window.onload = function(){ alert("welcome"); }
 
    里面就是你想运行的时候在页面加载的代码。问题是,然而javascript代码直到所有的图像加载完才会运作(这包括横幅广告)。之所以一开始采用window.onload是因为HTMLdocument’在你最初运行你的代码时并没有加载,要避开这两个问题,jquery有一个简单的声明检查文档和等到它准备作用时,这就是众所周知的ready event
     
 
           $(document).ready(function(){
       // Your code here
     });

    在准备事件里,添加一个链接。

     $(document).ready(function(){
       $("a").click(function(event){
         alert("Thanks for visiting!");
       });
     });

    保存您的html文件和在浏览器中重新加载测试页面。按下页面中的链接会令浏览器弹出一个警告,在页面页面运行到主要jquery页面前。

    通过调用event.preventDefault()在事件句柄中,对于点击和大多数事件,你能够阻止他们默认的行为—这里可以查看jquery.com

     $(document).ready(function(){
       $("a").click(function(event){
         alert("As you can see, the link no longer took you to jquery.com");
         event.preventDefault();
       });
     });

一个完整的例子

    如下一个例子是如果你要使用脚本在自己的文件里,它应该是什么样子的。注意到它链接到了Google’s CDN去加载JQuery内核文件。同样,在<head>中自定义的脚本时,它通常是最好放置在一个单独的文件利用脚本元素的src属性指向文件。

     <!DOCTYPE html> 
    <html lang="en">
    <head>
       <meta charset="utf-8">
       <title>jQuery demo</title>
     </head>
     <body>
       <a href="http://jquery.com/">jQuery</a>
      <script>
          $(document).ready(function(){
           $("a").click(function(event){
             alert("As you can see, the link no longer took you to jquery.com");
             event.preventDefault();
           });
         });
       </script>
     </body>
     </html>

添加和去除一个HTML

    重要:其余的jQuery列子需要放到准备事件中以便当文档准备工作时执行。详细参阅上面的 Launching Code on Document Ready 

     <style>
          a.test { font-weight: bold; }
     </style>
 
   
    下一步,添加
addclass调用您的类。
     $("a").addClass("test");
    你所有的元素都变成粗体。
    移除样式,使用
 removeClass
    $("a").removeClass("test");

    · HTML允许添加多个类到元素里。

特殊效果

    在jQuery中,提供了一些效果让您的网站显得与众不同。为了测试这个,将你先前的单机事件改成这样。
 
    $("a").click(function(event){
       event.preventDefault();
       $(this).hide("slow");
    });
    现在如果你点击任何连接,它将会缓慢地消失。
回调和函数
    回调是一个函数作为另一个函数的的参数在福参数完成后被调用。回调特别在于在父函数后面出现的函数能够在回调执行前执行。另外一个我们需要知道的事是如何合理地传递回调函数。这是我经常忘记语法的地方。
 
    没有参数的调用
 
    对于一个没有参数的的回调你这样传递它 
     $.get('myhtmlpage.html', myCallBack);

        注意到第二个参数只是简单的函数名(但不是一个字符串和没有圆括号)。函数在javascript中是“第一类公民“所以能够响函数一样在后面参考和执行。

    注意到第二个参数。

    带参数的回调

    你可能会问自己“如果你有参数想传递你会做什么?“

错误的操作

    错误的方法(编译出错!)

     $.get('myhtmlpage.html', myCallBack(param1, param2));

    会出错因为它调用

    myCallBack(param1, param2)

    然后传递返回值作为 $.get()的第二个参数。

正确的操作

    上面列子的问题是myCallBack(param1, param2)在作为一个函数传递前会先被执行。Javascriptjquery期望一个函数指针像这样,I.ESetTimeout function

    在下面的用法中,一个匿名的的函数被创建(只是一段语句)和作为一个回调函数被注册。注意到“function(){“的用法。这个匿名的函数做一件明确的事:在外部调用带param1param2做参数的myCallBack
     
        $.get('myhtmlpage.html', function(){
            myCallBack(param1, param2);
        });
 
    Param1param2作为一个回调当$.get'获取完页面。


评论

# re: 教程:jQuery是如何工作的


看不懂的飘过。。。


2012-2-22 10:43 | 风萍

# re: 教程:jQuery是如何工作的


又一个看不懂的飘过。
期待JQuery大虾进来评论。


2012-2-22 13:47 | hanyongdong

发表评论

(不对外公开)

 

Please add 4 and 2 and type the answer here: