迦南美地家具:酷站代码新手教程:10个jQuery特效讲解
来源:百度文库 编辑:九乡新闻网 时间:2024/04/28 02:46:03
jQuery已经不是什么新鲜的事儿,记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西,也就没有认真去了解他了。直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的Javascrīpt框架。今天,这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程。这里不打算全文翻译,想以自己的语言来表达,或许这样更方便 大家理解/自己以后学习,也可能更准确地描述。
提示:教程中所用的jQuery 版本为1.2.3。这篇文章是为jQuery新手而写的。
先试试看? View jQuery Demos | Download Demo ZIP
jQuery是如何工作的?
首先,你需要下载一个jQuery版本,并将它 插入到标签内。然后,你将需要写函数来告 诉jQuery做些什么,下面的这个图表将告诉你jQuery是怎样工作的(点击图片,查看大图):
!
如何获取元素(Get the element)?
书写 jQuery 函数是一个非常简单的事(多亏了精彩的说明书)。关键是你要学习如何 获取你想要实现的效果的确切元素。
$("#header")
= 获取 id="header" 的元素$("h3")
= 获取所有$("div#content .photo")
= 获取里所有用class="photo"定义的元素$("ul li")
= 获取所以- 中
- 的元素
$("ul li:first")
= 只获取- 中第一个
1. 简单的下拉面板
让我们来开始这个简单的下拉面板特效吧(view demo),或 许你已经见过很多次,现在,自己试试吧:
当包含class="btn-slide"的元素被点击,它会下拉/上提
里的元素。然后切换到CSS中的class="active"到元素。.active 将会以CSS的方式打开/关闭出面板。$(document).ready(function(){$(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); });});
2. 简单的隐藏效果
如图,当右上角的上图标被点击时,内容被隐藏。效果可以看Demo (view demo)
当被定义为 的图片被点击,它会手找到父级元素