学习前能吐槽一下吗?
看了下博乐推荐的文章,
个别人的哈,只是个别人的文章,
首先来个前言,其次来几个图,再次来个总结。
就上推荐了,只想说这尼玛都行?这不是浪费我们的时间和流量啊。
还有就是博客名字叫神马信息学院神马提高班多少期的,
你们发博客是为了打广告吗?还是为了有猎头去找你们?目的性太强了吧。
废话不多说,开始学习并记录,如有错误请指正。
一、Ajax如何工作?
1.Jquery引用
创建以下html页:
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>Demo</title>
</head>
<body>
<ahref="http://jquery.com/">jQuery</a>
<scriptsrc="jquery.js"></script>
<script>
//Your code goes here
</script>
</body>
</html>
在script元素中src属性必须指向jquery.js文件。如此文件和html不在同一目录,还需要写上路径。
2.文档准备好后执行代码
在浏览器完成文档加载后,为了确保代码的执行,很多javascript程序员在onload函数中写入要执行的代码:
window.onload = function(){
alert("welcome");
}
然而不幸的是,直到所有的图片(包括导航广告)完成加载后此代码才会执行。为了在文档准备好后尽快执行代码,jquery有一个准备事件:
$(document).ready(function()
{
//Your code goes here
});
在准备事件内部,你可以添加一个点击处理程序:
$(document).ready(function()
{
$("a").click(function(event){
alert("Thanks for visiting");
});
});
此时在文档中添加a元素并且导航指向http://www.baidu.com:
<a href="http://www.baidu.com">test</a>
运行html,点击test链接,会先弹出alert框,然后继续元素a的默认行为,跳转到导航指向的www.baidu.com。
对于click事件或者更多的其他事件,在事件处理程序中你可以调用event.preventDefault()来阻止默认行为:
$(document).ready(function()
{
$("a").click(function(event){
alert("Thanksfor visiting");
event.preventDefault();
});
});
重新运行html,点击test链接,会发现只弹出alert框,不会在执行默认行为的导航。
3.完整的例子
下面的例子是之前讨论的关于点击处理的代码,都是直接嵌入到html的body元素中。在实践中,通常最好是将你的代码写入单独的js文件中,并且通过页面的script元素的src属性加载它:
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>Demo</title>
</head>
<body>
<ahref="http://jquery.com/">jQuery</a>
<scriptsrc="jquery.js"></script>
<script>
//Your code goes here
$(document).ready(function()
{
$("a").click(function(event){
alert("Thanksfor visiting");
event.preventDefault();
});
});
</script>
<ahref="http://www.baidu.com">test</a>
</body>
</html>
4.新增或者移除一个html类
首先,新增一些样式信息到文档的head属性中,如下:
<style>
a.test{
font-weight:bold;
}
</style>
其次,添加addClass函数的调用:
$("a").addClass("test");
此段代码的效果是页面中所有的a元素都是字体加粗。
再次,移除所有的class,使用removeClass函数:
$("a").removeClass("test");
5.特殊效果
Jquery也提供了一些方便的效果来让你的网站能够脱颖而出。click例子如下:
$("a").click(function(event){
alert("Thanksfor visiting");
event.preventDefault();
$(this ).hide( "slow" );
});
二、回调和函数
不像其他编程语言,javascript可以让你自由传递函数并且延后执行。回调是一个函数,被作为另一个函数的参数并且再父类函数执行完才执行。回调是特殊的,因为它会等待自己的父类执行完毕才执行,在此期间,浏览器可以进行别的函数或者做其他各种各样的工作。
1.不带参数的回调
回到函数没有参数,可以这么传递它:
$.get("mypage.html",mycallback);
当get完成获取mypage.html页面,才会执行mycallback函数。
2.带参数的回调
执行带参数的回调是个棘手的事情。
举个错误的例子:
$.get("mypage.html",mycallback(param1,param2));
上面例子的错误是因为直接调用了带参数的mycallback,并且返回了mycallback的返回值作为get函数的第二个参数。实际上,我们要传递mycallback()函数给第二个参数,而不是传递mycallback(param1,param2)的返回值。
那么,如何传递带参数的mycallback()函数?
正确的做法是,使用匿名函数,延迟执行带参数的函数。匿名函数只执行一件事,调用带参数的mycallback函数。
$.get("mypage.html",function(){
mycallback(param1,param2);
});
当get已经完成取得mypage.html页面,会执行调用mycallback(param1,param2)的匿名函数。
关于带参数的回调函数,我理解的是其实就是传递的函数的地址。