jQuery常用插件收集
jQuery插件库
web前端培训教程：jQuery插件库插件(Plugin)也成为jQuery 扩展(Extension)，是一种遵循一定规范的应用程序接口编写出来的程序。
目前jQuery 插件已超过几千种，由来自世界各地的开发者共同编写、验证和完善。
而对于jQuery 开发者而言，直接使用这些插件将快速稳定架构系统，节约项目成本。
一．插件概述插件是以jQuery 的核心代码为基础，编写出复合一定规范的应用程序。
也就是说，插件也是jQuery 代码，通过js 文件引入的方式植入即可。
插件的种类很多，主要大致可以分为：UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等。
引入插件是需要一定步骤的，基本如下：1.必须先引入jquery.js 文件，而且在所有插件之前引入；2.引入插件；3.引入插件的周边，比如皮肤、中文包等。
二．验证插件Validate.js 是jQuery 比较优秀的表单验证插件之一。
这个插件有两个js 文件，一个是主文件，一个是中文包文件。
使用的时候，可以使用min 版本；在这里，为了教学，我们未压缩版本。
验证插件包含的两个文件分别为：jquery.validate.js 和jquery.validate.messages_zh.js。
//HTML 内容<script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript" src="jquery.validate.messages_zh.js"></script> <form><p>用户名：<input type="text" class="required" name="username" minlength="2" />*</p><p>电子邮件：<input type="text" class="required email" name="email" /> *</p><p>网址：<input type="text" class="url" name="url" /></p><p><input type="submit" value="提交" /></p></form>//jQuery 代码$(function () { $('form').validate();});只要通过form 元素的jQuery 对象调用validate()方法，就可以实现“必填”、“不能小于两位”、“电子邮件不正确”、“网址不正确”等验证效果。
安装jquery插件
安装jquery插件最近⼯作中⽤到jQuery插件,需要安装eclipse插件才能⽀持jQuery智能提⽰,在⽹上搜索了⼀下,常⽤的有三个插件⽀持jQuery的智能提⽰:1.jQueryWTP2.Spket3.Aptana在安装插件之前需要先安装eclipse,如果已经安装了eclipse,可以直接看下⾯的插件安装⽅法,本⼈使⽤的Fedora 12,操作如下: 1.直接打开”应⽤程序”-->”系统⼯具”-->”终端” 2.输⼊命令”su”,这个命令是临时切换到root⽤户 3.输⼊root⽤户的密码 4.输⼊命令”yum install eclipse” 5.安装成功后,就可以在”应⽤程序”-->”编程”-->”eclipse”,打开查看版本为eclipse 3.5.1,当然也可以直接下载安装,这⾥就不再细说了,安装完毕后就可以安装相关插件了.以下分别介绍三个插件的安装⽅法: ⼀、jQueryWTP的安装⽅法(官⽅): step1:download jqueryWTP_version.jar step2:find you Eclipse Plugin org.eclipse.wst.javascript.ui_xxxxxxx.jar,backup the plugin. step3:double click the jar file or run with command java -jar jqueryWTP.version.jar step4:on the opened swing UI,choose org.eclipse.wst.javascript.ui_xxxxxxx.jar,and output dir. step5:click generate button. step6:replace old org.eclipse.wst.javascript.ui_xxxxxxx.jar file with the generated file. step7:restart eclipse. step8:open a htmlfile,edit js content.jQueryWTP插件项⽬的主页:/jquerywtp/ 但是下载完jqueryWTP0.31foCN.jar后,根据安装教程⾥都提到了⼀个plugin ⽬录下的org.eclipse.wst.javascript.ui_xxxxxxx.jar⽂件，但是我的eclipse⽬录想压根就找不到这个⽂件,所以也要就不能使⽤jQueryWTP插件智能提⽰.后来仔细查看jQueryWTP插件项⽬的主页,有这么⼀句话,Eclipse的WTP⽀持Javascript的代码补全功能,但是很简单，⽽且不⽀持jQuery,jQueryWTP的⽬的就是让Eclipse WTP⽀持jQuery,需要说明的是该插件对于MyEclipse等基于Eclipse WTP的⼯具也是⽀持的. 根据这句话可以猜想找不到plugin⽬录下的org.eclipse.wst.javascript.ui_xxxxxxx.jar⽂件的原因,可能是没有安装eclipse WTP插件,由于下⾯两种⽅法顺利安装并且⽀持jQuery智能提⽰,所以这⾥的猜想还没有经过验证.⼆、Spket的安装⽅法（两种⽅式）： 1.在线安装：Help->Install New Software...->Add...->Name: "Spket",Location:/update/ 下载完毕重启Eclipse. 2.⼿动安装：到/download.html下载 Plugin 版本，当前版本为1.6.17.下载解压后直接放置于Eclipse的dropins⽬录下，重启Eclipse. 3.下载jQuery⽂件，（要下载开发版本）. 4.设置spket ,Window -> Preferences -> Spket -> JavaScript Profiles -> New,输⼊“jQuery”点击OK；选择“jQuery” 并点击“Add Library”然后在下拉条中选取“jQuery”；选择 “jQuery”并点击“Add File”，然后选中你下载的jQuery.js ⽂件；设成Default; 5.设置js打开⽅式(这⼀步很重要,不设置的话,也不会有jQuery的智能提⽰), Window -> Preferences ->General-> Editors-> File Associations-> 选择*.js,将Spket JavaScript Editor设为Default。
jquery用法
jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。
下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。
以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。
以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。
以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。
jq常用方法
jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。
在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。
1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。
- $(".class")：根据class选择元素。
- $("tag")：根据标签名选择元素。
- $("element").find(selector)：在指定元素中查找符合条件的元素。
2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。
常用的事件有：- $(selector).click(function(){})：点击元素触发事件。
- $(selector).mouseover(function(){})：鼠标移上元素触发事件。
- $(selector).submit(function(){})：表单提交触发事件。
- $(selector).focus(function(){})：元素获得焦点触发事件。
3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。
- $(selector).text()：获取或设置元素的文本内容。
- $(selector).attr()：获取或设置元素的属性。
- $(selector).addClass()：为元素添加class。
- $(selector).remove()：删除指定元素。
4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。
菜鸟教程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交互等常用功能。
37款开源jQuery表格插件
37款开源jQuery表格插件我们一般使用HTML表格来显示数据，我们都知道div 更容易设计，更灵活。
但是现在你使用这些精彩的jQuery 表格插件，将更简单、灵活、更多风格。
下面介绍了37款开源jQuery表格插件。
感谢FineReport报表软件公司的整理。
jQuery网格插件jqGridjqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。
主要特点:-Full control with JavaScript API-Data returned from the server is XML-Simple configuration-Ability to load big datasets (paging)-Resizable columns-Server-side sorting-Support of links, images, checkboxes-You can add more than one grid on a sigle page (master-detail)-Paging授权协议：MIT开发语言：JavaScript操作系统：跨平台jQuery表格插件jQuery grid view pluginjqGridView是新的，富客户端的，基于XML ，Ajax网格插件的jQuery库。
jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。
精心设计的，具有强大的脚本API 的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。
jqGridView可以轻松地执行好期待（管理通过的CSS ）。
jqGridView并不平台根据插件，它可用于不同的网络编程平台，如：ASP技术.NET /的ASP ，PHP中，爪哇岛，CGI脚本等jqGridView已高度鲍泽兼容性。
主要特性:* Column resizing.* Server-side sorting.* Server-side paging.* Server-side filtering.* 100% XML support.* Inline row edit.* Columns templates.支持的浏览器包括:* Opera 9.0* Firefox 1.5* Safari 3.0* IE 6.0授权协议：未知开发语言：JavaScript操作系统：跨平台jQuery表格插件Flexigrid for jQueryFlexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。
jQuery 表格插件汇总
本文由我司收集整编，推荐下载，如有疑问，请与我司联系
jQuery 表格插件汇总
2010/07/28 5187 本文搜集了大量jQuery 表格插件，帮助Web 设计者更好地驾御HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进
行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。
这些插件很多都包
含详细的教程。
希望能对大家的开发有帮助。
jQuery 表格插件Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过Ajax 连接XML 数据源，类似Ext Grid，但基于jQuery 因此更轻量小巧。
Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。
Ingrid, the jQuery Datagrid - 在HTML 表格上加入列宽调整，分页，排序，行列式样等功能（演示）。
JQTreeTable - 在表格中加入树形结构
Scrollable HTML table - 将普通HTML 表格变为可滚动状态。
将表头部分放入THEAD 区，内容部分放入TBODY 区，脚注部分放入TFOOT 区域，引用webtoolkit.scrollabletable.js 文件，然后在每个表格后面创建ScrollableTable() 对象即可（演示）。
KeyTable - 象Excel 那样，在单元格之间巡游，可以现场编辑。
graphTable - 借助flot 将HTML 表格中的内容变成图形（演示）。
Jquery插件大全
Jquery插件大全1、导航类1）基于jQuery开发，非常简单的水平方向折叠控件。
2>具有XBOX360 blade界面风格的水平方向Accordion。
3>用于创建折叠菜单的jQuery插件4>基于jQuery开发的可折叠菜单。
5>模仿ext的tab选项卡TabPanel(选项卡组件>参数说明renderTo<渲染到某容器string | jQuery object | NULL>将选项卡组件渲染到某容器，参数类型可以为字符串，也可以为jQuery所加载的对象，如果为声明该参数，组件默认的承载容器为BODY。
b5E2RGbCAPitems<选项卡元素集合array>选项卡组件渲染后就会显示的选项卡元素集合，具体参数请查看选项卡元素。
width<宽度string | number>选项卡组件的总宽度，默认400px。
height<高度string | number>选项卡组件中页面显示层的高度，默认300px。
border<是否显示边框string>嵌套显示选项卡时，会出现重复边框的情况，影响美观，将border 设置为”none”，则可以避免，默认显示边框，不接受除”none”之外的参数值。
p1EanqFDPwactive<渲染后默认激活哪个选项卡元素number>下标以0为开始，默认为0。
maxLength<最多显示几个选项卡元素number>-1为无限，默认为-1。
tabs<获得选项卡组件所有的选项卡元素return array>可根据需要获得选项卡组件的所有选项卡元素。
公共方法addTab(添加一个选项卡元素object>动态向选项卡组件中添加一个选项卡元素。
flush(刷新选项卡元素的内容string | number>将选项卡元素的内容刷新，参数可以为选项卡元素的ID或下标。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery常用插件收集参与人员：声明：以下资源经来源于网络，为了方便自己和各位jQuery爱好者对常用jQuery插件的查找，便将自己收集的jQuery插件进行分类整理，与大家共同分享，如果你知道更好的jQuery插件，可以告诉大家，也可以邮件给我，我来整理。
目录AutoComplete搜索 (3)lightbox图片展示 (4)文字特效 (9)Lodging (9)编辑器 (10)Picker调色板 (11)Grid表格数据 (11)Tabs (13)提示框 (14)Portlets (15)拖放插件 (15)Form (15)menu菜单 (18)文件上传控件 (20)tree树 (20)windows弹出框 (22)AutoComplete搜索�AutoComplete-JQueryjQuery插件易于集成到现在的表单中(Form)。
主页:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/示例:http://jquery.bassistance.de/autocomplete/demo/�Facebook like Autocomplete基于jQuery开发，类似于FaceBoox提供的AutoCompleter。
主页:http://web2ajax.fr/examples/facebook_searchengine/�jQuery Autocomplete ModjQuery Autcomplete插件。
能够限制下拉菜单显示的结果数。
主页:/workshop/jquery/autocomplete.htm�jqac基于Jquery开发的Autocomplete插件。
具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。
主页:/p/jqac/示例:http://www.cs.bgu.ac.il/~ygleyzer/files/utils/jqac/jqac_example.html�jQuery.Suggest跨浏览器支持，基于jQuery开发的Autocomplete library。
主页:/2007/08/06/jquerysuggest-11/�Autocomplete-jQuery plugin一个jQuery Autocompleter，提供缓存选项来限制对服务器的请求。
主页:/jquery/?autocomplete�jSuggest模仿Google Suggest功能的AutoComplete jQuery插件。
lightbox图片展示Facebox是一个基于jQuery，Facebook-style的lightbox。
能够展示示images，divs或者整个远程页面。
主页:/facebox�Easy SlideEasySlide是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。
主页:/cgi-bin/webapp.rb?r=access&lan=gb�jQuery lightBox plugin一个简单，强大基于jQuery开发的lightBox控件。
主页:/projects/jquery/lightbox/示例:/projects/jquery/lightbox/#example�jCarousel Lite这个jQuery插件能够帮助你以滚动（carousel）的方式来组织图片和其它内容。
主页:/jquery/jcarousellite/index.php�jCarouseljCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序，列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。
可以向前或向后滚动。
主页:/projects/jcarousel/�jQuery Slider Gallery这是一个基于jQuery开发相册控件，类似于Apple网站上用于展示产品的效果。
主页:/slider-gallery/�jQuery Cycle PluginjQuery Cycle Plugin是一个slideshow插件。
支持多种变换效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。
主页:/jquery/cycle/�ThickBoxThickBox是一个模式对话框UI控件。
基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。
主页:/demo/thickbox/示例:/demo/thickbox/#examples�prettyPhotoprettyPhoto是jQuery lightbox的一个“克隆”。
并增加动画效果，图库浏览等特性。
主页:/projects/prettyPhoto/下载:/projects/prettyPhoto-jquery-lightbox-clone/#download示例:/projects/prettyPhoto-jquery-lightbox-clone/#demo�CrossSlideCrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入\滑出等主页:/~tobia/cross-slide.shtml�ColorBoxColorBox是一个采用jQuery开发，可定制的Lightbox控件。
可以通过CSS改变内容展示框。
ColorBox支持单张图片，图片组，Ajax HTML，Inline HTML，Flash/Video，Iframed 等内容。
主页:/colorbox/示例:/colorbox/core/example1/index.html�GalleryViewGalleryView是一个灵活的内容幻灯播放jQuery插件。
它提供的容器能够展示HTML内容，并能够为当前展示的内容添加标题说明。
主页:/jquery/galleryview/示例:/jquery/galleryview/gallery-customized.html�Simple Image Viewer利用jQuery内置的slideUp与slideDown方法创建一个简单的图片查看器主页:/article/simple-image-viewer文字特效�3D Flying Text in jQuery利用jQuery制作飞舞的3D文字主页:/2009/08/3d-flying-text-in-jquery/示例:/Examples/3D-Flying-Text/L odging�jQuery blockUI这个jQuery插件能够为页面上的任意元素添加遮层，阻止用户操作。
具体可以用于制作提示等待响应的对话框。
当要执行某个较长操作时候，通过blockUI来阻止当前用户继续操作。
主页:/jquery/block/示例:/jquery/block/#demos�Sliding Login PanelSliding Login Panel是一个采用jQuery开发的用户登录面板。
这个面板能够从页面顶部滑落与收缩。
主页:/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/示例:/demos/Sliding_login_panel_jquery/编辑器�jwysiwygWYSIWYG jQuery插件。
整个编辑器文件大小只有17Kb。
主页:/p/jwysiwyg/�Damn Small Rich Text Editor基于jQuery开发，能够从IFRAME元素创建一个Rich Text Editor。
提供了所有基本的Rich Text功能，可设置文本编辑区大小，Ajax上传图片等。
主页:/dsrte/index.php�beautyOfCodebeautyOfCode这个jQuery插件能够对html页面中各种源代码的语法进行着色显示。
封装自Syntaxhighlighter并添加对xhtml兼容支持。
主页:/2008/10/30/beautyofcode-jquery-plugin-for-syntax-highlighting/示例:/2008/10/30/beautyofcode-jquery-plugin-for-syntax-highlighting/�ChiliChili是一个jQuery源代码语法着色/高亮插件。
具有以下特性：•着色非常快，易于使用，完全可定制，文档丰富。
•支持显示行号。
•在Internet Explorer、Firefox、Opera和Safari等浏览器上显示同样的效果。
•默认支持的源代码类型包括：C++、C#、CSS、Delphi、Java、JavaScript、LotusScript、MySQL、PHP和XHTML。
•完全支持正则表达式，包括反向引用。
主页:/chili/示例:/personal/projects/chili/2.2/chili2.2-example-other-languages.htmlPicker调色板�FarbtasticFarbtastic是一个color picker插件。
它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。
主页:/dev/farbtasticG rid表格数据�FlexigridFlexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。
它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。
Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
主页：/�jQuery GridjqGrid是一个Ajaxed jQuery Grid插件。
提供分页功能，添加、编辑、删除和搜索表中记录，支持多种数据类型输入：XML，JSON，Array等，多行选择，支持子表格，集成日期选择控件等等。
主页:/blog/示例:/jqgrid/jqgrid.html�DataTablesDataTables是一个jQuery插件，能够让html表格很方便地实现分页、过滤和多栏排序等功能。
DataTables可以使用本身自带的CSS样式，但还可以按自己的需要自定义CSS 样式。
它具有以下特征：•自适应列宽•可保存表格状态•可隐含列•动态创建表格•Ajax自动装载数据•丰富的分页类型•多栏排序和高亮显示主页:/�jQuery.sheetjQuery.sheet是一个Web电子表格jQuery插件。