通过代码示例学习jQueryUI库AutoComplete应用技术(基础篇)——第1部分

合集下载

通过代码示例学习jQueryUI库Accordion应用技术（第2部分）

通过代码示例学习jQueryUI库Accordion应用技术（第2部分）本文目录1.1通过代码示例学习jQueryUI库Accordion应用技术（第2部分） (2)1.1.1Accordion组件event成员属性功能含义及应用 (2)1.1.2Accordion组件heightStyle成员属性功能含义及应用 (2)1.1.3Accordion组件icon成员属性功能含义及应用 (3)1.1.4Accordion组件的典型事件及应用示例 (6)1.1.5拖动改变最外部容器的大小和使得面板内容充满父容器的尺寸 (9)1.1.6重新排序Accordion组件的Tab页头示例 (12)1.1.7使用cookie缓存最后选中Accordion页的应用示例 (15)1.1通过代码示例学习jQueryUI库Accordion应用技术（第2部分）1.1.1Accordion组件event成员属性功能含义及应用1、event成员属性的主要功能event定义如何展开其中的面板。

因为在缺省情况下，打开Accordion组件中的某个部分内容区是通过鼠标点击该内容区所对应的Tab头标题条区域。

而如果需要实现移动鼠标或者其它的方式，该部分自动能够展开对应的内容区，可以通过设置event成员属性值。

2、event成员属性的应用示例上面的示例中的设置是定义为鼠标指向将触发切换面板。

3、event成员属性的默认设置值是'click'（鼠标点击）可以根据项目的应用需要，也可以设置为双击、鼠标滑过等切换方式。

1.1.2Accordion组件heightStyle成员属性功能含义及应用1、heightStyle成员属性的主要功能主要控制面板的内容区的高度。

因为Accordion是由“Block级”元素所组成的，因此它在缺省样式风格下在水平方向是占据父元素的整个宽度。

为了能够在高度方向也可以充满其父容器的高度，可以通过配置定义heightStyle成员属性值为fill。

jquery ui全教程之一(dialog的使用教程)

jQuery UI目前的版本已经更新到了1.8.7。

个人感觉和easyui相比起来，jQuery UI在界面的美观程度和可定制型更强一些。

所以再次将一些jQuery UI组件的用法说明一下，方便日后查阅。

也方面没接触jQuery UI的人能早日使用jQuery UI套件(一)首先来说jQuery UI使用频率较高dialog组件：dialog就是我们常说的弹出层，应用还是比较广泛的，比如：可以使用弹出层做登录、注册和消息提示等功能下面来详细说说dialog的使用方法在官方提供的官方文档和示例中有六种形式的dialog,但是前五种都是大同小异，包括在编写代码方面也仅仅是多设置两个属性而已，没什么太大的不同，先来看看使用jQuery UI组件的时候需要那些前期贮备工作。

首先将需要依赖的js文件导入到你的页面中。

需要依赖的文件如下：jquery-ui-1.8.7.custom.css这个是jQuery UI套件的CSS样式表，demos.css这个是jQuery UIdemo中用到的CSS样式，因为我用到了这些样式所以将它导入进来，如果大家不需要可以不导这个文件，jquery-1.4.4.min.js这个不用说了吧，jQuery的核心文件，没有它一切工作都无法开展。

切记一点：一定要在引入其他的js文件之前引入jquery-1.4.4.min.js文件，别问为什么，懂点jQuery的人都能想的到。

jquery-ui-1.8.7.custom.min.js这个是jQueryUI的核心js文件，也是必须的。

有了上述的引用后就可以在你的页面中使用jQuery UI了。

