jQuery2

王朝学院·作者佚名  2016-08-27  
宽屏版  字体: |||超大  

<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();

}

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有