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;});。
jquery教程
JQUERY教程JQUERY简介jquery库的新特性：jquery是一个javascript的函数库，它包含以下特性：html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。
Jquery库位于一个javascript文件中，其中包含了所有的jquery 函数，可以通过以下标记把jquery添加到页面中：注意：<script>标签应该位于页面的<head>部分Jquery的实例：hide()函数，隐藏了html中所有的<p>标签效果：页面会出现三段字和一个按钮，当点击按钮时，<p>标签里边的字将自动隐藏库的代替：Google和Microsoft对jquery的支持都很好。
如果不从自己的计算机上加载jquery库，可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN：使用Microsoft的CDN：Jquery语法通过jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。
Jquery语法实例$(this).hide(); 演示jquery hide（）函数，隐藏当前的html元素$(“#this”).hide(); 演示jquery hide（）函数，隐藏id为test的元素$(“p”).hide(); 演示jquery hide（）函数，隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide（）函数，隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery，选择符（selector）查询和查找html元素，jquery的action（）执行对元素的操作例如：$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示：jQuery使用的语法是XPath与CSS 选择器语法的组合。
jQuery的起点教程(PDF版)
以下部分为原文翻译:jQuery入门指南教程这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。
它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。
这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。
内容提要Hello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:$(document).ready(function(){//do stuff when DOM is ready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.$(document).ready(function(){$("a").click(function(){alert("Hello world!");});});这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。
)让我们看一下这些修改是什么含义。
$("a")是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是jQuery“类”(jQuery"class")的一个别称，因此$()构造了一个新的jQuery对象(jQuery object)。
函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.这里有一个拟行相似功能的代码:<a href="#"onclick="alert('Hello world')">Link</a>不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.下面我们会更多地了解到选择器与事件.本章的相关链接:Find me:使用选择器和事件jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div>ul a")）；第二种是用jQuery对象的几个methods(方法)。
jQuery程序设计基础教程课程设计
jQuery程序设计基础教程课程设计课程设计背景及目的随着互联网技术的不断发展，越来越多的网页需要使用JavaScript完成动态效果。
而jQuery作为一款流行的JavaScript库，凭借其简洁易用、功能强大、浏览器兼容性好等优点，被广泛应用于Web开发中。
因此，本课程旨在通过学习jQuery的基础知识和实际项目实践，帮助学生掌握jQuery的使用方法，提高其Web开发的技能水平。
课程设计内容1. jQuery基础知识本部分主要介绍jQuery的基本语法、选择器、事件等内容。
•jQuery的安装与使用•jQuery选择器的使用•jQuery事件的应用2. jQuery动态效果实现本部分主要介绍如何使用jQuery实现常见的动态效果。
•基本的DOM元素操作•动态添加、删除、替换DOM元素•动态样式的实现•动画效果的实现3. jQuery插件应用本部分将介绍jQuery的常用插件，以及如何使用这些插件来实现更加复杂的动态效果。
同时，本部分还将介绍如何编写自定义jQuery插件。
•常用jQuery插件的介绍和使用•如何编写自定义jQuery插件4. 项目实践本部分将结合实际案例进行项目实践，旨在帮助学生将所学的jQuery知识应用于实际项目中，提高其实际开发能力。
课程设计方法本课程采用理论学习与实践项目相结合的教学方法。
具体方法如下：1. 理论学习采取授课、讲解、演示等方式，帮助学生掌握jQuery的基础知识。
2. 实践项目以实际项目为背景，进行项目实践，帮助学生将所学的jQuery知识应用于实际开发中。
3. 讨论交流鼓励学生在课堂上进行讨论和交流，相互学习、相互促进。
课程设计评价为了更好地评价学生的学习效果，本课程设计将采用以下评价方式：1. 平时成绩针对学生的课堂参与度、作业完成情况等综合评定。
2. 项目成果针对学生所完成的项目成果进行评价，包括项目的实现效果、代码质量、技术复杂度等方面。
3. 综合考试采用考试方式对学生的知识掌握程度进行考核。
jQuery 教程 w3cshool
jQuery 教程Next PagejQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>TIY通过点击 "TIY" 按钮来看看它是如何运行的。
您将学到什么在本教程中，您将通过文字以及许多在线实例，学到如何通过使用 jQuery 网页应用 JavaScript 效果。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
您需要具备的基础知识在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：∙HTML∙CSS∙JavaScript如果您需要首先学习这些科目，请在我们的首页查找这些教程。
jQuery 实例通过实例来学习！在 W3School，您将找到很多能够编辑并测试的 jQuery 实例。
jQuery 实例jQuery 参考手册在 W3School，您将找到包含所有 jQuery 对象和函数的完整参考手册。
Jquery下载与安装教程[web前端培训]
![Jquery下载与安装教程[web前端培训]](https://img.taocdn.com/s3/m/d86474fa76c66137ef061989.png)
jQuery一套JavaScript的库，它简化了使用Javascript进行网页发的一些复杂性，了对常见任务的自动化和复杂任务的简化。
相对于JavaScript的库来说，更利于学
习和掌握，而且具有简体中文的帮助文档，极的方便了英文不好的建设人员的学习。
们介绍一下jQuery如何下载与？
jQuery下载为http://jquery./
在右上角可以看下载jQuery的按钮，击下载页面。
一般下载Downloadthepressed,productionjQuery3.4.1即可，们会下载到一个.js文件。
打编辑器，新建一个HTML文档，并且设定一下架构。
们需要把刚刚下载的js文件引入到HTML里面就能使用了。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<scripttype="text/javascript"src="jquery-3.4.1.min.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
如果想想系统学习jquery和web前端相关知识，。
前端开发常用插件教程
前端开发常用插件教程第一章：jQuery插件1.1 基础概念jQuery是一个快速、简洁的JavaScript库，广泛应用于前端开发中。
使用jQuery插件可以为网页添加丰富的交互效果和功能。
1.2 常用插件介绍1.2.1 jQuery UIjQuery UI是一个基于jQuery的用户界面库，包含了丰富的UI 组件，如对话框、日期选择器、进度条等。
可以通过简单的API 调用实现各种功能，提高用户体验。
1.2.2 Slick CarouselSlick Carousel是一款功能强大的轮播插件，适用于创建各种类型的轮播效果。
可以自定义轮播项的数量、自动播放、响应式布局等。
1.2.3 jQuery ValidationjQuery Validation是一款表单验证插件，通过为表单元素添加规则和提示信息，可以方便地进行表单验证。
支持包括必填、邮箱、手机、密码等多种验证规则，提高表单的数据准确性。
1.3 使用示例1.3.1 引入插件库在HTML文件中，使用script标签引入jQuery库和相应的插件库。
1.3.2 初始化插件通过JavaScript代码初始化插件，指定相应的参数和选项，实现所需的功能。
1.3.3 调用插件方法通过JavaScript代码调用插件提供的方法，实现一些交互操作，如动态添加、删除元素等。
第二章：Vue插件2.1 基础概念Vue是一款流行的JavaScript框架，用于构建用户界面。
Vue插件可以扩展Vue的功能，提供更多的特性和组件。
2.2 常用插件介绍2.2.1 Vue RouterVue Router是一款用于构建单页面应用的插件，通过定义路由映射，实现页面的切换和导航。
提供了丰富的路由选项和路由导航方法，方便管理页面状态。
2.2.2 VuexVuex是一款用于Vue应用的状态管理插件，用于解决组件之间共享状态的问题。
通过定义全局的状态、提交状态变更的行为和监听状态的变化，可以实现数据的一致和响应式更新。
jquery的使用方法
jquery的使用方法jQuery作为一种常用的JavaScript库，其强大的功能和简化代码的方便性让其成为前端开发者中的首选。
以下是在项目中常见的jQuery使用方法的分步骤阐述：1. 引入jQuery库在HTML文件的<head>区域中使用script标签引入jQuery库，通常我们是从官网下载一个jquery-x.x.x.js文件，在引用时需要写正确的路径。
2. jQuery对象的创建要使用jQuery对象，首先需要用jQuery构造函数来创建一个jQuery对象。
这可以使用两种方式创建：1）通过$或jQuery函数创建：例如：$("选择器")或者jQuery("选择器")；2）通过使用jQuery()或$()函数作为参数传递原始DOM元素来创建。
3. 选择器的使用jQuery中的选择器实现了所有的CSS选择器，也支持自定义选择器。
与CSS选择器类似，jQuery选择器是用于选择HTML元素的字符串。
例如：选择id为“content”的元素：$("#content")；选择class为“box”的元素：$(".box")；选择label元素中“for”属性值为“id”的元素：$("label[for='id']")4. 事件处理函数的绑定通过bind()或者on()函数可以给元素绑定事件，例如：$(selector).bind(event,function)绑定事件。
事件可以是click、dblclick、mouseenter等等，函数可以是已定义的函数名，也可以是匿名函数。
5. 样式的操作通过jQuery对象的css()方法设置样式。
例如：$(selector).css('color','#fff')设置字体颜色为白色，$(selector).addClass('className')增加类名为'className'的样式。
jQuery网页特效设计基础教程 第8章 jQuery UI插件的使用
第8章 jQuery UI插件的使用
8.3 jQuery UI的特效
拖动特效（Draggable）的使用
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.3 jQuery UI的特效
放置特效（Droppable）的使用
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.3 jQuery UI的特效
缩放特效（Resizable）的使用
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.3 jQuery UI的特效
选择特效（Selectable）的使用
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.3
第8章 jQuery UI插件的使用
8.1 初识jQuery UI插件 8.2 jQuery UI的常用插件 8.3 jQuery UI的特效 8.4 综合实例：使用jQuery实现许愿墙
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.1 初识jQuery UI插件
排序特效（Sortable）的使用
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.3 jQuery UI的特效
显示特效（show）的使用
jQuery开发基础教程
第8章 jQuery UI插件的使用
8.3 jQuery UI的特效
隐藏特效（hide）的使用
jQuery开发基础教程
jQuery开发基础教程
第8章 jQuery UI插件的使用
总结
初识jQuery UI插件 jQuery UI的常用插件 jQuery UI的特效 综合实例：使用jQuery实现许愿墙
JQuery入门、手册及教程
浅谈JQUREY（摘自/softwave/article/details/2070815）JQUERY手册（第七页，附教程）Jquery是继prototype之后又一个优秀的Javascript框架。
对prototype我使用不多，简单了解过。
但使用上jquery 之后，马上被她的优雅吸引住了。
有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery 就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。
使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。
没错，jquery也跟风了。
为达到document.getElementById()的目的，jquery是这样写的：Java代码1.var someElement = $("#myId");[java]view plaincopyprint?1.var someElement = $("#myId");看起来比其他两个框架的要多了一个#，好，看看下面的用法：Java代码1.$("div p");(1)2.$("div.container")(2)3.$("div #msg");(3)4.$("table a",context);(4)[java]view plaincopyprint?1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4)在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。
jQuery前端开发实战教程 第5章 jQuery表单编程
设置集合中所有元素的值，语法格式如下：
$selector .val(value|function)
jQuery表单编程>> 获取设置控件的值>>示例5-2
5-2
<script> $(function() { var $output = $('#output'); $('#form1 :submit').on('click', function(e) { $output.text('被选中的是：'); $('#form1 :checkbox:checked').each(function() { $output.append($(this).val() + ' '); }); e.preventDefault(); //return false; $output.append('<br>确认选课结果吗？'); }); }); </script>
jQuery表单编程>>表单选择器>>示例5-1
5-1
<script> $(function() { $output = $('#output'); $output.append('以下都是input元素：'); $(':input').each(function function_name(argument) { $output.append($(this).attr('id') + ' '); }); $output.append('<br>以下都是:button元素：'); $(':button').each(function function_name(argument) { $output.append($(this).attr('id') + ' '); }); $output.append('<br>以下都是:selected元素：'); $(':selected').each(function function_name(argument) { $output.append($(this).attr('id') + ' '); }); $output.append('<br>以下都是:checked元素：'); $(':checked').each(function function_name(argument) { $output.append($(this).attr('id') + ' '); }); $output.append('<br>以下都是:disabled元素：'); $(':disabled').each(function function_name(argument) { $output.append($(this).attr('id') + ' '); }); }); </script>
jQuery基础教程
jQuery基础教程jQuery是什么？jQuery是⼀个JavaScript常⽤的⼯具函数库。
jQuery是⼀个轻量级的"写的少，做的多"的JavaScript库。
jQuery当中包含有以下⼀些常⽤功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities下⾯的内容当中，我们会逐⼀的介绍jQuery的常⽤内容。
学习jQuery的⼼态以练为主，多看多练以js为基础，更好的理解jQueryjQuery只是js的⼀个函数库，不能忘记jsjQuery的版本问题⽬前jQuery有三个⼤版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最⾼，可以有效的兼容ie浏览器，6，7，8，9都能得到⼀个很好的兼容，2版本则最低只能兼容到ie9，⽽3版本则彻底放弃了ie9以下的浏览器。
但是却新增加了很多的使⽤的⽅法，并且代码的安全性也增加很多，例如可以很好的防⽌xss攻击等。
jQuery的使⽤⾸先，我们可以根据需要下载⼀个指定版本的jquery⽂件，当然也可以选择使⽤cdn⽂件。
js 官⽅⽹址: /常⽤CDN:<script src="/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery<script src="/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云<script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪jQuery 中的核⼼语法在jQuery当中，jQuery是⼀个核⼼⽅法，⽤来查找元素从⽽⽅便对元素的操作，可以简写为$。
- 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><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothnes s,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--><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><!-- Demo 静态提示类弹出层--><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 /><!-- Demo 动态提示类弹出层--><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 /><!-- Demo 遮罩类弹出层--><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的主题:<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothnes s,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--><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><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothnes s,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--><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><!--Demo.默认Tab与Ajax Tab --><div id="tabs1" style="width:300px;"><ul><li><a href="#tabs1-1">One</a></li><!-- Ajax Tab --><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 /><!--Demo. 可折叠的Tab --><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 /><!--Demo. 鼠标滑动即切换的Tab --><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><!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothnes s,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader--><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><!-- Demo. 默认配置的Accordion菜单--><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><!-- Demo. 取消自动高度, 可折叠--><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><!-- Demo. 鼠标滑动触发, 自定义图标--><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。