你的位置:首页 > Java教程

[Java教程]Ajax之jQuery 入门(2)


<head >

<style type="text/css">
        /*table中偶数行*/

.tabEven {
            background: #ff0000;
        }

        /*table中奇数行*/

tabOdd {
            background: #00ff00;
        }
    </style>

<script language="javascript" src="jquery-2.1.1.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
       $(document).ready(function() {
    
    $("#bodyText").hide();
    $("#bodyText").show("slow");
    $("#bodyText").effect("highlight",{}, 8000);
        });
    </script>

</head>

代码解析:

       按照jQuery 的语法,美元符号$是指它本身(而不是其他JavaScript 对象)。我们要向jQuery 传递document 对象,也就是当前文档。然后,使用jQuery 内置的ready()方法,当JavaScript 准备好开始处理事件时,会自动触发这个匿名函数,见后面几个步骤。


   $("#bodyText").hide();jQuery 最有用的特性之一是指定要操作的对象的方式。这种方式实际上很像CSS。在编写CSS 规则时,如果希望隐藏id 为bodyText 的元素,可能会编写下面这样的代码:#bodyText { display:none; }
  可以看到,CSS 比等效的JavaScript 命令简短得多:document.getElementById("bodyText").style.display = "none";
  这一步中代码行的作用与上面的标准JavaScript 和CSS规则的相同:它让浏览器不显示指定的元素它使用jQuery 内置的hide()方法,这个方法不需要参数。
  
      $("#textToggle").toggle(在这里,我们调用另一个jQuery 内置方法:toggle()。前一步中的代码在加载文档时运行,而这一行由某一事件触发——它在单击id 为textToggle 的元素时运行。需要通过参数向toggle()方法传递两个函数,它们分别包含在toggle()的两种状态下应该执行的代码。toggle()方法会记住它的当前状态,所以它会在被触发时自动切换到另一种状态(即运行另一个函数中的代码)。
  function() {
  $("#bodyText").show("slow");
  $("#bodyText").effect("highlight", {}, 2000);
  },
  这是传递给toggle()的第一个函数。首先,让jQuery 寻找id 为bodyText 的元素,这是在调用show()时要显示的元素。show()方法有一个参数:字符串"slow",这让jQuery 缓慢地显示出新元素。完成之后,调用jQuery UI 的effect()方法并传递以下3 个参数。
   "highlight",我们需要的效果。
   {},所需的效果选项。黄色淡出技术非常流行,所以黄色是默认颜色,因此这里不需要修改
  任何选项。
   2000,希望显示效果的速度。这个值以毫秒为单位,所以2000 意味着希望在两秒内显示淡出效果。图15-2 显示最初的淡出效果,图15-3 显示最终结果。
   

  function() {
  $("#bodyText").hide();
  }