先看一个超级简单的DEMO：<div id="dialog" title="basic dialog"><p>这是一个采用默认样式的对话框</p></div>在页面中加入上边的一行代码，然后加入一个script标签对，在脚本写如下代码：$(function(){$("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}其中ok是按钮显示的文本，而function是点击按钮后执行的事件。

jquery联想输入

jquery联想输入【篇一：jquery联想输入】最近学习了jquery ui的autocomplete 自动补全，和大家分享一下学习的经验，希望对初学者有用。

第一次写博客，使用语言 java js使用语言主要是java，这个参考了网上的一些教程，你可以参考这里jquery ui 实例–自动完成（autocomplete） | 菜鸟教程/jqueryui/example-autocomplete.html先来看一个静态页面的自动补全，数据全部是写死的，没有与后台做交互的。

运行效果如图鼠标选中效果如图：代码如下有些人可能会遇到中文无法联想的问题，这个可能是你的中文乱码了，所以无法联想，这个时候记得把页面文本编码类型改为utf-8就可以了。

接下来我们来看动态的自动补全，自动补全的数据是从后台加载过来的，而不是写死的。

使用语言：java学习这个之前。

你首先要了解ajax技术，至于这个是什么，就请自行百度吧。

动态补全我们需要两部分，前台页面部分和后台服务器处理程序。

在前台页面上输入内容后，输入框的实时的发送到后台，后台进行相应的处理，返回匹配的数据集合到前台显示。

在前面的静态页面中，我们是把需要填充的数据写进了availabletags 数组里，那么如果我们想做与服务器有交互的自动补全，最简单的思路应该是这样，获取前台页面输入框的》发送到后台》后台做相应的处理（例如查询数据库）》返回匹配的数据集合到前台页面》数据集合填充到availabletags数组里，只要你能获得到匹配的数据集合，那其他的操作基本就和静态页面的操作一样了。

我使用的是spring mvc开发。

先看一下后台服务器代码这段代码就是获取前台传入的。

查询数据库，返回含有匹配结果的json字符串到前台，每个人的项目不一样，这段代码参考意义不大。

接下来是前台页面代码使用ajax与后台交互，实时的获取输入框的返回给后台并接收后台返回的匹配结果【篇二：jquery联想输入】加入有jsp页面，其中有input定义如下：input id= inputid name= inputname type= text那么在输入内容的时候如何进行联想？在页面js种这么写：$(function(){ autocompleteinput($( #inputid ));function autocompleteinput(obj) $(obj).autocomplete({ source:function(request, response){},//返回联想词的方法，request为输入内容，response为返回的联想词列表 minlength:2,//最小联想长度，当输入内容长度达到这个长度时才进行联想 select:function(event,ui){}}【篇三：jquery联想输入】1.插件下载及api 地址2.控制层response.getwriter().write(jsonstr);3.json 式为：4.页面ajax请求。

关于jQuery UI 使用心得及技巧

关于jQuery UI 使用心得及技巧最近项目中使用了一些插件来做页面，这里把jQuery UI的使用分享出来，希望对新手有帮助。

文章结尾附源码下载。

1 jQuery UI2 为我所用2.1 Tabs2.2 Accordion2.2.1 使用基本的Accordion2.2.2 实现打开多个标签2.2.3 Accordion的嵌套3 给插件应用主题——Theme Roller3.1 更改配色3.2 更改图标4 相关连接1 jQuery UI有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。

直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。

现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。

而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。

让你在做界面的时候随便…拿来‟就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。

2 为我所用下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。

其他插件的详尽使用文档及演示在这里可以学习到，只不过是英文的。

2.1TabsTabs 形式的插件在网页及桌面应用程序中都使用得相当广泛，可以用作菜单，也可做为一小部分内容的选项卡图0首先在VS2010新建一个MVC项目，要使用jQuery UI,首先要把jQuery及jQuery UI 脚本文件包含在项目当中，并且相关页面要用<script>标签进行引用。

当我们创建好一个MVC项目后，在Scripts文件夹里，系统已经自动把jQuery及jQuery UI 脚本文件包含在项目当中了（如图1）。

图 1注释：图中jquery-1.5.1-vsdoc.js为包含完整提示注释的版本，在VS里编写代码时会有智能地显示提示信息及注释；jquery-1.5.1.js为标准版本；带min的为压缩精简后的版本，为的是在客户端减少下载时间。

基于jquery的自动完成插件jquery.autocomplete

基于jquery的自动完成插件jquery.autocomplete项目需要一个自动完成功能的text，要求实时从服务端获取符合条件的数据。

想到jquery貌似有类似功能的插件：1.需要下面几个文件：jquery-1.3.2.js，jquery.autocomplete.js，jquery.autocomplete.css。

2.功能要求：随着输入的内容不同不断匹配符合条件的数据项，这就要求动态获取参数。

而jquery传递参数可以用：extraParams: {area:function(){return $('#id').val();}}不过经过使用发现，这样不能动态获取参数，所以修改了一下jquery.autocomplete.js的源码为其添加了一个onBegin属性：(1) 为$.Autocompleter.defaults添加一个属性：onBegin: null,大约在400行；(2)调用方法:$("#id").autocomplete(url,{mustMatch :false,//是否完全匹配width :220,//宽度max :10,//最大显示行数onBegin :function(options){var va = $("#id").val();if(va && va !="")options.extraParams.va = va;return options;},parse :function(data){var par = eval(data);var re = [];if(par !=null&& par !='undfined'){for(var i =0; i < par.length; i++){re[i] ={data : par[i],value : par[i],result : par[i]};//data是数据项，value是值，result是显示项，例如如果数据项为A，那value可以是A.id,result是A.text。

AutoComplete示例

AutoComplete⽰例概述：AutoComplete 是⼀个可以附属到任何⼀个 TextBox 控件上的 AJAX 扩展控件，它可以帮助页⾯⽤户的⽂本框输⼊，显⽰提⽰信息，该信息可以根据⽤户的输⼊进⾏设置。

提⽰输⼊信息将根据与 AutoComplete 配合的 Web Service 来提供，并显⽰于 TextBox 的左下⽅。

在上⾯的例⼦中，和 AutoComplete 所配合的 TextBox 将提⽰以 TextBox 中的内容为开头的输⼊，有点类似模拟数据库中的 Like 检索结果。

当你在 TextBox 的输⼊超过指定的最⼩长度时，提⽰框将显⽰以其输⼊为开头的词组和短语。

在这个例⼦我们还采⽤了缓存机制，即同⼀个前缀被输⼊多次的时候，Web Service只会被调⽤⼀次。

属性;AutoComplete 控件属性将被初始化如下⾯的⽰例代码所⽰，斜体属性为可选属性<ajaxToolkit:AutoCompleteExtenderrunat="server"ID="autoComplete1"TargetControlID="myTextBox"ServiceMethod="GetCompletionList"ServicePath="AutoComplete.asmx"MinimumPrefixLength="2"CompletionInterval="1000"EnableCaching="true"CompletionSetCount="20"CompletionListCssClass="autocomplete_completionListElement"CompletionListItemCssClass="autocomplete_listItem"CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"DelimiterCharacters=";, :"><Animations><OnShow> ... </OnShow><OnHide> ... </OnHide></Animations></ajaxToolkit:AutoCompleteExtender>TargetControlID - 需要增加⾃动提⽰的TextBox 控件 IDServiceMethod - 提供提⽰信息的 Web Service ⽅法名，请注意，该⽅法的签名需要满⾜如下⽅法签名：[System.Web.Services.WebMethod][System.Web.Script.Services.ScriptMethod]public string[] GetCompletionList(string prefixText,int count) { ... }注意：你可以根据你的需要任意替换⽅法名“GetCompletionList”，但是返回值和参数必须保持⼀致ServicePath - Web Service 的路径，如果你没有指定该路径，那么 ServiceMethod 属性必须是当前页⾯的⼀个被申明成 Web Service Method 的页⾯⽅法。

菜鸟教程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交互等常用功能。

jQueryUI实例–对话框（Dialog）菜鸟教程

jQueryUI实例–对话框（Dialog）菜鸟教程jQuery UI 实例 - 对话框（Dialog）在一个交互覆盖层中打开内容。

如需了解更多有关dialog 部件的细节，请查看 API 文档对话框部件（Dialog Widget）。

默认功能基本的对话框窗口是一个定位于视区中的覆盖层，同时通过一个iframe 与页面内容分隔开（就像 select 元素）。

它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI 对话框（Dialog） - 默认功能</title><link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"><script src="///jquery-1.9.1.js"></script> <script src="///ui/1.10.4/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css"> <script>$(function() {$( "#dialog" ).dialog();});</script></head><body><div id="dialog" title="基本的对话框"><p>这是一个默认的对话框，用于显示信息。

jQuery Autocomplete简介

jQuery Autocomplete简介jQuery UI Autocomplete是jQuery UI的自动完成组件，是我用过的最强大、最灵活的Autocomplete，它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据。

支持的数据源jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。

普通的Array格式没有什么特殊的，如下：1 ["bjpowernode","动力节点","李四"]对于JSON格式的Array，则要求有：label、value属性，如下：1 [{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]其中label属性用于显示在autocomplete弹出菜单，而value属性则是选中后给文本框赋的值。

如果没有指定其中一个属性则用另一个属性替代(即value和label值一样)，如下：1 2 [{label: "bjpowernode"}, {label: "李四"}] [{value: "bjpowernode"}, {value: "李四"}]如果label和value都没有指定，则无法用于autocomplete的提示。

另外需要注意，对于从服务器端输出的JSON的key必须用双引号，如下：1 [{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]否则可能会出现parsererror错误。

JQuery插件autocomplete使用说明文档

JQuery插件autocomplete使⽤说明⽂档项⽬中有时会⽤到ajax⾃动补全查询，就像Google的搜索框中那样，输⼊汉字或者字母的⾸个字母，则包含这个汉字或者字母的相关条⽬会显⽰出来供⽤户选择，该插件就是实现这样的功能的。

autocomplete官⽹：（可下载jQuery autocomplete插件）。

使⽤此插件需要引⽤两个js⽂件和⼀个css⽂件，分别如下：jquery核⼼库⽂件 <script src="./jquery-1.3.2.js"type="text/javascript"></script>当jquery版本过⾼时需要使⽤jquery兼容⽂件<script src="~/Content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js"></script>插件js⽂件 <script src="./jquery.autocomplete.js" type="text/javascript"></script>插件样式⽂件 <link rel="stylesheet" href="./jquery.autocomplete.css" />插件的参数说明如下：minChars(number) 该参数指定在触发autocomplete之前⽤户在查询框中输⼊的最⼩字符数，通常设置为1，即⽂本框值不为空的时候执⾏autocomplete,如果取值为0，则在⽤户双击查询⽂本框或删除⽂本框内容时查询width 该参数的⽤途是指定下拉框的宽度，通常不⽤设置，默认的值为和<input>元素相同max 查询时下拉列表框中显⽰的条⽬数，defaultValue为10delay 击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10autoFill(boolean) 是否在⽤户选择时⾃动将⽤户⿏标所在的值填充到input元素中，default:falsemustMatch(boolean) 参数boolean类型，true时，如果输⼊的查询条件⽆法匹配到合适的结果，则<input>元素中输⼊的查询值会⾃动清空，否则会保留。

通过代码示例学习jQueryUI库AutoComplete应用技术(基础篇)

前言jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。

从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。

随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。

如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。

目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。

作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。

本文档为jQuery UI autoComplete自动补全组件的应用基础，主要涉及jQuery UI autoComplete自动补全组件的技术特性、主要的成员属性及应用示例、主要事件及应用示例，并给出一个体现autoComplete组件基本特性的应用示例以及如何应用AJAX技术获得远程服务器返回的匹配结果示例等方面的内容。

杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料，这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，涉及作者对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。

本文目录1.1autoComplete自动补全组件 (3)1.1.1autoComplete组件的技术特性 (3)1.1.2autoComplete组件的主要成员属性source及应用示例 (5)1.1.3autoComplete组件的其它属性 (14)1.1.4autoComplete组件的主要事件及应用示例 (19)1.2Autocomplete组件的应用示例 (24)1.2.1体现autoComplete组件基本特性的应用示例 (24)1.2.2应用AJAX技术获得远程服务器返回的匹配结果示例 (26)1.1autoComplete自动补全组件1.1.1autoComplete组件的技术特性1、Autocomplete也称为自动补全自动补全的功能是许多系统中都提供的一个提升用户输入体验的功能，当操作者在某个输入框中输入相关的数据（如查询关键字）等，系统将自动都匹配用户的输入数据，并在下拉列表中显示可能的各个匹配的完整数据项目。

jQuery简单学习手册

jQuery简单学习手册由于现在各种浏览器越来越多，客户使用的浏览器也是五花八门，大家在开发时自己手工写的JS可能会存在各种兼容性问题，为了节省时间同时能有更人性化的操作体验(列如其中的ui插件就提供了非常多的功能)，所以推荐在开发时使用jQuery，根据官方文档上的说明它兼容IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+等浏览器，同时它将一些常用的操作都封装到了框架中，节省写代码时间并不用考虑兼容性。

目前CEMIS中集成的jQuery版本为1.7.2，jQuery UI版本为1.8jQuery可以用美元符$或jQuery来写，但由于CEMIS中有另一款类库prototype也是使用$，为了避免$对象冲突，所以在cemis中都使用jQuery（注意大小写）。

以下是我在开发中常用到的一些功能，分享给大家：◆jQuery框架⏹选择器◆根据ID匹配一个元素：<div id=”test”></div>jQuery(“#test”);◆根据类匹配元素：<div class=”test”>1</div>,<div class=”test”>3</div>jQuery(“.test”);◆匹配所有不可见元素：<div style=”display:none”>1</div>,<div>2</div>jQuery("div:hidden");将匹配<div style=”display:none”>1</div>◆匹配所有可见元素：<div style=”display:none”>1</div>,<div>2</div>jQuery("div:visible");将匹配<div>2</div>◆匹配给定的属性是某个特定值的元素：<input type=”checkbox”name=”test1”value=”1”/>,<input type=”checkbox”name=”test1” value=”2” />,<input type=”checkbox” name=”test2” value=”1” />jQuery ("input[name=' test2']").attr("checked", true);即能选中第3个复选框⏹属性◆取得一个匹配元素的属性值：<img id=”test” src=”1.jpg” />jQuery(“#test”).attr(“src”);或jQuery(“img”).attr(“src”);最后获取的值为1.jpg◆为匹配元素设置一个属性值：<img id=”test” />jQuery(“#test”).arrt(“src”, “1.jpg”);结果为<img id=”test” src=”1.jpg” />◆为匹配元素设置多个属性值：<img id=”test” />jQuery("#test").attr({ src: "1.jpg", alt: "测试" });结果为<img id=”test” src=”1.jpg” alt=”测试” />◆从匹配元素删除属性：<img id=”test” src=”1.jpg” alt=”测试” />jQuery("#test").removeAttr("alt");结果为<img id=”test” src=”1.jpg” />◆为每个匹配的元素添加指定的类名：<div id=”test”>1</div>jQuery(“#test”). addClass("myclass");结果为<div id=”test” class=” myclass”>1</div>◆从所有匹配的元素中删除全部或者指定的类：<div id=”test” class=” myclass”>1</div>jQuery(“#test”). removeClass(“myclass”)或jQuery(“#test”). removeClass();结果为<div id=”test”>1</div>◆取得第一个匹配元素的html内容:<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).html();结果为<span> div1</span>◆设置第一个匹配元素的html内容:<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).html(“a”);结果为<div id="test">a</div>,<div id="test">div2</div>◆设置所有匹配元素的html内容：<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“div”).html(“aa”);结果为<div id="test">aa</div>,<div id="test">aa</div>◆取得一个或所有匹配元素的文本内容：<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).text();或jQuery(“div”).text();结果为div1或div1div2设置文本内容与前面的设置html类似，使用text(“xx”)的方式。

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的autocomplete插件用法及参数讲解

Jquery的autocomplete插件⽤法及参数讲解var emails = [{ name: "Peter Pan", to: "peter@pan.de" },{ name: "Molly", to: "molly@" },{ name: "Forneria Marconi", to: "live@japan.jp" },{ name: "Master <em>Sync</em>", to: "205bw@" },{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@" },{ name: "Don Corleone", to: "don@" },{ name: "Mc Chick", to: "info@" },{ name: "Donnie Darko", to: "dd@" },{ name: "Quake The Net", to: "webmaster@" },{ name: "Dr. Write", to: "write@" }];//emails的数组格式如上，formatItem代表的是显⽰的格式，formatMatch表⽰匹配的内容，formatResult表⽰结果的内容$("#suggest13").autocomplete(emails, {minChars: 0,width: 310,matchContains: true,autoFill: false,formatItem: function(row, i, max) {return i + "/" + max + ": \"" + + "\" [" + row.to + "]";},formatMatch: function(row, i, max) {return + " " + row.to;},formatResult: function(row) {return row.to;}});参数说明：* minChars (Number):在触发autoComplete前⽤户⾄少需要输⼊的字符数.Default: 1，如果设为0，在输⼊框内双击或者删除输⼊框内内容时显⽰列表* width (Number):指定下拉框的宽度. Default: input元素的宽度* max (Number):autoComplete下拉显⽰项⽬的个数.Default: 10* delay (Number):击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10* autoFill (Boolean):要不要在⽤户选择时⾃动将⽤户当前⿏标所在的值填⼊到input框. Default: false* mustMatch (Booolean):如果设置为true,autoComplete只会允许匹配的结果出现在输⼊框,所有当⽤户输⼊的是⾮法字符时将会得不到下拉框.Default: false* matchContains (Boolean):决定⽐较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使⽤缓存时⽐较重要.不要和autofill混⽤.Default: false* selectFirst (Boolean):如果设置成true,在⽤户键⼊tab或return键时autoComplete下拉列表的第⼀个值将被⾃动选择,尽管它没被⼿⼯选中(⽤键盘或⿏标).当然如果⽤户选中某个项⽬,那么就⽤⽤户选中的值. Default: true* cacheLength (Number):缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10* matchSubset (Boolean):autoComplete可不可以使⽤对服务器查询的缓存,如果缓存对foo的查询结果,那么如果⽤户输⼊foo就不需要再进⾏检索了,直接使⽤缓存.通常是打开这个选项以减轻服务器的负担以提⾼性能.只会在缓存长度⼤于1时有效.Default: true* matchCase (Boolean):⽐较是否开启⼤⼩写敏感开关.使⽤缓存时⽐较重要.如果你理解上⼀个选项,这个也就不难理解,就好⽐foot要不要到FOO的缓存中去找.Default: false* multiple (Boolean):是否允许输⼊多个值即多次使⽤autoComplete以输⼊多个值. Default: false* multipleSeparator (String):如果是多选时,⽤来分开各个选择的字符. Default: ","* scroll (Boolean):当结果集⼤于默认⾼度时是否使⽤卷轴显⽰ Default: true* scrollHeight (Number):⾃动完成提⽰的卷轴⾼度⽤像素⼤⼩表⽰ Default: 180* formatItem (Function):为每个要显⽰的项⽬使⽤⾼级标签.即对结果中的每⼀⾏都会调⽤这个函数,返回值将⽤LI元素包含显⽰在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的⾏数(即第⼏个项⽬,是从1开始的⾃然数), 当前结果数组元素的个数即项⽬的个数. Default: none, 表⽰不指定⾃定义的处理函数,这样下拉列表中的每⼀⾏只包含⼀个值.* formatResult (Function):和formatItem类似,但可以将将要输⼊到input⽂本框内的值进⾏格式化.同样有三个参数,和formatItem⼀样.Default: none,表⽰要么是只有数据,要么是使⽤formatItem提供的值.* formatMatch (Function):对每⼀⾏数据使⽤此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使⽤的. 参数值row* extraParams (Object):为后台(⼀般是服务端的脚本)提供更多的参数.和通常的作法⼀样是使⽤⼀个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前⽤户输⼊了foo). Default: {}* result (handler) Returns: jQuery此事件会在⽤户选中某⼀项后触发，参数为：event: 事件对象. event.type为result.data: 选中的数据⾏.formatted:formatResult函数返回的值例如：$("#singleBirdRemote").result(function(event, data, formatted) {//如选择后给其他控件赋值，触发别的事件等等});总结以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，谢谢⼤家对的⽀持。

jquery中的常用事件bind、hover、toggle等示例介绍

这篇文章主要介绍了jquery中常用的事件，比如$(document).ready()、bind、hover、toggle、click等等，并有示例，易于学习。

1.$(document).ready()$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。

它和onload具有类似的效果。

但是也有一些差异：当一个文档完全下载到浏览器中时，会触发window.onload事件。

而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后，代码就可以运行，但并不意味着所有关联文件都已经下载完毕。

一个页面中一般只有一个onload事件处理程序，而且只能一次保存对一个函数的引用；而$(document).ready()是可以有多个。

一般来说$(document).ready()都要优于使用onload事件处理程序。

但是如果关联文件还没有加载完成，则类似图像高度、宽度的属性的调用就会有问题，因此需要在不同的时候选择合适的方法。

$(document).ready()有三种写法，分别是：$(document).ready(function(){//thisis the coding...});$().ready(function(){//thisis the coding...});$(function(){//thisis the coding...});2.事件绑定语法$(selector).bind(event,data,function)参数和描述：event：必需。

规定添加到元素的一个或多个事件。

由空格分隔多个事件。

必须是有效的事件。

data 可选。

规定传递到函数的额外数据。

function 必需。

规定当事件发生时运行的函数。

对应的有unbind()：移除事件Eg: $(‘#idchoose').unbind(“click”,Function_Name)简写绑定事件：一般比较喜欢偏向简写$("#dividelement").bind("click",function(){//do something})改写为：$("#dividelement").click(function(){//do something }jQuery通过使用.bind()方法为元素进行事件绑定，通过使用.unbind()方法为元素进行解除绑定。

使用JQuery自动完成插件AutoComplete详解

使⽤JQuery⾃动完成插件AutoComplete详解问题当你查找⼀些特殊的东西，当你输⼊准确的词时，找到它可能是困难的（或者很耗时）。

在输⼊的时候展⽰出结果（⾃动完成），使查找变得更简单。

解决⽅案使⽤JQuery⾃动完成插件，更新现有图书列表页⾯上的搜索，当⽤户键⼊的时候⽴即显⽰结果。

讨论这个配⽅也将介绍在view中使⽤ rendering sections。

在shared⽂件夹下layout中⾃动添加了2个javascript⽂件和1个css⽂件。

这些是Ajax和不唐突的Ajax和⽹站主css⽂件。

每次加载的内容越多，页⾯视图加载越慢。

与其在每个页⾯都去包含可能不必要的javascript和css ⽂件，不如在layout中添加⼀个新的RenderSection()。

这允许特别的view在<head>标签去加载特别的javascript或css，但不是每页都添加他们。

下边是⼀个更新后的Views/Shared/_Layout.cshtml，他使⽤了⼀个新的RenderSection（）。

<!DOCTYPE html><html><head><title>_Mobile</title><link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/Content/Site.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script><script type="text/javascript">$(document).ready(function () {if (window.innerWidth <= 480) {$("link[rel=stylesheet]").attr({ href: "@Url.Content("~/Content/jquery.mobile-1.0b1.min.css")" });}});</script>@RenderSection("JavaScriptAndCSS", required: false)</head><body><div class="page" data-role="page"><div id="header" data-role="header"><div id="title"><h1>My MVC Application</h1></div><div id="logindisplay" class="ui-bar">@Html.Partial("_LogOnPartial")[ @Html.ActionLink("English", "ChangeLanguage", "Home", new { language = "en" }, null) ][ @Html.ActionLink("Français", "ChangeLanguage", "Home", new { language = "fr" }, null) ]</div><div id="menucontainer" class="ui-bar"><ul id="menu"><li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> {{ "data-role", "button" }})</li><li>@Html.ActionLink("About", "About", "Home", null, new Dictionary<string, object> { { "data-role", "button" }})</li></ul></div></div><div id="main" data-role="content">@RenderBody()</div><div id="footer" data-role="footer"></div></div></body></html>主要的CSS⽂件和核⼼的JQuery⽂件被留下来了，因为css在每个也都需要，并且绝⼤多数⽹页也需要JQuery。

通过代码实例跟我学Web前端JQuery框架——jQuery核心函数及应用示例

精心创作的优秀程序员职业提升必读系列资料
从所有匹配的元素中删除全部或者指定的 CSS 组样式名。代码示例： [$("div").removeClass()]，最终实现将如下形式的<div class="cssClassStyleName"></div>标签改变为如下的结果：<div></div> （3）toggleClass()函数
removeClass([classes])
从所有匹配的元素中删除全部或者指定的类。下面的代码示例实现从匹配的元素中删除 'selected' 类 :
$("p").removeClass("selected");
toggleClass( class )
如果存在（不存在）就删除（添加）一个类。下面的代码示例实现为匹配的元素切换 'selected' 类 :
杨教授工作室精心创作的优秀程序员职业提升必读系列资料
1.1 通过代码实例跟我学 Web 前端 JQuery 框架——jQuery 核心函数及应用示例
1.1.1 利用 jQuery 操作 CSS 相关的函数
1、动态添加或删除 HTML 标签的 CSS 类属性的 jQuery 函数
名称
说明
addClass( classes )
（2）css 函数的主要功能和使用方法 css 函数实现在所有匹配的标签元素中，添加一个新的样式属性的值。使用.css()的方式
与前面使用.addClass()的方式达到相同的目的，主要的不同在于 css 函数是添加具体的 CSS 样式项目，而.addClass()是添加 CSS 组样式名。代码示例：

jQuery UI Autocomplete示例(一)

本文由我司收集整编，推荐下载，如有疑问，请与我司联系
jQuery UI Autocomplete 示例（一）
2014/06/05 0
AutoComplete 在获取焦点后，随着用户键入的内容，可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。

这可以用作之前输入过的内容也可以用作自动填充相关内容，比如根据城市名，自动填充邮编等。

你可以使用本地数据源或是远程数据源，本地数据一般使用小数据集合，比如包含50 条记录的通讯录，远程数据源一般为保护大量记录的数据库。

基本用法本例为使用AutoComplete 的基本用法，通过本地数据源（数组）定义一组语言列表，用户输入字母后，包含该字母的语言会作为列表显示出来：
1 !doctype html
2 html lang=“en”
3 head
4 meta charset=“utf-8” /
5 title jQuery UI Demos /title
6 link rel=“stylesheet”href=“themes/trontastic/jquery-ui.css” /
7 script src=“scripts/jquery-1.9.1.js” /script
8 script src=“scripts/jquery-ui-1.10.1.custom.js” /script
9
10 script
11 $(function () {
12 var availableTags = [
13 “ActionScript”,
14 “AppleScript”,
15 “Asp”,
16 “BASIC”,
17 “C”,。