前言:
我最近在做一个项目,需要用到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);
});