jquery教程

合集下载

jquery使用方法

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

jquery库用法

jquery库用法
jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和AJAX操作等常见任务。

它的使用方法可以分为以
下几个方面：
1. 引入jQuery库，首先，在HTML文档中引入jQuery库文件，可以通过在<head>标签中添加<script>标签来引入外部的jQuery库
文件，也可以使用CDN链接来引入jQuery库。

2. 文档就绪函数，jQuery提供了一个文档就绪函数，即$(document).ready()，用于确保文档完全加载后再执行jQuery代码，以避免在文档加载未完成时执行操作。

3. 选择器，jQuery使用CSS选择器来选择HTML元素，可以通
过元素名称、类名、ID等方式来选择元素，然后对选中的元素进行
操作。

4. 事件处理，jQuery可以通过事件处理函数来响应用户的操作，如点击、鼠标移入移出等，可以使用.on()方法或直接使用事件
处理函数来绑定事件。

5. DOM操作，jQuery提供了丰富的DOM操作方法，如添加、删除、替换元素，修改元素的属性和内容等。

6. 动画效果，jQuery可以实现各种动画效果，如淡入淡出、滑动、动画等，通过.animate()方法或预定义的方法来实现动画效果。

7. AJAX操作，jQuery封装了AJAX操作的方法，可以通过$.ajax()方法来发送异步请求，获取服务器数据并更新页面内容。

总之，jQuery库的用法涵盖了文档操作、事件处理、动画效果和AJAX操作等多个方面，可以大大简化JavaScript代码的编写，并提高开发效率。

希望以上内容能够全面回答你对jQuery库用法的问题。

jQuery入门教程(很不错)

jQuery入门[1]－构造函数/archive/2008/03/05/1091816.html jQuery优点◦体积小（v1.2.3 15kb）◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera）◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展，插件丰富jQuery的构造函数接收四种类型的参数：jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。

DEMO:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jQuery basic title><style type="text/css">.selected{background-color:Yellow;}style><script src="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script>head><body><h3>jQuery构造函数h3><ul><li>jQuery(expression,context)li><li>jQuery(html)li><li>jQuery(elements)li><li>jQuery(fn)li>ul><script type="text/javascript">script>body>html>将以下jQuery代码加入文末的脚本块中：jQuery("ul>li:first").addClass("selected");页面运行效果如下：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。

免费(jQuery Easyui)教程

目录1Accordion（可折叠标签） (4)1.1实例 (4)1.2参数 (5)2DateBox（日期框） (5)2.1实例 (5)2.2参数 (8)2.3事件 (8)2.4方法 (8)3ComboBox(组合框) (8)3.1实例 (8)3.2参数 (10)3.3事件 (11)3.4方法 (11)4Dialog（对话框） (11)4.1实例 (11)4.2参数 (13)4.3事件 (14)4.4方法 (14)5Messager（提示框） (14)5.1实例 (14)5.2方法 (17)5.3扩展 (18)6NumberBox（数字框） (18)6.1实例 (18)6.2参数 (19)7ValidateBox（验证框） (19)7.1实例 (19)7.2参数 (21)7.3方法 (21)7.4扩展 (21)8Pagination（分页） (22)8.1实例 (22)8.2参数 (23)8.3事件 (24)9Window（窗口） (24)9.1实例 (24)9.2参数 (27)9.3事件 (27)9.4方法 (27)10Panel（面板） (27)10.1实例 (27)10.2参数 (29)10.3事件 (30)10.4方法 (30)11Tabs（标签） (31)11.1实例 (31)11.2参数 (33)11.3事件 (33)11.4方法 (34)11.5标签面板属性 (34)12Tree（树） (34)12.1实例 (34)12.2参数 (37)12.3事件 (38)12.4方法 (38)13Layout（布局） (39)13.1实例 (39)13.2参数 (40)13.3方法 (40)14Datagrid（数据表） (40)14.1实例 (41)14.2参数 (44)14.3Column参数 (45)14.4事件 (46)14.5方法 (47)1Accordion（可折叠标签）1.1实例1.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$('#aa').accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa"border="true"><div title="Title1"icon="icon-save" style="overflow: auto; padding: 10px;"> <h3style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2"icon="icon-reload"selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2效果图1.1.3 扩展实例html代码中<div id="aa"border="true">此行也可写成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">，并且将js代码全部去掉，效果图是一样的。

jQuery教程PPT课件

