bob体育官方平台
jQuery学习——入门篇(附实例代码)

指南/基础 这是一个基础指南,旨在帮助你开始使用jquery。jquery给予你常见问题的解决方法。如果你尚未建立你的测试页面,我建议你创建一个含有下列内容的HTML页: 程序代码复制代码 代码如下:

demo 0,jQ的关键程序:

//Yourcodegoeshere jQuery 修改script标签的src属性指向到你的jquery.js。例如,如果你的jQuery.js与你的HTML文件在同一目录,你可以这样: 程序代码 文档载入时运行代码 首先,大多数JavaScript程序员会用类似代码: 程序代码 window.onload=function(){...}. 访问HTML文档的元素,必须先载入文档对象模型。当window.onload函数执行的时候,说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。 对于此,jquery提供了一个"ready"事件,你可以使用以下的代码片段: 程序代码 $.ready; $意思是说,获取文档对象,$.ready意思就是说,获取文档对象就绪的时候。 上面这段代码的意思是检查文档对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)---这是我们想要的。因此将上面的代码片段粘贴到你测试页面的脚本区吧! 鼠标点击时的触发 首先,我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码: 程序代码 ${ alert; 保存HTML文件,然后刷新一下页面。点击某个超链接,页面将弹出警告对话框。 增加CSSClass 另外一个事情就是,一个共同的任务:增加或移除元素的cssclass,例如: 程序代码 $; $.removeClass; 如果你已经在页面头部加入了: 程序代码

程序代码
window.onload = function(){ ... } .
访问HTML文档的元素,必须先载入文档对象模型(DOM)。当window.onload函数执行的时候,说明所有东西已经载入,包括图像和横幅等等。要知道较大的图片下载速度会比较慢,因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果,这样就花费了很长的等待时间,这不是我们想要的。

那么当你调用了addClass函数后,所有超链接的字体将变成粗体。 特效 EffectsModule提供了一系列好用的特效。 加上下面代码: 程序代码 ${ $; returnfalse; }); 现在,只要你点击超链接,超链接就会慢慢的消失。“returnfalse"表示保留默认行为,因此页面不会跳转。 回调 所谓回调就是父函数执行完成后,自身能够作为返回值传递到另一个函数的函数。回调功能的特别之处在于,出现在“父函数"后面的函数可以在回调函数执行前执行。 另外一个重点是要知道如何正确运用回调,我就常常忘记了正确语法。 一个不带参数的回调应该这样写: 程序代码 $.get('myhtmlpage.html',myCallBack); 注意第二个参数是一个简单的函数名 那么带参数的回调该怎么写呢? 错误的写法,下面这样写是不行的: 程序代码 $.get('myhtmlpage.html',myCallBack; 正确的写法: 程序代码 $.get('myhtmlpage.html',function(){ myCallBack; 这样就实现了回调一个带参函数的功能。 后记 到这里,也许你应该去看看其余的文档了。里面包括更多的指南-它很全面,涵盖了jquery各个方面。如果大家有问题,请放心的给我发Email。 当然,你也可以看看利用jQuery做的多种DEMO。

对于此,jquery提供了一个"ready"事件,你可以使用以下的代码片段:
程序代码
$(document).ready(function(){//获取文档对象就绪的时候,不需要等待图片等下载完成。
// 你的代码
});
$(document)意思是说,获取整个网页文档对象(类似的于window.document),$(document).ready意思就是说,获取文档对象就绪的时候。
上面这段代码的意思是检查文档对象直到它能够允许被操作(译者注:这样做比window.onload()函数要快的多,因为只要文档对象载入完成就能够执行代码了,而不需要等待页面中的图片下载是否已经完成)---这是我们想要的。好了 ,其他的也不多说了,我们开始来用jQ写几个简单的例子。

1,demo1: --鼠标点击时的触发
首先,我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码:
程序代码
$("p").click(function(){//获取所有段落p的对象,为其加上点击事件,需要加在readey中

// 你的代码

});

2,demo2:--增加 CSS Class
另外一个事情就是,一个共同的任务:增加或移除元素的css class,例如:
程序代码
$("a").addClass("test");
$("a").removeClass("test"); //样式的切换可以通过 $("p").toggleClass("selected");

3,demo3:--show( )和html()的使用

$("a").addClass("test").show().html("foo");//jquery方法可以连写

// how( ):显示隐藏的匹配元素。

//html("info"):设置每一个匹配元素的html内容。

4,demo4:--特效hide()

$("a").click(function(){

$(this).hide("slow");//对象慢慢的消失、隐藏

return false; //表示不会跳转,等同js

});

5,demo5:---收缩展开功能

$(document).ready(function(){

$("#head").click(function(){

$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );

});// slideToggle(speed, callback)高度变化切换可见性,完成后可触发一个回调函数

});// speed "slow", "normal", or "fast" 也可以指定一数值

6,demo6:--appendTo的用法

{$("#head2").click(function()

{$("<input type='text' name='ddd' id='ddd' value='hello,cssrain..' ><br>").appendTo("#ccc");});}

<input type="button" name="head2" id="head2" value="appendTo" >

<div name="ccc" id="ccc" >看这里的变化</div>

//appendTo():把所有匹配的元素追加到另一个、指定的元素元素集合中,即增加子节点

//append():为某元素增加子节点

7, demo7:--表格隔行变色, 鼠标滑过变色,点击变色.

代码解释:

例子中我已经把 解释放上去了,这里就不再贴注释了。

返回顶部