jquery示例

发表时间:2017-05-12 16:14:57 浏览量( 25 ) 留言数( 0 )

一、jquery特效

jquery吸引人的地方出了对原始的javascript进行封装之外,它还提供了一些非常实用的动画特效函数。比如:

show():这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

hide():隐藏显示的元素,这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

还有就是:slideDown(),slideUp(),fadeIn(),fadeOut()。

二、示例

我们经常见到下面这样的功能菜单:

attcontent/8201ca7a-446e-4381-93a5-77b248d722a0.png

如果直接使用javascript需要为每一个一级菜单都绑定函数,写起来比较麻烦,而且每一次修改这些菜单时,可能都需要修改javascript的代码,如果改用jquery实现,那就简单多了。我们可以简单的实现一下,先看看html的排版如下:

<div class="title">企业管理</div>
<div style="display: none;">
   <ul>
       <li>企业管理1</li>
       <li>企业管理1</li>
       <li>企业管理1</li>
   </ul>
</div>
<div class="title">人事组织</div>
<div style="display: none;">
   <ul>
       <li>人事组织1</li>
       <li>人事组织1</li>
       <li>人事组织1</li>
   </ul>
</div>
<div class="title">员工信息</div>
<div style="display: none;">
   <ul>
       <li>员工信息1</li>
       <li>员工信息1</li>
       <li>员工信息1</li>
   </ul>
</div>

使用jquery不需要修改html的代码,直接为每个一级菜单绑定事件就可以了。实现代码如下:

<script type="text/javascript">
$(document).ready(function() {
$(".title").toggle(
function() {
           
           $(this..next("div").slideDown("slow");
           
}, function() {
           
           $(this..next("div").slideUp("slow");
           
});
});
</script>

可见jquery不仅代码简洁,而且功能强大。有关jquery的更多内容我我们以后还会继续讲解的,有关html和javascript我们就讲到这里,下面大家可以阅读下面这个完整的网页排版,以巩固我们所学习的内容。

三、jquery插件

jquery本身的核心功能意见很强大了,但和所有流行的语言一样,如果仅仅只是本身功能强大还不行,还必须可以自由方便的进行扩展,jquery就是这样的一个框架了,所有网上还有很多jquery的插件,当你需要某个功能时,也许不需要你自己去开发,你可以先到网上看看有没有这样的实现。还有一些以jquery为基础的更加强大和完整的框架等等。如下面几个:

1、rlightbox

网址:http://ryrych.github.com/rlightbox2/

这是一个 jQuery UI 媒体盒(MediaBox),可以显示多种类型的内容,包括图像、视频(YouTube 或是 Vimeo)等。它拥有许多功能,实现高度定制化。在上面页面即可找到示例演示。

attcontent/41080661-e133-4ccc-92d4-d9939da7ffcd.png

2. Portamento

网址:http://simianstudios.com/portamento/

该 jQuery 插件使你可以轻松在页面添加滑动(流动)面板功能。

attcontent/3cea57a5-7b25-4c7e-9d4f-50aeef30bc75.png

3、jquery easy UI

网址:http://www.jeasyui.com/

这是一个支持ajax的完整的网页的实现,功能非常强大,使用却如此简单,强力推荐大家学习这个框架。

attcontent/d463f813-1614-4024-981a-4e36063bcb7e.png