JS技术

JQuery的工作原理_Javascript教程

字号+ 作者:H5之家 来源:H5之家 2015-09-17 17:09 我要评论( )

JQuery的工作原理,学习JQuery的工作原理,JQuery的工作原理,查看JQuery的工作原理,前言:我最近在做一个项目,需要用到ajax,我以前做ajax项目,已经有很多年了,

前言:

我最近在做一个项目,需要用到ajax,我以前做ajax项目,已经有很多年了,jquery还不成熟,需要自己编写大量的Javascript代码。
最近发现jquery很成熟了,我看了jquery官方的document,我想,如果没有人翻译过,我打算边看文档,顺道边翻译。

如果有人发现已经有人翻译过了,劳烦通知一下,我就不做重复劳动了。

这里先提供入门章节内容。 

===========================================================================

 

教程:JQuery如何工作

原文地址: :How_jQuery_Works
原文作者: John Resig.

目录

1.Query基础

2.页面加载完成时运行代码

3.完整示例

4.增加和删除css样式

5.特效

6.回调函数

 

jQuery: 基础

<!doctype html>

<html>

 <head>

    <meta charset="utf-8">

    <title>Demo</title>

 </head>

 <body>

    <a href="">jQuery</a>

    <script src="jquery.js"></script>

    <script>

     

    </script>

 </body>

</html>

 <script src="jquery.js"></script>

页面加载完成时运行代码

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

 $(document).ready(function(){

   // Your code here

 });

 $(document).ready(function(){

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

     alert("Thanks for visiting!");

   });

 });

 $(document).ready(function(){

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

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

     event.preventDefault();

   });

 });

完整示例

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

   <title>jQuery demo</title>

 </head>

 <body>

   <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>

增加和删除css样式

 <style>

    a.test { font-weight: bold; }

 </style>

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

所有超链接会被加粗。

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

 

*

 Edit®

特效

jQuery提供了一组特效,使用这些特效可以让你的网站脱颖而出,你只需要将上面的测试文件添加如下代码就可以进行测试:

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

   event.preventDefault();

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

 });

如果你点击超链接,你所点击的超级链接会被隐藏。

回调函数

回调函数是指父方法运行通过后传递参数并且进行调用的函数。回调函数的特殊之处在父函数可以在回调函数运行之前运行。另一个重要的点是要知道如何正确的传递回调。这也是我常常忘记的正确语法。

无参数回调

你可以使用下面的代码来设定回调参数。

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

包含参数的回调

错误的方式

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


这种方式并不会被调用,因为它调用了

myCallBack(param1, param2)

正确的方式

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

 myCallBack(param1, param2);

});

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery的基本知识_Javascript教程

    jQuery的基本知识_Javascript教程

    2015-10-01 13:20

  • jquery伸缩菜单_Javascript教程

    jquery伸缩菜单_Javascript教程

    2015-10-01 08:21

  • jQuery技巧总结_Javascript教程

    jQuery技巧总结_Javascript教程

    2015-09-26 12:04

网友点评