jQuery 学习1---关于jQuery之jQuery如何工作

jQuery如何工作

本节主要介绍jQuery的基础知识：

这是一个基础的教程，目的是为了帮助你学会开始使用jquery,如果你还没有能够用jquery来启动你的第一个javascrip的程序，那么你可以首先按照的代码来使用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>
 
    // Your code goes here.
 
    </script>
</body>
</html>

scrip标签下的src属性是用来指向jQuery文件的一份拷贝，你可以从jquery的官网下载该页面，同时把jquery.js文件放在与你的html页面相同的文件目录下。

页面完成后启动代码

为了保证你的代码能够在浏览器完成页面的加载完成后执行，很多JavaScript程序员代码封装在一个onload函数中。

window.onload = function() {
 
    alert( "welcome" );
 
}

然而这些代码会等到所有的图片包括横幅广告都加载完成后才会执行，为了使这些代码可以在页面已经准备好了就开始进行执行，jquery有个关于ready event的声明：

$( document ).ready(function() {
 
    // Your code here.
 
});

举个例子，在ready event中，你可以对一个link增加一个点击事件的处理。

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

保存你的html文件，然后刷新你的浏览器，点击link首先会弹出alert窗口，然后会继续跳转到http://jquery.com.页面。对于点击事件和其他的一些事件，你可以通过调用event.preventDefault()函数来阻止一些浏览器对该事件的一些默认行为。

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

一个完整的例子

下面这个完整的例子描述了我们上面所讨论的点击事件处理的代码，这里我们把javascrip代码放在了html文件里的body标签内，其实我们通常最好是要把Javascript代码放在单独的JS文件里面，而通过<script>标签的src属性来引入到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>
 
    $( document ).ready(function() {
        $( "a" ).click(function( event ) {
            alert( "The link will no longer take you to jquery.com" );
            event.preventDefault();
        });
    });
 
    </script>
</body>
</html>

增加和除去HTML样式

注意：你必须把这些jQuery例子放在ready事件里面来执行这样才能使你的代码在页面准备好了之后就可以执行。

另外一个常见的功能是增加或者移除class样式

首先，在<head>标签内增加style信息，就像下面：

<style>
a.test {
    font-weight: bold;
}
</style>

然后调用addClass()方法：

$( "a" ).addClass( "test" );

这样的话所有的a标签元素都以粗体显示。

如果去这个样式，则使用removeClass()

$( "a" ).removeClass( "test" );

特效

jQuery也提供了一些方便的效果effects为了让你的网站更加的引人注目，例如你可以创建一个点击时间如下：

$( "a" ).click(function( event ) {
 
    event.preventDefault();
 
    $( this ).hide( "slow" );
 
});

然后这个当你点击时这个link就会缓慢的消失。

回调和函数

不像其他的编程语言，JavaScript可以自由地传递函数在以后执行，回调函数是这样一种函数，他可以作为参数传递给另外的函数，并且在父函数执行完成之后执行，回调函数是特殊的，因为他们耐心的等待着他们父函数结束后再去执行，而与此同时，浏览器可以执行其他的函数进行着别的各种各样的工作。使用回调函数，搞清楚如何将回调函数传递给他们的父函数很重要。

没有参数的回调函数

如果回调函数没有参数，你可以像这样来传递它：

$.get( "myhtmlpage.html", myCallBack );

当使用$.get()完整地获取到myhtmlpage.html页面后，它执行myCallBack()函数。

注意：第二个参数这里仅仅是一个函数名，而并非是字符串string，不带任何括号。

带参数的回调函数

执行带参数的回调函数会比较严格

错误的做法：

下面的代码是不会执行成功的：

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

失败的原因是代码会立即执行myCallBack( param1, param2)

然后返回结果作为第二个参数传递给$.get(). 我们想传递myCallBack(),而并非myCallBack(param1,param2)的返回值(尽管也许它也是一个函数)，那么怎么样传递带有参数的回调函数呢？

正确的做法：

为了延迟带参数的myCallBack()函数的执行，可以使用将其成一个封装匿名函数，可以使用function(){}，这个匿名函数仅仅只做一件事情，就是调用带有参数param1和param2的函数myCallBack()。

$.get( "myhtmlpage.html", function() {
 
    myCallBack( param1, param2 );
 
});

当我们调用$.get()获取到页面myhtmlpage.html时，就会执行匿名函数，进而会执行myCallBack(param1,param2),

posted on 2014-01-25 10:41 ayann204 阅读(217) 评论(0) 收藏举报

刷新页面返回顶部

ayann204