jquery 怎么工作

2012-10-17

jquery 如何工作1、基础如果你以前没有jquery的使用基础，你可以跟着我的步骤来联系一下，首先在一个html中嵌

jquery 如何工作
1、基础
如果你以前没有jquery的使用基础，你可以跟着我的步骤来联系一下，首先在一个html中嵌入如下的代码：

<!doctype html><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>

编辑“src”标签，将内容修改你你自己电脑上存放的jquery.js的路径，如果你还没有下载，点击这里开始下载。http://docs.jquery.com/Downloading_jQuery
2、在你的document文件准本完成之后开始加载代码
首先，大部分的程序员最终要做的是在程序中加入自己的代码，如下：

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

这段代码就是在页面加载的时候就能够去调用它。可是问题来了，javascript代码只有在页面的图片和广告栏都加在完毕的时候才会被调用的。这就是问什么要在这里使用“window.onload”的原因，在使用他的时候会在‘document’没有加载完毕的时候就调用其后的代码。为了解决这些问题，jquery有一个简单的语句来检查并等待，指导他准备被操作，简称为ready事件：

 $(document).ready(function(){   // 这里写上你自己的代码 });

在这个ready事件里面对链接写一个click事件。

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

保存你的html文件，并在浏览器里面重新加载一遍。点击链接，页面会在跳转到百度之前弹出一个对话框“Thanks for visiting!"”
对于这个click和其他更多的事件，可以在这里阻止他的执行，例如在通过调用event.preventDefault()：

 $(document).ready(function(){ $("a").click(function (event){alert("正如你所看到的，点击链接以后并不会跳转到百度了。");     event.preventDefault();}) })

3、完整的例子
下面的代码就是上面我们所讲的完整的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><script type="text/javascript" src="../jquery-1.4.4.min.js"></script><script  type="text/javascript"> $(document).ready(function(){ $("a").click(function (event){alert("正如你所看到的，点击链接以后并不会跳转到百度了。");     event.preventDefault();}) })</script></head><body><a href="http://www.baidu.com">百度</a></body></html>

4、添加和一处一个html类
首先，添加一个style的描述信息在<head>标签体里面，例如：

<style type="text/css">    a.test { font-weight: bold; } </style>

接下来，添加一个addClass来调用你的脚本：注意要放在ready事件中。

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

好了，在页面中所有的a元素都是粗体了。
如果要移除这个class，使用removeClass：

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

5、特殊效果
把上面对应的代码换成下面的：

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

点击链接，你会看到他自己逐渐的消失了。
6、回调函数
回调就是一个函数被作为参数传递到另一个函数，并且在其父函数执行完之后才能执行。
无参数的回调

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

标记：第二个参数只是一个简简单单的函数名字。在javascript中，函数可以像一个引用变量来传递，并在稍后执行。
有参数的回调
在这里你先问一下自己：“如果有参数需要传递你该怎么办？”
错误的做法：

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

这样子做是不会起任何作用的，因为他调用了

myCallBack(param1, param2)

然后把返回的结果作为第二个参数传递给了$.get()。
正确的做法：

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

热点排行

Bad Request.

Web前端

jquery 怎么工作