搜索
八天学会jQuery之新手篇D6web.cn整理自：新手教程（1）window.onload()是传统javascript里一个能吃苦耐劳的家伙。它长久以来一直被程序员们作为尽快解决客户端页面载入问题的捷径。但有时候等待页面载入还是不够快。只有少数大型的图片文件会被快速的载入，而大部分大型的图片文件会使window.onload()载入的很慢。所以当我为最近的网络营销创建一个web应用程序的时候我不得希望更快一点。有一些围绕window.onload()的新研究(比如brothercake)的代码是一种快速的方式。如果你需要，可以试试。但是如果你要做一些DOM(文档对象模型)javascript的编程，那么你为什么不试试jQuery，它就像你自己亲自制作一个蛋糕，并品尝它。jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready…他在页面加载完成之后执行。$(document).ready(function(){//Yourcodehere...});你可以用他来载入任何你想要载入的javascript，并不一定要保留jQuery的编码风格。让jQuery同时去执行多个函数也是可以的。你以前可能见过类似于init()之类的函数，你会发现jQuery会快很多。在以后的教程里我们会一遍又一遍的用到这个函数。OK你现在可以尝试一下代码：(记得把jQuery引用进你的页面哦，不记得的话看看上篇。)$(document).ready(function(){alert(ajaxa.cn!);});jquery新手教程(2)!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“”htmlxmlns=””headmetahttp-equiv=”Content-Type”content=”text/html;charset=gb2312″/titleStripingTable/title.src=”jquery-latest.pack.js”type=”text/.”/.!–将jQuery引用进来–.type=”text/.”$(document).ready(function(){//这个就是传说的ready$(“.stripetr”).mouseover(function(){//如果鼠标移到class为stripe的表格的tr上时，执行函数$(this).addClass(“over”);}).mouseout(function(){//给这行添加class值为over，并且当鼠标一出该行时执行函数$(this).removeClass(“over”);})//移除该行的class$(“.stripetr:even”).addClass(“alt”);//给class为stripe的表格的偶数行添加class值为alt});/.styletype=”text/css”th{background:#0066FF;color:#FFFFFF;line-height:20px;height:30px;}td{padding:6px11px;border-bottom:1pxsolid#95bce2;vertical-align:top;text-align:center;}td*{padding:6px11px;}tr.alttd{background:#ecf6fc;/*这行将给所有的tr加上背景色*/}tr.overtd{background:#bcd4ec;/*这个将是鼠标高亮行的背景色*/}/style/headbodytablewidth=”50%”border=”0″cellspacing=”0″cellpadding=”0″!color=”#008000″>–用class=”stripe”来标识需要使用该效果的表格–theadtrth名称/thth网址/ththQQ/ththEmail/th/tr/theadtbodytrtdajax之家/tdtd@ajaxa.cn/td/trtrtdajax之家/tdtd@ajaxa.cn/td/trtrtdajax之家/tdtd@ajaxa.cn/td/trtrtdajax之家/tdtd@ajaxa.cn/td/trtrtdajax之家/tdtd@ajaxa.cn/td/trtrtdajax之家/tdtd@ajaxa.cn/td/tr/tbody/tablepPS:飘飘说我的table没有thead,我知错了…/p/body/html这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？我们来看看，本来应该写成这样子的：$(“.stripetr”).mouseover(function(){$(this).addClass(“over”);})$(“.stripetr”).mouseout(function(){$(this).removeClass(“over”);})但是我们写成了：$(“.stripetr”).mouseover(function(){$(this).addClass(“over”);}).mouseout(function(){$(this).removeClass(“over”);})在jQuery中，执行完mouseover或者mouseout等方法之后，都会返回当前的对象，所以可以进行链式操作jquery新手教程(3)这个教程有点鸡肋，实际上用的不多，甚至根本就用不到，没明白作者为什么要设计这一章……今天的jquery教程是草草完成的.我想把一些东西放在这15天的前面简单的讲讲,这样以来就可以使一些js新手不至于被一堆代码搞的晕头转向.事实上我是在即将结尾的时候才做出的这个决定.目标我们要使用jQuery去创建一小段代码,这段代码会把一个页面所有的超链接转换并且伪装起来.为什么?一些下属经销商认为，一部分用户有足够的悟性发现会员链接，并能尽量避免通过点击URL链接直接进入浏览器，从而“欺骗”下属经销商脱离代理（假设购买行为已经发生）“老”办法有很多下属经销商千方百计的掩饰他们的链接,避免人们通过链接找到他们.这些伎俩涉及到.htaccess和服务器端的代码.但对于本教程,我会将重点放到”老学校”的javascript上:aonMouseOver=’window.status=””;returntrue;’onMouseOut=’window.status=”完毕”;returntrue;’href=””target=”_blank”>点我进入ajax之家，但状态栏显示的却是百度链接/a这段代码被用来在浏览器状态栏显示用户鼠标指向的链接地址.比如实际链接是=123,则可以在状态栏显示。问题你是一个很活跃的下级经销商,你可能会以疯狂的速度给很多个页面添加链接.并且还要给每个链接添加这种效果那么你肯定会厌倦的.假如有一天你要修改任务栏里显示的链接的时候估计你会疯掉的.jQuery的解决办法首先,我们想让javascript尽快的掩饰我们的链接所以我们应该先从这里开始:scriptsrc=”jquery.js”/scriptscripttype=”text/javascript”$(document).ready(function(){//codegoeshere});/script当DOM准备好的时候我们放在ready里的代码就开始执行了.接下来要给所有我们想伪装的链接添加一个class,class有助于jQuery帮我们找到需要伪装的链接而撇开其它不需要伪装的链接.title有两个作用:当鼠标划过链接的时候会有一个小小的盒状提示显示URL:并且同样的信息会显示在浏览器的状态栏(IEOnly).pahref=”=123″title=””class=”affLink”SuperDuperProduct/a/p告诉jQuery找到有class=“affLink”的链接$(‘a.affLink’)添加一个鼠标划过事件$(‘a.affLink’).mouseover(function(){window.status=this.title;returntrue;})简单的说:找到class=“affLink”的所有链接,当鼠标划过它们的时候改变浏览器状态栏信息为该链接title的内容.这个在FireFox并不能正常的工作,只是在IE里起作用.在FireFox的状态栏只是显示一个”Done”,或者更准确的说,鼠标划过超链接对状态栏并没有任何影响.我没有更多的浏览器测试.继续-mouseoutjQuery可以让我们用”链”的方式,像这样:$(‘a.affLink’).mouseover(function(){window.status=this.title;returntrue;}).mouseout(function(){window.status=’Done’;returntrue;});这点代码告诉jQuery改变浏览器状态栏信息,或者当鼠标不再停留在链接上时返回”Done”.如果你不适应jQuery的这种链的工作方式,那么你完全可以这样写:$(‘a.affLink’).mouseover(function(){window.status=this.title;returntrue;});$(‘a.affLink’).mouseout(function(){window.status=’Done’;returntrue;});这就看你了.把这些代码放到一起:scriptsrc=”jquery.js”/scriptscripttype=”text/javascript”$(document).ready(function(){$(‘a.affLink’).mouseover(function(){window.status=this.title;returntrue;}).mouseout(function(){window.status=’Done’;returntrue;});});/script最后的想法你们当中可能觉得今天的课程太简单了,有些还可能还是有点不太明白,因为你们不是二级经销商.jquery新手教程(4)这篇文章是关于安全邮件列表的，什么意思呢？自己仔细看，这篇jquery教程内容比较简