.ห้องสมุดไป่ตู้
14
元素操作：
• remove() 删除节点例 jQuery(‘ul li’).remove() 也可在remove() 中添加过滤条件 jQuery(‘ul li’).remove(‘li[title!=菠萝]’)
• empty() 清空节点 jQuery(‘ul li:eq(1)’).empty() 清空第二个li 元素中的内容
注意与基本过滤选择器的区别
.
11
表单过滤选择器
• :enabled 选取所有的可见的元素 • :disabled 选取所有的不可见的元素 • :checked 选取所有的选中的元素(单选框、复选框) • :selected 选取所有的被选中的元素(下拉菜单)
.
12
表单选择器
• :input 选取所有的<input>、<textarea>、<select>、 <button>元素
• 事件冒泡如果想阻止冒泡的话可以用event.stopPropagation()
• 阻止事件的默认行为可以采用event.preventDefault() • 如果上面两个都想阻止可以直接在fn中return false • 事件对象的属性
event.type:获取事件的类型如click dbclick event.preventDefault():阻止事件的默认行为 event.stopPropagation():阻止事件的冒泡 event.target() 获取触发事件的元素 event.relatedTarget() 获取相关元素
.
8
可见性过滤选择器 • :hidden 选取所有的不可见的元素

菜鸟教程jquery语法

菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。

本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。

以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。

以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。

以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。

以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。

jquery定义方法

jquery定义方法如何使用jQuery定义方法jQuery是一款流行的JavaScript库，它提供了许多有用的方法和函数，使得JavaScript的编写变得更加方便和高效。

在jQuery中，我们可以定义自己的方法，这些方法可以像jQuery内置方法一样使用。

下面，我们将介绍如何使用jQuery定义方法。

使用jQuery定义方法非常简单，我们只需要使用$.fn.extend()方法即可。

这个方法接受一个对象作为参数，这个对象包含我们要定义的方法。

