jquery入门

jQuery是一个优秀的Javascript框架。如果你曾经花过时间试着给页面增添动态功能，就会发现经常要遵循这样一个模式：选择一个元素或一组元素，然后以一种方式对其进行操作。你可以隐藏或显示元素，给元素增加css类，使元素活动起来，或者修改元素的特性。利用原始的javasricpt完成这些任务中的任何一个，都会需要数十行代码。jQuery的创造者为了使这些常见人物变得简单而特意创造了该库。
首先我们需要的是知道jQuery能够做什么：
1.取得页面中的元素；
2.修改页面的外观；
3.改变页面的内容；
4.响应用户的页面操作；
5.为页面添加动态效果；
6.无需刷新页面即可从服务器获取信息；
7.简化常见的JavaScript任务；
 
   废话不多说，我们先来看第一个demo代码：Query使用美元符号$来返回一个jQuery对象，我们首先在HTML文件中调用jQuery文件：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

当然若你没有下载jquery-1.3.2.min.js，也可以引用网页的jQuery，代码如下：

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

1、显示跟隐藏元素：
相对显示与隐藏一个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>


<input id="show" type="button" value="show">
<input id="hide" type="button" value="hide">
<input id="toggle" type="button" value="toggle">
<div class="show" style="display: none;">
<p>1.jQuery是一个优秀的Javascript框架，利用原始的javascript完成任务中的任一个，都需要数十行的代码。可是在jQuery的创造者为了使这些常见任务变得简单而特意创造了该库存。</p>
</div>
<div class="hide">
<p>2.jQuery使用美元符号$来返回一个jQuery对象，然后我们就可以使用jQuery提供的API(就是上面要你们下的手册有介绍的)OK开始我们的第一个jQuery代码嘛~~</p>
</div>
<div class="toggle">
<p>3.jQuery重点是放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS会很清楚选择器的威力，通过元素的特性或元素在文档上的位置去描述元素组。有了jQuery就能够利用现有知识去发挥选择器的威力，在很大程序上简化javascript代码。</p>
</div>

这时候有的人就会问怎么出现文字替换的效果？
我们来看下面代码：

<script>
$(document).ready(function(){
  $(".tab div:first").show()
  $(".nav ul li").each(function(i){
    $(".nav ul li").eq(i).click(function(){
       $(".tab div").hide() //nav元素下的全部div元素全部隐藏
       $(".tab div").eq(i).show()
       })
    })
})
</script>

<div class="nav">
<ul>
   <li>标题1</li>
   <li>标题2</li>
   <li>标题3</li>
</ul>
<div class="tab">
<div style="display: block;">
<p>1.jQuery是一个优秀的Javascript框架，利用原始的javascript完成任务中的任一个，都需要数十行的代码。可是在jQuery的创造者为了使这些常见任务变得简单而特意创造了该库存。</p>
</div>
<div>
<p>2.jQuery使用美元符号$来返回一个jQuery对象，然后我们就可以使用jQuery提供的API(就是上面要你们下的手册有介绍的)OK开始我们的第一个jQuery代码嘛~~</p>
</div>
<div>
<p>3.jQuery重点是放在从HTML页面里获取元素并对其进行操作。如果你熟悉CSS会很清楚选择器的威力，通过元素的特性或元素在文档上的位置去描述元素组。有了jQuery就能够利用现有知识去发挥选择器的威力，在很大程序上简化javascript代码。</p>
</div>
</div>
</div>

$(".tab div:first") 这里的:first就是匹配第一个子元素也就是.tab下的第一个div元素
:last-child 是匹配最后一个子元素。