jQuery入门教程之一
时间：2009-10-28 来源：SSVFDN 作者：SSVFDN 点击数：32
jQuery是一个优秀的Javascript框架，利用原始的javascript完成任务中的任一个，都需要数十行的代码。可是在jQuery的创造者为了使这些常见任务变得简单而特意创造了该库存。
jQuery重点是放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS会很清楚选择器的威力，通过元素的特性或元素在文档上的位置去描述元素组。有了jQuery就能够利用现有知识去发挥选择器的威力，在很大程序上简化javascript代码。
开始教程之前我需要下载一个jQuery库(js文件) (http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=)
jQuery手册(http://code.google.com/p/jquery-api-zh-cn/downloads/list)下载这个jQueryDocXML2CHM-090223.zip最新的
下载jQuery库文件后就可以打开你喜欢用的编辑器了~~因为本人一直网站开发所以用的是DW(Dreamweaver CS4)，如果你也是用这个DW就可以去这里下载DW-jQuery的插件有适合的提示补全功能(http://code.google.com/p/jquery-api-zh-cn/downloads/list)对应自身的DW版本进行下载安装
费话不多开始正式教学·
jQuery使用美元符号$来返回一个jQuery对象，然后我们就可以使用jQuery提供的API(就是上面要你们下的手册有介绍的)
OK开始我们的第一个jQuery代码嘛~~
要使用jQuery，首先在HTML文件中调用jQuery文件，调用这个文件就跟调用别的JS文件一样的：
| <script src="jquery-1.3.2.min.js" type="text/javascript"></script> |
现在你就可以在页面里随心所欲地使用jQuery提供的功能了。先来一个最简单的应用：
| $(document).ready(function(){ alert("Hello,word") }) |
在文档载入成功以后弹出提醒“Hello,word”
(1)找到你~
| $("#Id_name"); $(".Id_name"); $(".Id_name p"); $("#Id_name,.Id_name"); |
$("#Id_name")得到id标签为Id_name的元素
$(".Class_name")得到class标签为Id_name的元素
$(".Id_name p")得到class标签为Id_name下的P标签元素
如果你熟悉CSS，相信你会觉的这么写法很眼熟~~没错jQuery就是通过这种方式来找到Dom对象里面的元素跟CSS选择器很相似
(2)显示，隐藏
相对显示与隐藏一个DIV是大家最常用的效果~所以我从这实例开始讲~
show() 显示隐藏的匹配元素
hide() 隐藏显示的元素
toggle() 切换元素的可见状态。[如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。]
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
下面就是演示的网址~~大家可以点开看看效果~
代码如下
| <script> $(document).ready(function(){ $("#show").click(function(){ //点击ID为show的元素 $(".show").show(800); //以800毫秒时间显示出class为show元素 }) $("#hide").click(function(){ //点击ID为hide的元素 $(".hide").hide() //隐藏class为hide元素 这里没有定时间就是立刻 }) $("#toggle").click(function(){ //点击ID为toggle的元素 $(".toggle").toggle("slow") //显示或隐藏class为toggle元素 }) }) </script> |
那也许有可能就要问如果我想写出网页上比较常用的切换效果应该怎么写呢？
OK那我们看下这个代码
| <script> $(document).ready(function(){ $(".tab div:first").show() //显示nav元素下的第一个DIV $(".nav ul li").each(function(i){ $(".nav ul li").eq(i).click(function(){ //记录点击的是第几个li标签 如果这里点击的是第2个LI $(".tab div").hide() //nav元素下的全部div元素全部隐藏 $(".tab div").eq(i).show() //显示出tab元素下的第几个DIV 那么这里也像显示第2个DIV 这里的i就是这个2值 }) }) }) </script> |
$(".tab div:first") 这里的:first就是匹配第一个子元素也就是.tab下的第一个div元素
:last-child 是匹配最后一个子元素
当然少不了这里的演示网页了
| 来顶一下 |