例如，我们要定义一个名为test的方法，可以这样写：$.fn.extend({test: function() {// 方法逻辑}});这个方法可以被任何jQuery对象调用，例如：$('div').test();这将在所有div元素上调用test方法。

方法参数当我们定义方法时，我们可以为方法指定参数。

参数可以是任何类型的值，例如字符串、数字、对象等。

在方法中，我们可以通过参数来控制方法的行为。

例如，我们可以定义一个名为highlight的方法，用于将元素的背景颜色设置为黄色。

我们可以将要高亮的元素作为方法的参数，例如：$.fn.extend({highlight: function(color) {return this.css('background-color', color);}});在这个方法中，我们将背景颜色设置为方法的参数color。

这个方法可以这样调用：$('div').highlight('yellow');这将在所有div元素上调用highlight方法，将它们的背景颜色设置为黄色。

方法链在jQuery中，方法链是一种非常有用的编码模式。

方法链允许我们在一个jQuery对象上执行多个方法，而不需要创建多个中间变量。

在方法链中，每个方法返回的是一个jQuery对象，这个对象可以用于链式调用下一个方法。

jQuery监听键盘事件及相关操作使用教程

jQuery监听键盘事件及相关操作使⽤教程⼀、⾸先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3、keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同⼀个按键⼆、获得键盘上对应的ascII码： $(document).keydown(function(event){ console.log(event.keyCode); }); tips: 上⾯例⼦中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,⽐如说上下左右键,分别是38,40,37,39；三、实例（当按下键盘上的左右⽅⾯键时） $(document).keydown(function(event){ //判断当event.keyCode 为37时（即左⽅⾯键），执⾏函数to_left(); //判断当event.keyCode 为39时（即右⽅⾯键），执⾏函数to_right(); if(event.keyCode == 37){ //do somethings; }else if (event.keyCode == 39){ //do somethings; } });实例研究：⽐如：⼩说⽹站中常见的按左右键来实现上⼀篇⽂章和下⼀篇⽂章；按ctrl+回车实现表单提交；google reader和有道阅读中的全快捷键操作...（以此提⾼⽤户体验）如果我们要实现ctrl+Enter就是ctrl+回车提交表单，可以这样：$(document).keypress(function(e) { if (e.ctrlKey && e.which == 13) $("form").submit();})//键盘操作$(document).keydown(function(event){ var e = event || window.event; var k = e.keyCode || e.which; switch(k) { case 37: //… break; case 39: //… break; } return false;});。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.本文是实战篇. 使用jQueryUI完成制作网站的大部分常用功能.二.前言经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI.如果你还在为了一个小小的特效而去下载并安装插件, 发现Bug还没有人替你解决. 记住插件是我们没有办法的最后选择.使用插件有太多的坏处:1.不利于维护2.增加页面大小3.不利于成员间交流共享,具有学习成本.4.不够健壮, 不能保证插件版本一直更新并修复所有问题.下面就引入今天的主角:jQuery UI三.jQuery UIjQuery UI 是jQuery 的一部分, 是在jQuery之上的一套专门用于UI交互的类库. 使用jQuery UI可以实现底层交互, 各种高级特效, 动画, 并且可定制主题.我们可以用它轻松的构建高度交互的Web应用程序.官方首页:/下载:/download示例和文档:/demos/皮肤:/themeroller/jQuery UI 的在线网站十分强大. 首先就是在下载时可以组装自己想要的功能定制下载:并且针对各种控件不仅提供了详细的参数说明和实例, 还可以随时更换实例的皮肤:本文主要讲解实例, 大家可以通过实例代码快速上手jQuery UI. 使用jQuery UI我们可以再不借助其他插件的情况下完成大部分页面应用, 说其是一个官方的超级UI插件也不为过. 包含所有功能的jQuery UI类库文件为188K, 启用Gzip压缩后是45K. 虽然较大但是一次加载全网站获益.而且45K大小在当今的互谅网时代还算可以接受.目前还没有jQuery UI的中文教程. 因为本文是实战篇, 所以不会仔细讲解基础内容. 在后面的章节中我会加入jQuery UI的基础教程.争取成为中文jQuery UI第一教程.四. 准备工作我将所有相关的文件, 包括各种类库文件, Theme模板放置在如下路径:/JSLib/此路径开通了目录浏览, 可以直接查找需要的文件. 目录组织结构按照本系列: (八) 插播:jQuery实施方案中介绍的方案组织.另外也可以从Google上引用文件, Google的CDN速度更快也更有保证, 参见: Google's CDN本文的实例的所有引用都使用WebConfig.ResourceServer 这个属性:public class WebConfig{public static string ResourceServer = @"/";}五.弹出层对话框弹出框是最常用最实用的功能. 先来看一下艺龙网上的一些应用场景.1. 艺龙网应用场景举例(1) 静态提示类弹出层. 弹出层的内容是固定的.(2) 动态提示类弹出层. 弹出层内容是根据事件源变化的.(3)遮罩类弹出层. 弹出时背景变灰并不可点击.2. 应用实例使用jQuery UI 的Dialog 组件. 我以轻松实现上面三种效果.Dialog组件的主要特点是可以拖动(Draggable), 可以改变大小(Resizable) .示例完整代码如下:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head id="Head1" runat="server"><title>jQuery UI - 弹出层应用实例Dialog</title><link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /><script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用==========*/ </script><style type="text/css"></style></head><body><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 共享同一个静态弹出层, 弹出层内容固定: </h3><div><span id="spanShowTip1">显示提示</span>   <span id="spanShowTip2">显示提示</span>  <span id="spanShowTip3">显示提示</span>   <span id="spanShowTip4">显示提示</span>  </div></div><br /><br /><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 每个弹出层内容不同, 弹出层内容存储在事件源的元素属性中: </h3><div><span id="spanShowDataTip1" data="颜色是红色">红色</span>  <span id="spanShowDataTip2" data="颜色是绿色">绿色</span>  </div></div><br /><br /><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;"> <h3>Demo. 弹出IFrame </h3><div><input type="button" id="btnShowIframe" name="btnShowIframe" value="显示弹出层"/></div></div><div id="divTip" title="自定义标题"><p>弹出层</p></div><div id="divIframe" title="iFrame弹出层" style="text-align:center;"><iframe src="" width="450px" height="230px"></iframe> </div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/(function(){//静态提示类弹出层("span[id^=spanShowTip]").css("cursor", "pointer").click(function(event){("*").stop();event.stopPropagation();var top = (event.target).offset().top + 20;var left = (event.target).offset().left;("#divTip").dialog("option", "position", [left, top]);("#divTip").dialog("open");});//动态提出类弹出层("span[id^=spanShowDataTip]").css("cursor", "pointer").click(function(event) {("*").stop();("#divTip").dialog("close");event.stopPropagation();var top = (event.target).offset().top + 20;var left = (event.target).offset().left;("#divTip").html((event.target).attr("data"));("#divTip").dialog("option", "position", [left, top]);("#divTip").dialog("open");});//遮罩类弹出层("#btnShowIframe").click(function(event){event.preventDefault();event.stopPropagation();("#divIframe").dialog("open");});//单击自身取消冒泡("#divTip, #divIframe").bind("click", function(event){event.stopPropagation();});//document对象单击隐藏所有弹出层(document).bind("click", function(event){("#divTip").dialog("close");("#divIframe").dialog("close");});});/*==========加载时执行的语句==========*/(function(){//初始化提示类弹出层("#divTip").dialog({show: null,bgiframe: false,autoOpen: false});//初始化遮罩类弹出层("#divIframe").dialog({show: null,bgiframe: false,autoOpen: false,width: 500,height: 300,draggable: true,resizable: false,modal: true});});</script></body></html>效果如图:静态提示类弹出层动态提示类弹出层:遮罩类弹出层:3.关键点讲解(1)计算弹出层位置提示类弹出框最重要的是计算弹出框的位置. 通过事件对象获取到事件源, 使用offset()函数计算事件源相对于document的位置:var top = (event.target).offset().top;var left = (event.target).offset().left;因为是相对于document, 即页面左上角的位置, 所以需要将弹出层放在Body元素中的第一层. 即父类就是body. 如果包含在其他元素中, 需要确定任何一个父类的position样式设置为了relative.计算出来的top和left是事件源的位置, 在此位置显示会将事件源对象遮盖住. 所以通常需要手工做一些偏移, 比如top+20.(2) 取消冒泡和浏览器默认行为如果我们为document对象绑定了单击后关闭弹出层的事件, 那么就一定要取消事件的冒泡. 使用event对象的stopPropagation()方法可以取消冒泡.event.stopPropagation();对于具有默认行为的元素,比如提交按钮的提交表单行为, <a>元素的超链接行为等, 我们如果在这些元素上应用事件, 还需要取消它们的默认行为:event.preventDefault();(3) 设置动画效果与取消动画通过设置dialog的配置项的show属性, 可以设置显示dialog时候的动画效果:('.selector').dialog({ show: 'slide' });show默认为null即无动画, 可以是使用下列值:'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.对于这些动画的效果, 可以在此页观看:/demos/show/当一个动画效果执行时, 如果用户在此对这个元素进行操作, 就会出现各种问题, 比如定位不准确等. 所以如果应用了动画, 我们在对其操作时需要使用stop()函数来停止动画, 通常是停止虽有元素的动画:("*").stop();但是即使停止了动画再进行操作, 如果操作的太快也容易产生问题. 所以至于是否使用动画需要经过权衡决定.(4) 动态提示类弹出层的数据传递动态提示类弹出层的数据是不同的, 本文实例使用的是将数据存储在元素属性data上:<span id="spanShowDataTip1" data="颜色是红色">红色</span>这是一种简单直观的方式. 比较容易编程实现(尤其是在使用MVC编程模型的时候.)还有一种常用方式是使用javascript变量存储数据.这两种方式在第5章时有过讲解:/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html(5)更换主题大家注意实例中的弹出层没有为其编辑任何样式, 但是显示出来后已经被美化过了. 这是因为我引用了jQuery UI的主题:<link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> 注释中有很多的主题, 只需要将引用路径中的"redmond"改为其中任何一个, 弹出层的样式会立刻发生变化.VS中有一个Bug, 就是针对link标签, href中的语句块编译有问题, 某些情况下<%%>不被编辑解析. 所以我使用上面代码中的方式构造href属性值.可以在下面的地址查看各个主题的效果:/themeroller/#themeGallery六.Tab标签不刷新页面, 在页面中的不同标签间切换:本实例通过jQuery UI的Tabs组件实现. Tabs组件的使用与dialog一样十分简单, 默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.1.应用实例源代码:<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head id="Head1" runat="server"><title>jQuery UI - 弹出层应用实例Dialog</title><link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /><script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用==========*/ </script><style type="text/css"></style></head><body><div id="tabs1" style="width:300px;"><ul><li><a href="#tabs1-1">One</a></li><li><a href="TabData.htm">Two</a></li><li><a href="#tabs1-3">Three</a></li> </ul><div id="tabs1-1"><p>Tab1内容</p></div><div id="tabs1-3"><p>Tab3内容</p></div></div><br /><br /><br /><div id="tabs2" style="width: 300px;"><ul><li><a href="#tabs2-1">One</a></li><li><a href="#tabs2-2">Two</a></li><li><a href="#tabs2-3">Three</a></li> </ul><div id="tabs2-1"><p>Tab1内容</p></div><div id="tabs2-2"><p>Tab2内容</p></div><div id="tabs2-3"><p>Tab3内容</p></div></div><br /><br /><br /><div id="tabs3" style="width: 300px;"><ul><li><a href="#tabs3-1">One</a></li><li><a href="#tabs3-2">Two</a></li><li><a href="#tabs3-3">Three</a></li></ul><div id="tabs3-1"><p>Tab1内容</p></div><div id="tabs3-2"><p>Tab2内容</p></div><div id="tabs3-3"><p>Tab3内容</p></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/(function(){});/*==========加载时执行的语句==========*/(function(){//默认Tabs("#tabs1").tabs();//可折叠的Tabs("#tabs2").tabs({collapsible: true});//鼠标滑动即切换的Tabs("#tabs3").tabs({event: "mouseover"});});</script></body></html>效果:1. 默认设置的Tabs, Two标签内容使用Ajax获取2.再折叠tab3.鼠标滑动即切换的tab2.要点讲解(1) 注意Tabs中的HTML结构.使用ul构建标签. 内容div一定要和标签关联, 没有关联的div将不被处理直接显示.(2) 使用Ajax可以不指定内容容器, 但是也可以将Ajax内容放入指定容器中.<li><a href="hello/world.html" title="Todo Overview"> ... </a></li><div id="Todo_Overview"> ... </div>(3) 活用事件tab有很多事件:select, load, show, add, remove, enable, disable使用这些事件可以完成很多复杂任务. 需要注意事件的签名:('#example').bind('tabsselect', function(event, ui) {// Objects available in the function context:ui.tab // anchor element of the selected (clicked) tabui.panel // element, that contains the selected/clicked tab contentsui.index // zero-based index of the selected (clicked) tab});第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.比如我们可以在事件中做验证:('#example').tabs({select: function(event, ui) {var isValid = ... // form validation returning true or falsereturn isValid;}});或者当添加一个tab时立刻切换到选中状态:var tabs = ('#example').tabs({add: function(event, ui) {tabs.tabs('select', '#' + ui.panel.id);}});活学活用, 更多应用大家也可以参见tab组件的官方文档:/demos/tabs七. 手风琴菜单使用jQuery UI的accordion组件可以实现手风琴菜单. 效果见下图.accordion文档地址: /demos/accordion/1.实例效果2.实例代码<%@ Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head id="Head1" runat="server"><title>jQuery UI - 手风琴菜单应用实例Accordion </title><link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /><script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script> <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"type="text/javascript"></script><% if (false){%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script> <% }%><script type="text/javascript">/*========== 必须放在头部加载的语句块. 尽量避免使用==========*/ </script><style type="text/css">body{font-size: 12px;}</style></head><body><div style="width: 300px; float:left; margin-left:20px;"> <div id="accordion1"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><div style="width: 300px; float: left; margin-left: 20px;"> <div id="accordion2"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><div style="width: 300px; float: left; margin-left: 20px;"> <div id="accordion3"><h3><a href="#">菜单1</a></h3><div>菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br />菜单1的内容<br /></div><h3><a href="#">菜单2</a></h3><div>菜单2的内容</div><h3><a href="#">菜单3</a></h3><div>菜单3的内容</div></div></div><script type="text/javascript">/*==========用户自定义方法==========*//*==========事件绑定==========*/(function(){});/*==========加载时执行的语句==========*/(function(){//默认配置的Accordion菜单("#accordion1").accordion();//取消自动高度, 可折叠("#accordion2").accordion({autoHeight:false,collapsible: true});//鼠标滑动触发, 自定义图标("#accordion3").accordion({icons: {header: "ui-icon-circle-arrow-e",headerSelected: "ui-icon-circle-arrow-s"},event: "mouseover"});});</script></body></html>3. 关键点讲解(1) 注意高度设置过小问题当包含accordion控件的容器高度设计过小时, 在FireFox3中在此容器后面的内容会被accordion控件部分遮盖. 在IE中没有此问题. 经检查是因为容器高度小于菜单高度导致. 所以我们在应用时应当注意不要将容器高度设置过小.(2) 部分关键属性autoHeight: 设置是否自动将内容高度设置为容器高度.collapsible: 设置是否可折叠一般上面两个配合使用, 以为折叠后肯定会改变菜单高度, 会导致autoHeight设置为true无效.更多属性和事件使用请参阅官方文档.八.总结本章简单介绍了jQueryUI, 并且使用jQuery UI完成了弹出层,tabs,手风琴菜单的应用实例. 使用jQuery UI可以不需要额外寻找插件. 并且实现简单.但是有些功能是必须使用插件完成的. 下一张讲解两个插件实例: 自动完成插件AutoComplete 和表单验证插件jQuery Validate.本章源代码下载:/zhangziqiu/Code-jQueryStudy-10.rar本文来自CSDN博客，转载请标明出处：/fzzsh/archive/2009/05/22/4207966.aspx。