jQuery基本教程(z)

jQuery入门教程
本文介绍如何在HTML文件中引入jQuery,并展示了如何使用jQuery处理文档加载事件、添加点击事件处理程序、改变CSS class以及实现链接的隐藏效果等基本操作。

jquery入门啦^^

<html>

  <head>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    </script>

  </head>

  <body>

    <a href="http://jquery.com/">jQuery</a>

  </body>

</html>

 

编辑<script> 的 src 属性值 , 使其指向 jquery.js 文件 . 例如 , 如果 jquery.js 文件与 HTML 文件所有目录相同 , 则可写成 :

 <script type="text/javascript" src="jquery.js"></script>

 

可以从   Downloading jQuery   下载jquery.js .

document 准备加载时运行指定代码

许多javscript 程序员都采取出下的方式 :

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

 

然而, 使用这种方式 , 要想运行代码首先必须等待 document 加载完毕 . 如果页面中包含了许多图片 , 且页面没有加载完毕 , 则要想立即运行的代码将无法运行

为了避免以上问题,jQuery 采用了一种语句 , 检测 document 并等待其为操作做好准备 . 这就是所谓的 ready event

 $(document).ready(function(){

   // Your code here

 });

 

在ready event 中 , 添加了一个点击链接的处理函数 :

 $(document).ready(function(){

    $("a").click(function(event){

     alert("Thanks for visiting!");

   });

 });

保存你的HTML 文件 , 重新加载页面 , 点击页面上的链接 , 你将会在页面跳转之前得到一个弹出信息提示框

如果想阻止点击事件所触发的默认行为-- 跳转到其他页面 , 可以调动 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();

   });

 });

完整的实例

以下是完整一个HTML 文件 . 注意 jquery.js 文件引用于 Google 网络链接

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

   <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js " type="text/javascript"></script>

   <script type="text/javascript">

     $(document).ready(function(){

       $("a").click(function(event){

         alert("As you can see, the link no longer took you to jquery.com");

         event.preventDefault();

       });

     });

     

   </script>

 </head>

 <body>

   <a href=" http://jquery.com/ ">jQuery</a>

 </body>

 </html>

 

添加和移除CSS class

在head 标签中添加一些 CSS 样式

 <style type="text/css">

     a.test { font-weight: bold; }

 </style>

 

通过jquery 的 addClass 函数来添加 CSS class

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

 

现在你所有的a 元素都将会加粗 .

通过jquery 的 removeClass 函数来移除 CSS class

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

 

CSS允许为一个元素添加多个 class

 

特效

在jQuery 中 , 有几个生成特效的函数被提供用于使网页变的更具吸引 :

 $("a").click(function(event){

   event.preventDefault();

   $(this).hide("slow");

 });

 

现在, 你点击任何一个链接 , 该链接会慢慢地消失 ( 隐藏 )  

回调与函数

回调是一种作为其它函数的参数. 当主函数执行完成后 , 回调函数开始执行 .

还有一种重要的事情就是回调函数作为参数时是如何正确传递的.

不带参数的回调函数

如下:

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

 

注意  第二个参数是回调函数名( 不是字符串 , 也没有括号 ).  

带参数的回调函数

错误

这是一种错误的方式

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

 


这将无法工作, 因为它调用了

myCallBack(param1, param2)

 

并且它将返回值作为 $.get() 第二个参数.  

正确

创建匿名函数作为回调函数, 并调用带参的 myCallBack

$.get('myhtmlpage.html', function(){

  myCallBack(param1, param2);

});

 

当$.get 执行完后 , 两个参数将会被赋值

 

 

另外,

jQuery的攻略,快分享吧,很good!
http://www.ibole.cn/Static/Html/jQuery/index.html

 

http://www.ibole.cn/tags/jQuery

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值