jQuery使用总结 - jQuery组成和主要功能 1/4

Core jQuery

核心关注的两件事情:选择页面中元素(Selector)、对元素执行操作(Events Effects CSS)

jQuery UI

基于JQuery核心构建的界面库,主要归为如下3大类

Ø 效果 Effects—Enhanced effects beyond those provided by the core library

Ø 交互Interactions—Mouse interactions, such as drag and drop, sorting, and the like

Ø 部件 Widgets—A set of commonly needed controls, such as progress bars, sliders, dialog boxes, tabs, and so on

jQuery Pulgin

Extending jQuery takes one of two forms:

Ø ƒ Utility functions defined directly on $ (an alias for jQuery)

Ø ƒ Methods to operate on a jQuery wrapped set (what we’ve been calling jQuery methods)

clip_image002

上图将HTML的标准编写形式列出了,jQuery对于这些是很好的进行了支撑以完成各种功能

Core jQuery

这个的具体函数在jQuery 1.4.1 Cheat Sheet.chm这个文档中非常详细(jQuery 1.4.1 速查表)。

初次使用时,这个很有用。

核心关注的两件事情:选择页面中元素(Selector)、对元素执行操作(Events Effects CSS)

jQuery UI
包含内容

1. The interaction-helpers category, which forms the underlying core of the library, includes the following components:

Ø draggable

Ø droppable

Ø resizable

Ø selectable

Ø sortable

2. The higher-level widgets, which often build upon the foundation provided by the lower level components, include:

Ø accordion

Ø auto complete

Ø date picker

Ø dialog

Ø slider

Ø tabs

3. UI effects, which was once a completely separate sister library called Enchant. These effects produce different animations or transitions of targeted elements on the page.

下载jquery ui后,development-bundle目录包含的是按照具体的功能类别区分的js文件,这样如果只用某个功能,只要包含具体的就行,或者需要全部的功能,jquery-ui-1.8.4.custom.min.js就是合并雅压缩的版本,按需使用,控制了js在网络上的传递大小。Demos目录有具体的功能使用演示,可以做为开发和使用的快速参考。

选择部分模块使用时jquery.ui.core.js作为核心,是必须包含的,如我只想用button,那么包含的脚本为

<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.core.js"></script>

<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.widget.js"></script>

<script type="text/javascript" src="http://www.cnblogs.com/ui/jquery.ui.button.js"></script>

[当然具体的发布时对这些脚本可以使用工具压缩]

这个库中有两个我们常用的没有包含,不过jquery站点有很多的插件和扩展供下载,如下是比较好的两个

■ jQuery Treeview example—http://jquery.bassistance.de/treeview/demo/

■ jQuery Menu example—http://jdsharp.us/jQuery/plugins/jdMenu/

以上包含的这么多UI元素,不过有一个常用的并不在这里,表格元素;不用愁,在jQuery Plugin中有很多的表格插件。

http://code.google.com/p/xjplugin/ : Jquery flexigrid, contextmenu, tree等插件的功能演示

http://www.trirand.com/blog/ jqGrid

Theme

http://ui.jquery.com/themeroller 可以下载已有和选择定制主题下载,这个比较简单,其实就是不同的css文件相关图片资源等,按照约定放到具体的目录中然后页面包含这些css文件,即应用了新的主题。

对于插件,需要选择对应的主题,否则会不一样。

实例参考: http://jsfkit.codeplex.com

由于Core jQuery是整个的基础,以下的总结主要是围绕这个进行说明,UI和插件基本都是在这个基础上按照这个规范进行的。

posted @ 2010-10-12 22:19  2012  阅读(1972)  评论(0编辑  收藏  举报