ASP  jQuery框架简单应用
本节将会通过一些简单的示例来演示jQuery框架的应用,首先是如何在页面中为HTML标记添加和删除CSS样式。
jQuery提供了addClass和removeClass两个方法对CSS进行操作,其中addClass()可以为每个匹配的元素添加指定的类名,removeClass()可以为每个匹配的元素移除指定的类名。如下代码演示了具体的使用:
<SCRIPT LANGUAGE="JavaScript">
    $(document).ready(function(){
        $("a").mouseover(function() {
        $(this).addClass("lighter");  //当鼠标移到每个a标记上时应用lighter样式
  });
  $("a").mouseout(function() {
        $(this).removeClass("lighter"); //当鼠标离开每个a标记上时取消lighter样式
  });
});
  </SCRIPT>
 
图7-3  使用jQuery应用CSS样式
如图7-3所示即为使用上述代码后的应用效果。这里要注意,由于$(this)会返回选择的当前
对象。而通过$("a")则是给所有链接对象进行操作,mouseover在鼠标移到上面时执行,mouseout会在鼠标离开后执行。下面列出图7-3所示效果中所需的样式及其他代码:
<style  type="text/css">
.lighter{
padding:5px;
border:2px dashed #ff0000;
}
</style>
<fieldset><legend>我的收藏夹</legend>
<h3><a href="www.webzcn" title="汇智科技">汇智科技</a></h3>
<a href="www.webzcn"><img src="hzlogo.bmp" border="0" alt="汇智科技"/></a>
</fieldset>
jQuery框架中还可以实现淡入淡出效果的效果,方法是调用fadeOut(speed,callback)通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#fadeOut1").click(function(){
      $("#fadeOut").fadeOut("slow",function(){alert("是不是下面这个层慢慢消失了!")});
    })
这里需要说明的是speed参数是一个整型表示动画时长的毫秒数值(如:1000),或者是"slow", "normal", or "fast"三者之一。
fadeIn(speed, callback)通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元
素的高度和宽度不会发生变化。用法和fadeOut一样,只不过是一个相反的过程。
fadeTo(speed,opacity,callback)把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。例如,下面语句将透明度设置为50%
$("#fadeTo1").click(function(){
      $("#fadeTo").fadeTo("slow",0.5,function(){alert("是不是下面这个层透明度变成50%了!")});
    })jquery框架原理
对于jQuery框架的其他内容,这里就不再介绍。jQuery框架是一个新兴的框架,但对于该框架的各种文档资料非常多,有兴趣的读者可以从网络上查看。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。