<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
自从有了小弟，麻油四便有些享受做老大的优越感。
不过，眼看小弟们不几日也学会了写页面，麻油四开始有些危机感。
做老大要有做老大的觉悟。
他心想，该研究研究新东西了 --- 页面已经会做了，那就学Javascript吧。
网络时代，知识距你仅有几个链接。
点点鼠标，不多时，麻油四就对 Javascript 有了些认识。
对于页面来说，Javascript就像木偶戏中那些提木偶的线。
通过线，可以让木偶动起来。
通过Javascript，可以让HTML动起来。
很久很久以前，人们直接用DOM接口手写Javascript。
那时的Javascript往往庞杂混乱，需要漫长的学习过程。
更要命的是，不同浏览器间的提供给Javascript的接口并不完全兼容。
这不大不小的兼容性问题，常让人顾此失彼，疲于奔命。
自从Gmail引发Ajax风潮后，一些先行者们站了出来，于是便有了许多Javascript库。
第一个流行起来的Javascript库是Prototype，但由于设计理念的问题，渐渐有些没落了。
现在网上流行当属：jQuery, Mootools, Dojo, Ext JS。
jQuery风头最盛，其口号是“写的少，干的多”（Write Less, Do More）。
麻油四只学最红，不学最对。
他找到一本全中文的jQuery手册 链接 ，看了起来。
Javascript，写在网页的script的标签中，一般习惯于将script标签放在网页head区。
使用jQuery需要先引入jQuery脚本。
Google提供了AJAX 库 API , 可以直接在页面中这样写。
网页加载完后,再执行代码
$(function(){
alert(1)
})
想操纵网页中的元素，往往要等页面加载完毕才能操纵。
在jQuery中选取元素和CSS很类似，可以用CSS选择器。
麻油四边学边写了一个网页，来测试jQuery的各种效果 链接 。
最常用的CSS选取器当属id选择器了，比如这样一段HTML:
<div id="css_select_1">唉,人生...</div>
在jQuery中可以这样选择它 $('#css_select_1')
选中元素是为了操纵元素，这里就修改它的CSS样式。
<script>
$('#css_select_1').css({border:'3px dotted #f00'})
</script>
id选取器用来选取单个元素，而class选择器用来选取一批元素。
<div class="who_are_you">谁是伊人</div>
<div class="who_are_you">伊人是谁</div>
<script>
$('.who_are_you').text(Date()).css({background:'#369',color:'#fff'})
</script>
text函数是用来设置div中显示的文本，Date()的是返回日期。
这里演示了jQuery的招牌卖点 --- 链式操作。
这里可以看到 text 函数调用后，可以直接再用 .css 来调用 css 函数。
jQuery中很多函数都可以这样做，你可以尽情的点点点下去。
当操作比较多的时候，你可以采用如下的排版，让代码看起来更清晰。
$('.who_are_you')
.text(Date())
.css({
background:'#369',
color:'#fff'
})
.fadeOut('slow',function(){
$(this).fadeIn('slow')
})
和CSS一样，jQuery也可以按照元素名称进行选择，比如
按照元素名称进行选择常与其他选择器配合使用，比如选择id为content元素下的p标签。
$("#content p")
手册中还有CSS选择器的诸多用法，比如可以用 p:first 选取第一个p元素，等等。
在引用了jQuery的页面，可以直接利用Firebug运行调试这些Javascript，无需编辑网页源代码。
图:Firebug调试
页面要根据用户的行为作出相应。
比如鼠标移动时，点击时，按下键盘方向键时，在Javascript中称之为事件。
常用的事件有
click 鼠标点击
blur 失去焦点
focus 获得焦点
change 输入框内容改变
keypress 按下键
keyup 松开键
mouseover 鼠标悬停
mouseout 鼠标移出
mousedown 按下鼠标右键
mouseup 松开鼠标右键
submit 表单提交
有两种方式关联页面元素与事件。
第一种是直接在元素上绑定，比如
<input onchange="alert(this.value)" type="text"></input>
在元素上自己绑定事件是通过修改"on"+事件名的方式完成的,这里this代表当前元素。
这一行的意思是当输入框元素内容改变时，弹出框提示改变的内容。
在事件调用的代码中，返回false可以阻止默认行为，比如：
<form onsubmit="alert(1);return false;"> <input type="submit" value="提交"></input> </form>
这里的return false可以阻止表单提交。
另一种方式是配合jQuery选择器，批量选择元素并绑定事件。比如：
<button class="test">1</button> <a href="http://g.cn" class="test">2</button> <script> $(".test").click(function(){ alert(this.innerHTML) return false }) </script>
这里的this同样是代表当前元素，而innerHTML的元素的属性。
结合Firebug，有一个简单的方法可以查看这些属性，如图。
图:Firebug查看元素属性
接着看jQuery中用Ajax。
Ajax是无需刷新页面，便能从外部加载新数据的方法。
因为Javascript的安全限制，通常的加载方式只能访问当前域名的url。
有时，本地文件不能用Ajax方式访问其他的本地文件。为了方便调试，可以先下载一个微型的web服务器 链接 。
新建一个目录，将服务器复制到该目录。在此目录下新建2个文件，文件编码都是UTF-8。
文件 index.html 内容如下：
<!doctype html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> </head> <body> <div id="main"></div><button onclick="$('#main').load('body.txt')">加载</button> </body>
文件 body.txt 内容如下：
世人大多宁可看重满口谎话的伪君子，也不肯看重直言无忌的真小人。
运行服务器，访问 http://127.0.0.1 。
点击加载，可以看到main层中填充了从body.txt中读取的内容。
这就是Ajax，效果可在此预览 链接 。
load函数是最简单给让选中元素填充外部内容的方法。
除此之外，还有两个常用的Ajax函数封装 -- $.get 和 $.post 。
get和post的函数接口几乎一样，他的四个参数依次是
url 请求的url data 需要获取的数据 callback 回调函数 type 类型，可以为"xml", "html", "script", "json", "jsonp", 或 "text"
其中data，callback, type 都可以省略，或部分给出，只要顺序正确即可。
一般而言，读操作用get，写操作用post。
值得注意的是，除"script"和"jsonp"类型外，get操作在读取时会使用缓存。
想要强制刷新get，可以用ajax函数，比如：
$.ajax({
type: "GET",
url: "body.txt",
cache:false,
success:function(t){alert(1)}
});
事实上，get和post都只是对ajax进行的封装。
jQuery如此风行，它的显示效果函数功不可没。
其中最著名的当属 Sliding （滑入滑出） 和 Fading （淡入淡出）。
用法也一如既往的简洁
$("#thing").fadeOut(); //淡出
$("#thing").fadeIn(); //淡入
$("#thing").slideUp(); //滑出
$("#thing").slideDown(); //滑入
滑动效果还有一个额外的函数 slideToggle ，它类似一个开关，让元素在显示与隐藏之间用滑动的方式切换。
若是不需要花哨的效果，你可以用 hide（隐藏），show（显示），toggle（显示-隐藏切换）这3个函数。
若是需要更复杂的变形，可以试试animate，用法如下
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
第一个参数是变形后的最终显示的样式，第二个参数是变形的时间。
写Javascript，往往需要调试。
是最原始也最常用的调试方法是 alert 。
var test = "hello"; alert(test);
用alert，可以中断Javascript的运行, 并显示参数中的变量。
但是对于很Javascript中的字典对象来说，alert很不方便 -- 它只会显示 “[object Object]”。
再一次召唤 Firebug 大神。信Firebug，原地满状态复活 。
用上了Firebug，在会脚本中便多出一个名为console的对象，用法如：
var a={1:2},b={"test":a};
console.info(a, b)
图:Firebug的console.info
可以看到，在控制台中出现了可以点击的两个对象。点击后，就可以仔细观察对象的内容了。
如果只是输出日志的话，可以试试 console.log ，他支持字符串的格式化。
console.log("今天是", new Date().toLocaleDateString()); //输出 今天是 2009年9月1日
console.log("1+2=%s,2+3=%s",1+2,2+3); //输出 1+2=3,2+3=5
如果想在IE等其他浏览器下用console，可以试试 Firebug Lite。
在其他脚本之前，引入以下脚本，即可出现Firebug Lite。
<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
更简单的做法是，到 http://getfirebug.com/lite.html ，找到 “Firebug Lite as bookmarklet”下的 Firebug Lite 链接，将其添加到收藏夹。
以后，只要从收藏夹中点击它，便能在当前页面出现 Firebug Lite 。
Firebug还提供了更强大的断点功能，可惜一般人找不到它。
设置断点后刷新页面，即可让断点生效。
Firebug就介绍到这里。
再来看看IE浏览器。
IE6，7的调试工具不多，也不好用，常用的是 Internet Explorer Developer Toolbar，Companion.JS。
幸而，IE8自带了一个好用的调试工具，如图所示。
这个调试工具同样可以设置断点，观察变量。
有了这些强大的工具后，调试程序会简单很多。
麻油四磕磕绊绊，自学了很多有趣的东西，但对Javascript还有不少困惑。
便问阿牛有没有好一点教程，阿牛推荐了一本名为《Javascript权威指南》的书。
麻油四到图书馆一找，发现其厚如砖头，心中暗道，这么大一本我看要练个把月啊。
“还是算了，青春是献给花花草草的。”
银河的历史，又翻过了一页...