jQuery入门

Posted on 2007-07-13 14:54 puras 阅读(362) 评论(1)  编辑  收藏
这是一份基础的指南,帮助你开始使用jQuery.如果你仍没有一个测试页,那么先用下面的代码创建一个HTML文件吧:
<html>
  
<head>
    
<script type="text/javascript" src="path/to/jquery.js"></script>
    
<script type="text/javascript">
      
// Your code goes here
    </script>
  
</head>
  
<body>
    
<href="http://jquery.com/">jQuery</a>
  
</body>
  
</html>
编辑script的src属性,让其指向你的jquery.js.例如,如果jquery.js在HTML文件相同的文件夹内,你可以这样写:
<script type="text/javascript" src="jquery.js"></script>


你可以从 Download jQuery 下载jQuery.

大多数的JavaScript程序员所做的第一件事就是在他们的程序中加上类似于这样的代码:
window.onload = function(){ ... }

上面的这段代码,是想在页面加载的时候执行一些脚本.问题是,这段JavaScript在所有的图片加载完之前是不会执行的.在开始的地方使用window.onload的原因是在第一次运行你的代码的时候,document还没有加载结束.
为解决这个问题,jQuery提供了一种简单的语句供你使用:
 $(document).ready(function(){
   // Your code here
 });
上面的写法将检测document,直到它可以被操作.将上面的代码加到测试页面中,剩余的例子将放置在这个回调函数中,所以它们将在document准备好工作时被执行.

首先我们将尝试一些link的click事件.在ready function中, 添加下面的代码:
$("a").click(function() {
    alert("Click the link.");
});

保存HTML文件,并在浏览器中重新加载.在链接上单击,将弹出个对话框,之后页面会跳转到http://jquery.com/".
对于单击或其他的一些事件,你可以在这阻止它的默认的行为,下面的指向jquery.com的链接,从事件句柄处返回一个false,将不会进行跳转.


另外一个普通的任务就是给原素添加或删除classes,如下:
$("a").addClass("test");

如果你在Header里添加了CSS信息,如下:
<style type="text/css">a.test { font-weight: bold; }
 
</style>

之后调用上面的addClass,所有的a标签元素现在都将是粗体的了.删除class,你可以使用removeClass.
在jQuery中,提供了一些非常容易使用的特效.将下面的代码添加到测试页中,改变单击的响应:
$("a").click(function(){
   $(this).hide("slow");
   return false;
 });

现在,如果你点击任何的链接,它将慢慢的消失.

jQuery使用一个非常有趣的方式来使它的代码短小而简单.对于那些熟悉的OO编程,这种方式显得更加的直接.
简单的说,jQuery中的每个方法都返回请求对象的本身,允许你把它的各个方法连接到一起,如下例:
$("a").addClass("test").show().html("foo");

上面的代码给a标签添加了一个class, 并将其在页面显示的内容改成foo.
他们每一个方法(addClass, show, html),都返回一个jQuery对象,允许你将方法应用于当前设置的元素上.

你可以采取更进一步的操作,添加或删除选择的元素,如下:
$("a")
   .filter(
".clickme")
     .click(
function(){
       alert(
"You are now leaving the site.");
     })
   .end()
   .filter(
".hideme")
     .click(
function(){
       $(
this).hide();
       
return false;
     })
   .end();


在测试页添加上如下的代码:
 <href="http://google.com/" class="clickme">I give a message when you leave</a>
 
<href="http://yahoo.com/" class="hideme">Click me to hide!</a>
 
<href="http://microsoft.com/">I'm a normal link</a>


修改jQuery选择的方法,使用end()来结束方法:
    * add(),
    * children(),
    * eq(),
    * filter(),
    * find(),
    * gt(),
    * lt(),
    * next(),
    * not(),
    * parent(),
    * parents(),
    * siblings().

可以查看Traversing API documentation中关于这些方法的详细说明.

Feedback

# re: jQuery入门[未登录]  回复  更多评论   

2007-10-08 18:32 by 牛牛
谢谢

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 47, comments - 124, trackbacks - 0, articles - 0

Copyright © puras