jquery 如何工作

songjindian

浏览: 75627 次
性别:
来自: 河南

最近访客更多访客>>

spawnyy

半面油彩

昆山霸王

wang23086

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (37)

社区版块

存档分类

工作 jQuery JavaScript 百度 HTML

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);
});

分享到：

用js彻底解决中文传递乱码问题 | 严重: Dispatcher initialization failed j ...

2011-01-25 15:19
浏览 965
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论