第10章-网页设计 jQuery.ppt

1. 列表中的导航菜单应用5 效果图如下： 2. 网页选项卡的应用1 2. 网页选项卡的应用2 2. 网页选项卡的应用3 效果图如下： 小结 本章从jQuery的基本概念入手，首先介绍了jQuery库和引入方法，通过简单的小示例，对jQuery在页面中的功能应用有一个大致的介绍。其中选择器是jQuery核心，其语法与CSS选择器类似，通过实例与理论相结合的方式，详细介绍了jQuery中的选择器语法和使用技巧。最后通过大量访问或设置页面元素的方法，学习了在页面中如何控制DOM元素（访问元素、创建节点元素、插入节点、复制节点、替换节点、包裹节点、遍历节点、删除元素）。 此外还介绍了jQuery中的事件（页面载入、绑定、切换、移除、触发等）、动画（显示隐藏、滑动、淡入淡出、自定义动画）和jQuery UI插件（交互性插件、微型插件）的相关内容。这些概念在今后的网页制作中都经常使用，希望能较好地掌握。 作业 1 思考题 1） 请总结jQuery的选择器与CSS中的选择器在使用上有何异同。 2） 请上网查阅相关资料，思考jQuery是否能操作本地资源。 * * * 2. 移动位置动画 修改animate()方法中的params还可以动画效果移动页面中的元素。 3. 队列中的动画 所谓“队列”动画，是指在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成了动画“队列”，产生“队列”后，动画效果便按“队列”的顺序进行展示。 4. 动画停止和延时 停止语法格式：stop([clearQueue], [gotoEnd]) 该方法的功能是停止所选元素中正在执行的动画，其中[clearQueue]是一个布尔值，表示是否停止正在执行的动画，另外一个可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画。 延时语法格式：delay(duration, [queueName]) 该方法的功能是设置一个延时值来推迟后续队列中动画的执行，其中参数duration为延时的时间值，单位是毫秒，可选参数[queueName]表示队列名词，即动画队列。 jQuery UI侧重于用户界面的体验，根据其体验角度的不同，主要分为以下三部分： （1）交互（Interactions）在该部分中，展示一些与鼠标操作相关的插件内容，如拖动（Draggable）、放置（Droppable）、缩放（Resizable）、复选（Selectable）、排序（Sortable）等。 （2）微件（Widgets）该部分包括一些可视化的细小控件，通过这些小控件，可以极大优化用户在页面中的体验度，如折叠面板（Accordion）、日历（Datepicker）、对话框（Dialog）、进度条（Progressbar）、滑动模块（Slider）、标签页（Tabs）等。 （3）效果或动画（Effects）该部分包括一些动画效果插件，使我们的动画不再拘泥于animate()方法，可以通过该部分的插件，实现一些复杂的动画效果。在该部分中，改进后的动画方法如show()、hide()、toggle()等。 10.6 jQuery UI插件 10.6.1 jQuery UI交互性插件 1．拖曳（Draggable） Draggable（拖曳）插件能使请求的对象拖动，通过这个插件，可以使用DOM元素跟随鼠标进行移动，通过设置方法中的option选项，实现各种各样的拖动需求。 语法格式：draggable(options) 2．放置（Droppable） 在jQuery UI中，除使用Draggable（拖曳）插件进行拖曳对象外，还可以通过 droppable（放置）插件“存放”拖曳的对象，即类似网上商城中购物车的效果。。 语法格式：droppable(options) 3．排序（sortable） 在jQuery UI中除拖曳、放置指定元素外，还可以通过sortable（排序）插件将有序列的标记，按照用户自己的想法任意拖曳其所在位置，形成一个新的序列，从而实现拖曳排序的功能。 语法格式：sortable(options) 其中，选项options所调用的参数与插件draggable中的options参数有很多相似之处。需要说明的是参数item，该参数用于申明在页面中哪些元素以拖曳的方式进行排序。如下列代码： $(element).sortable(“option”, “items”, ‘li’); 说明在页面中有option、items、li标记的元素可以通过拖曳的方式进行排序，如果不声明，则默认全部的表项型元素都可以。 10.6.2