jQuery 教程 + 效果
警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
.
jQuery 安装
把 jQuery 添加到您的网页如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<head><script src="jquery.js"></script></head>请注意，<script> 标签应该位于页面的 <head> 部分。
下载 jQuery有两个版本的 jQuery 可供下载：Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）
这两个版本都可以从 jQuery.com 下载。提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。
替代方案如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。谷歌和微软的服务器都存有 jQuery 。如需从谷歌或微软引用 jQuery，请使用以下代码之一：
Google CDN:
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script></head>亲自试一试提示：通过 Google CDN 来获得最新可用的版本：如果您观察上什么的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。
Microsoft CDN:
<head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script></head>亲自试一试提示：使用谷歌或微软的 jQuery，有一个很大的优势：许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery 语法
jQuery 语法实例$(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。$("#test").hide()演示 jQuery hide() 函数，隐藏 id="test" 的元素。$("p").hide()演示 jQuery hide() 函数，隐藏所有 < p> 元素。$(".test").hide()演示 jQuery hide() 函数，隐藏所有 class="db34-e277-748c-5c66 test" 的元素。
jQuery 语法jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()
美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action() 执行对元素的操作示例$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$(".test").hide() - 隐藏所有 class="e277-748c-5c66-e3f5 test" 的所有元素$("#test").hide() - 隐藏所有 id="test" 的元素提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
文档就绪函数在实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){--- jQuery functions go here ----});这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素获得未完全加载的图像的大小jQuery 选择器
在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取 < p> 元素。$("p.intro") 选取所有 class="748c-5c66-e3f5-31e8 intro" 的 < p> 元素。$("p#demo") 选取所有 id="demo" 的 < p> 元素。
jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$("[href]") 选取所有带有 href 属性的元素。$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：实例$("p").css("background-color","red");亲自试一试
更多的选择器实例
Paste_Image.pngjQuery 选择器参考手册jQuery 事件
jQuery 是为事件处理特别设计的。
jQuery 事件函数jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到 <head>部分的事件处理方法中：实例
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h4>This is a heading</h4> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body></html>亲自试一试在上面的例子中，当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )该方法隐藏所有 < p> 元素：
$("p").hide();单独文件中的函数如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：实例
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery_functions.js"></script></head>jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。亲自试一试
结论由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中把所有事件处理函数置于文档就绪事件处理器中把 jQuery 代码置于单独的 .js 文件中如果存在名称冲突，则重命名 jQuery 库jQuery 事件下面是 jQuery 中事件方法的一些例子：
Paste_Image.pngjQuery 事件参考手册。jQuery 隐藏/显示
隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！实例jQuery hide()演示一个简单的 jQuery hide() 方法。jQuery hide()另一个 hide() 演示。如何隐藏部分文本。
jQuery hide() 和 show()通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){ $("p").hide();});$("#show").click(function(){ $("p").show();});亲自试一试语法：$(selector).hide(speed,callback); $(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：实例
$("button").click(function(){ $("p").hide(1000);});亲自试一试
jQuery toggle()通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：实例
$("button").click(function(){ $("p").toggle();});亲自试一试语法：$(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery 效果参考手册。
jQuery 淡入淡出
实例jQuery fadeIn()演示 jQuery fadeIn() 方法。jQuery fadeOut()演示 jQuery fadeOut() 方法。jQuery fadeToggle()演示 jQuery fadeToggle() 方法。jQuery fadeTo()演示 jQuery fadeTo() 方法。
jQuery Fading 方法通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法：
fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() 方法jQuery fadeIn() 用于淡入已隐藏的元素。语法：$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeIn() 方法：实例
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow") $("#div3").fadeIn(3000);});亲自试一试
jQuery fadeOut() 方法jQuery fadeOut() 方法用于淡出可见元素。语法：$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeOut() 方法：实例
$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000);});亲自试一试
jQuery fadeToggle() 方法jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。语法：$(selector).fadeToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeToggle() 方法：实例
$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);});亲自试一试
jQuery fadeTo() 方法jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。语法：$(selector).fadeTo(speed,opacity,callback);必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeTo() 方法：实例
$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7);});亲自试一试
jQuery 效果参考手册。
jQuery 滑动
jQuery 滑动方法可使元素上下滑动。
实例jQuery slideDown()演示 jQuery slideDown() 方法。jQuery slideUp()演示 jQuery slideUp() 方法。jQuery slideToggle()演示 jQuery slideToggle() 方法。
jQuery 滑动方法通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：
slideDown()slideUp()slideToggle()jQuery slideDown() 方法jQuery slideDown() 方法用于向下滑动元素。语法：$(selector).slideDown(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideDown() 方法：实例
$("#flip").click(function(){ $("#panel").slideDown();});亲自试一试
jQuery slideUp() 方法jQuery slideUp() 方法用于向上滑动元素。语法：$(selector).slideUp(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideUp() 方法：实例
$("#flip").click(function(){ $("#panel").slideUp();});亲自试一试
jQuery slideToggle() 方法jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。$(selector).slideToggle(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是滑动完成后所执行的函数名称。下面的例子演示了 slideToggle() 方法：实例
$("#flip").click(function(){ $("#panel").slideToggle();});亲自试一试
jQuery 效果参考手册。
jQuery 动画
jQuery animate() 方法允许您创建自定义的动画。
jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。语法：$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：实例
$("button").click(function(){ $("div").animate({left:'250px'});});亲自试一试提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性 设置为 relative、fixed 或 absolute！
jQuery animate() - 操作多个属性请注意，生成动画的过程中可同时使用多个属性：实例
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });});亲自试一试提示：可以用 animate() 方法来操作所有 CSS 属性吗？是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 +=或 -=：实例
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });});亲自试一试
jQuery animate() - 使用预定义的值您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：实例
$("button").click(function(){ $("div").animate({ height:'toggle' });});亲自试一试
jQuery animate() - 使用队列功能默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。实例 1隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");});亲自试一试实例 2下面的例子把 <div> 元素移动到右边，然后增加文本的字号：
$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow");});亲自试一试
jQuery 停止动画
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
实例jQuery stop() 滑动演示 jQuery stop() 方法。jQuery stop() 动画（带有参数）演示 jQuery stop() 方法。
jQuery stop() 方法jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。语法$(selector).stop(stopAll,goToEnd);可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。下面的例子演示 stop() 方法，不带参数：实例
$("#stop").click(function(){ $("#panel").stop();});亲自试一试
jQuery 效果参考手册。
jQuery 函数
Callback 函数在当前动画 100% 完成之后执行。
jQuery 动画的问题许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow")speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。实例
$("button").click(function(){ $("p").hide(1000);});亲自试一试由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。
jQuery Callback 函数当动画 100% 完成后，即调用 Callback 函数。典型的语法：$(selector).hide(speed,callback)callback 参数是一个在 hide 操作完成后被执行的函数。错误（没有 callback）
$("p").hide(1000);alert("The paragraph is now hidden");亲自试一试正确（有 callback）
$("p").hide(1000,function(){ alert("The paragraph is now hidden");});亲自试一试结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用 callback 函数。
jQuery Chaining
通过 jQuery，您可以把动作/方法链接起来。Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
jQuery 方法链接直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。提示：这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。例子 1下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);亲自试一试如果需要，我们也可以添加多个方法调用。提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。例子 2这样写也可以运行：
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);亲自试一试jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。
jQuery MiniUI - 专业WebUI控件库。
它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。
使用MiniUI，开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。
产品定位：
快速开发WEB界面
使用效果：
缩短开发时间，减少代码量，提升用户体验
技术亮点：
快速开发：使用Html配置界面，减少80%界面代码量。
易学易用：简单的API设计，可以独立、组合使用控件。
性能优化：内置数据懒加载、低内存开销、快速界面布局等机制。
丰富控件：包含表格、树、数据验证、布局导航等超过50个控件。
超强表格：提供锁定列、多表头、分页排序、行过滤、数据汇总、单元格编辑、详细行、Excel导出等功能。
第三方兼容：与ExtJS、jQuery、YUI、Dojo等任意第三方控件无缝集成。
浏览器兼容：支持IE6+、FireFox、Chrome等。
跨平台支持：支持Java、.NET、PHP等。
功能特性：
控件类型：
如何快速适用
需要从官网下载框架包，通过手册进行学习和适用，很容易上手
下载后文件夹内容
使用步骤：
拖到项目管理中，通过demo中，参照各个控件的案例，拷贝到项目中
例如布局代码：
按照示例中的html代码，还有css和js的文件路径
运行展示效果
官网手册基本大众布局结构
例如表单效果：
拷贝html结构，注意css和js的文件路径
按钮示例：
多种样式进行选择
数据库
还提供了测试数据库，里面有一些表数据，可以关联控件，当做测试数据进行展示，调试更加真实
还提供两种sql语句，可以在sqlserver和mysql数据库中，动态的创建，数据结构
例如数据表格可以直接展示数据表中的数据
所以jQuery MiniUI是一个很强大而且很方便的前端框架，可以不用写一行代码就完成后台的整个界面设计，还有相关的动态效果，还可以供各个平台的后台程序员使用
学习资源：jQuery教程_jQuery视频教程|黑马程序员
发表评论