文档视界 最新最全的文档下载
当前位置:文档视界 › jQuery常用插件大全

jQuery常用插件大全

jQuery常用插件大全
jQuery常用插件大全

Horizontal accordion: jQuery

基于jQuery开发,非常简单的水平方向折叠控件。

Horizontal accordion: jQuery

jQuery-Horizontal Accordion

具有XBOX360 blade界面风格的水平方向Accordion。

jQuery-Horizontal Accordion

AutoComplete-JQuery

jQuery插件易于集成到现在的表单中(Form)。

AutoComplete-JQuery

Facebook like Autocomplete

基于jQuery开发,类似于FaceBoox提供的AutoCompleter。

Facebook like Autocomplete

jQuery Autocomplete Mod

jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。

jQuery Autocomplete Mod

jqac

基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。

jqac

jQuery Tag Suggestion

类似于https://www.docsj.com/doc/906445205.html,提供的tag suggesting功能。

jQuery Tag Suggestion

Autocomplete-jQuery ajax

利用jQuery(Ajax),PHP和MySQL开发的AutoCompleter。

Autocomplete-jQuery ajax

jQuery.Suggest

跨浏览器支持,基于jQuery开发的Autocomplete library。

jQuery.Suggest

Autocomplete- jQuery plugin

一个jQuery Autocompleter,提供缓存选项来限制对服务器的请求。

Autocomplete- jQuery plugin

jquery-aop

为JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加Advices(Before、After与Around)。

jquery-aop

jQuery Pagination

jQuery分页插件

jQuery Pagination

Facebox

Facebox是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。

Facebox

jwysiwyg

WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。

jwysiwyg

Flexigrid

Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid 显示的数据能够通过Ajax获取或者从一个普通的表格转换。

Flexigrid

SimpleModal

SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。

SimpleModal

Farbtastic

Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。

Farbtastic

ContextMenu

用于创建右键弹出菜单的jQuery插件。

ContextMenu

Damn Small Rich Text Editor

基于jQuery开发,能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能,可设置文本编辑区大小,Ajax上传图片等。

Damn Small Rich Text Editor

jNice

创建自定义外观的Form元素,功能与正常的Form元素相似。

jNice

imgAreaSelect

imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。

imgAreaSelect

jQuery calculate

jQuery计算插件,提供一些常用的数学计算功能比如:Sum、Average、Min、Max 等。

jQuery calculate

Easy Slide

EasySlide是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示,并加上鼠标指向时的暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。

Easy Slide

Easy News

Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件,可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果,调整显示速度,可自行修改CSS改变您为喜欢的风格。

Easy News

Easy News Plus

Easy News Plus是基于Easy News开发,滚动式新闻或图文内容展示的jQuery 插件,但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。

Easy News Plus

jTip

jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。

jTip

BetterTip

一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。

BetterTip

jQuery plugin: Accordion

用于创建 折叠菜单的jQuery插件。

jQuery plugin: Accordion

clueTip

clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。

clueTip

jQuery plugin: Treeview

这个插件能够把无序列表转换成可展开与收缩的Tree。

jQuery plugin: Treeview

jQuery plugin: Validation

jQuery校验插件。

jQuery plugin: Validation

Flot

Flot一个纯javascript绘画库,基于jQuery开发。它能够在客户端根据任何数据集快速生成图片。目前只能绘制线状图和柱状。

Flot

jQuery select box

模仿HTML select box实现功能的一个下拉菜单。

jQuery select box

jQZoom

基于jQuery开发的图片放大镜插件。

jQZoom

jQuery lightBox plugin

一个简单,强大基于jQuery开发的lightBox控件。

jQuery lightBox plugin

xmlObjectifier

基于jQuery开发,能够把XML DOM转换成 JSON的JavaScript library。

xmlObjectifier

jQuery Plugin: Text Highlight

利用javascript对页面中的关键字进行着色的jQuery插件。

jQuery Plugin: Text Highlight

jQuery UI

基于jQuery开发的一套UI框架。包括一些常用的工具,特效,UI控件。Accordion,Calendar,Dialog(模式浮动对话框与确认框),Slider,Table (可排序的表格),Tabs,Menu,Tree,Uploader等。

jQuery UI

FastFind Menu Script

可拖动的嵌套菜单窗体,基于动态”AJAX”响应。

FastFind Menu Script

iconDock

iconDock一个基于jQuery开发的Fisheye menu。

iconDock

jqUploader

结合Javascript与Flash开发,拥有上传进度条的文件上传控件。

jqUploader

jQuery UI Datepicker

基于jQuery开发的日期选择控件。

jQuery UI Datepicker

jQuery UI Tabs

jQuery UI Tabs:一个功能强大,易于使用的Tab控件。

jQuery UI Tabs

JQuery Portlets

这个jQuery插件提供一些Portlets功能包括:drag/drop,expand,collapse 等。

JQuery Portlets

jstree

jsTree是一个基于jQuery的Tree控件。支持XML,JSON,Html三种数据源。提供创建,重命名,移动,删除,拖\放节点操作。可以自己自定义创建,删除,嵌套,重命名,选择节点的规则。在这些操作上可以添加多种监听事件。

jstree

jScrollPane

jScrollPane这个jQuery插件可以让你通过简单的CSS设置就能够替换所有分块元素在浏览器中默认的垂直滚动条样式。

jScrollPane

EasyDrag jQuery Plugin

这个jQuery Plugin能够为大部DOM元素添加拖放功能。

EasyDrag jQuery Plugin

jQuery Corner

不需要图片就能够创建各种圆角形状的jQuery插件。

jQuery Corner

JQuery Curvy Corners

用于创建圆角的jQuery插件。压缩之后大小只有9k。

JQuery Curvy Corners

jQuery Corner

更多圆角效果的jQuery插件。

jQuery Corner

jQuery Ajax Rater Plugin

能够动态创建Ajax Rater的jQuery插件。

jQuery Ajax Rater Plugin

jCarousel Lite

这个jQuery插件能够帮助你以滚动(carousel)的方式来组织图片和其它内容。

jCarousel Lite

jCarousel

jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序,列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。

jCarousel

jQchart

基于Canvas+jQuery,可拖放/交互的简单图形控件。

jQchart

Accordion Menu script

基于jQuery开发的可折叠菜单。

Accordion Menu script

jQuery File Tree

jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS 定制外观,指定文件树展开图标,可以自己定义展开/收缩事件、速度,配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。

jQuery File Tree

Farbtastic

Farbtastic是一个采用jQuery开发的颜色选择器控件。

Farbtastic

Damn Small Rich Text Editor

基于jQuery开发,压缩之后只有18k左右的Rich Text Editor。提供所有基本的RichText功能,调整文本区域大小,使用AjaxFileUpload插件上传图片,清除HTML标签,标记文本修改,支持多种浏览器(FF1.5+、IE7、IE6)。此外还支持通过插件来扩展文本处理功能。

Damn Small Rich Text Editor

jQuery Impromptu

用于创建模式对话框,确认对话框,输入内容对话框的jQuery插件。

jQuery Impromptu

Spacegallery-Jquery

一个采用jQuery开发,类似于Flash效果的图库(image gallery)。

Spacegallery-Jquery

jQuery Slider Gallery

这是一个基于jQuery开发相册控件,类似于Apple网站上用于展示产品的效果。

jQuery Slider Gallery

jQuery Color Picker

一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。

jQuery Color Picker

jQuery Cycle Plugin

jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果:shuffle、zoom、fade、turnDown、curtainX、scrollRight。

jQuery Cycle Plugin

Ingrid

这个jQuery DataGrid提供的功能有:可以拖动调整列宽,分页,排序,设置行/列样式等。

Ingrid

jFeed

jFeed是一个基于jQuery开发的RSS/ATOM Feed解析器。 jFeed能够解析RSS0.91、0.92、1.0、2.0和Atom1.0 Feeds。

jFeed

https://www.docsj.com/doc/906445205.html,bobox

https://www.docsj.com/doc/906445205.html,bobox是一个采用jQuery开发的combobox控件,可以使用CSS控制该combobox的外观,可以设置各种不同风格的下拉动画效果。

https://www.docsj.com/doc/906445205.html,bobox

jquery.sparkline

这是一个用于生成迷你型线状图的jQuery插件。

jquery.sparkline

jQuery.UI ProgressBar Widget

采用jQuery开发的进度条控件。

jQuery.UI ProgressBar Widget

jQuery.UI Messenger\Outlook like message notification Widget

这个jQuery.UI控件类似于Messenger\Outlook消息弹出提醒框。

jQuery.UI Messenger\Outlook like message notification Widget

jQuery

jQuery是一个快速、简洁的JavaScript框架,帮助你简化查询DOM对象,处理事件,制作动画,和处理Ajax交互过程。利用jQuery将改变你编写JavaScript 代码的方式。原先用20行代码完成的功能,jQuery用10行就可以轻松搞定。

jQuery

Zoomimage

该jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。

Zoomimage

prettyPhoto

prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果,图库浏览等特性。

prettyPhoto

ThickBox

ThickBox是一个模式对话框UI控件。基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容。

ThickBox

Ajax Poll

利用jQuery的Ajax和动画效果并给合PHP开发的投票系统。

Ajax Poll

prettyCheckboxes

一个简单的jQuery插件用于定制checkboxe和radio按纽的外观。

prettyCheckboxes

Galleria

Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以在图片加载时执行一些动作。

Galleria

jGrow

jGrow这个jQuery插件能够让textarea根据文本的长度自动调整它的大小。

jGrow

jQuery Flash Plugin

一个jQuery插件用于在页面中嵌入Flash影片。

jQuery Flash Plugin

jQuery.SerialScroll

jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件,支持水平/垂直方向滚动和混合滚动效果。

jQuery.SerialScroll

jQuery plugin: Autocomplete

自动完成输入框值让用户能够快速查找和过滤某些值。

jQuery plugin: Autocomplete

jSuggest

模仿Google Suggest功能的AutoComplete jQuery插件。

jSuggest

jQuery API

本文档旨在帮助广大javascript爱好者快速了解jquery库,以及供广大应用jquery进行开发的人员提供一个速查手册!本文档资源来自于https://www.docsj.com/doc/906445205.html,,部分内容直接翻译或copy自https://www.docsj.com/doc/906445205.html,!感谢jquery框架开发者John Resig 及其所在的jQuery team.为我们提供这么好的javascript开发类库,感谢https://www.docsj.com/doc/906445205.html,为翻译做出的努力!

jQuery API

jQueryAPI_CHM

最新jQuery API中文手册。本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。jQueryAPI_CHM

FancyBox

基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该Lightbox除了能够展示图片之外,还可以展示iframed内容, 通过CSS自定义外观。

FancyBox

jQuery1.2 API 中文版手册

仿Visiul jQuery的样式的jQuery1.2 API 参考文档中文版。

jQuery1.2 API 中文版手册

JQuery Progress Bar

基于jQuery开发的进度条控件。在其网站上提供一个可以显示文件上传进度的例子,服务器端采用PHP处理。

JQuery Progress Bar

jQuery Form Plugin

为表单(Form)提供全面Ajax支持,包括文件上传功能的jQuery插件。提供的方法/功能包括:ajaxForm、ajaxSubmit、formToArray、formSerialize、fieldSerialize、fieldValue、clearForm、clearFields、resetForm。这些方法能够让你轻松地管理Form中的数据和Form无刷新提交。

jQuery Form Plugin

jTemplates

基于jQuery开发的javascript模板引擎。

jTemplates

Animated Collapsible DIV

为任何DIV层添加Web2.0风格的动画隐藏/显示效果。

Animated Collapsible DIV

InnerFade

InnerFade这个jQuery插件能够让任意一组元素(img,div等)实现淡入淡出播放效果。

InnerFade

pager jQuery plug-in

jQuery分页插件。

pager jQuery plug-in

Coda Popup Bubbles

采用jQuery开发,类似“冒泡”效果的提醒弹出框。

Coda Popup Bubbles

Simple Effects Plugins

jQuery特效插件,可以实现收缩,隐藏,显示,淡入/淡出和上下滑动效果等.

Simple Effects Plugins

mcDropdown jQuery Plug-in

mcDropdown是一个独特的UI控件,它能够让用户在一个复杂分级的树形下拉选项中进行选择。

mcDropdown jQuery Plug-in

jQuery.Hotkeys plugin

这个jQuery插件能够帮助你快速创建键盘触发事件。支持任意组合键。

jQuery.Hotkeys plugin

jGrowl

jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。

jGrowl

jQuery Grid

jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。

Demo

jQuery Grid

jMP3

jMP3是一个采用jQuery开发的JavaScript MP3插放器,提供一种可以在页面上直接播放MP3的简便方式。

jMP3

jQuery Multiple File Upload Plugin

多文件上传插件(jQuery.MultiFile)能够让用户一次性选择多个要上传的文件。此外该插件还提供一些基本的校验功能比如:文件扩展名校验。

jQuery Multiple File Upload Plugin

Masked Input Plugin

Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。

Masked Input Plugin

jQuery password strength meter

用于检测密码强度的jQuery插件。

jQuery password strength meter

Pure

Pure是一个基于jQuery开发,能够动态生成HTML的JavaScript模板引擎。支持JSON数据。

Pure

Star Rating widget

采用jQuery框架开发的评价控件。

Star Rating widget

NyroModal

一个基于jQuery开发,非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容,改变对话框大小等。

NyroModal

Chain.js

Chain.js是一个提供数据绑定功能的jQuery插件。用于自动生成Web内容,有利于数据与表现相分离。

Chain.js

Superfish

jQuery菜单插件。支持水平/垂直方向。弹出子菜单不会被 * 电子邮件: * 网址: //jQuery 代码 $(function () {

jquery选择器 之 获取父级元素、同级元素、子元素

jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。 如:$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素()。 如:$("span").parents();

也可以使用可选参数来过滤对祖先元素的搜索。 如:$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 如:$("span").parentsUntil("div");

2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如:$("h2").siblings(); 返回属于

的同胞元素的所有元素: $("h2").siblings("p");

2.2 next() 方法返回被选元素的下一个同胞元素。 如:$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如:$("h2").nextAll();

2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 如:$("h2").nextUntil("h6");

2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。 如:$("div").children(); 返回类名为"1" 的所有元素,并且它们是

的直接子元素。$("div").children("p.1");

jQuery 插件开发详解

JavaScript jQuery 插件开发 jQuery 插件开发其实很简单 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件 经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。 【基础】 a)样式 很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,paddi ng,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举个简单的例子,一个简单的页面,马虎的人: 复制代码代码如下: Test Page jQuery是一个框架!压缩后有30多k吧。

细心的人: 复制代码代码如下: Test Page jQuery是一个框架!压缩后有30多k吧。 专心的人: [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 我们对比一下三者的UI效果:

jQuery选择器

$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")

对这里的p段落标签有效.但对

对这里的p段落标签无效,这里要用 $("div .test) 5.临近选择器: $("mix+mix"),选取下一个兄弟节点.如:$("div +#test"),id为test的的节点必须是div的下一个兄弟节点.

在$("div + #test")中能取到p段落节点

则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:

JQUERY插件JQGRID常用属性说明

希望这个帮助文档能对jQuery插件的学习有所帮助 jqGrid包说明: jquery.js is the jQuery library, jquery.jqGrid.js主单元,包含的功能取决您的选择 grid.basic.js主插件其他插件包依赖于该插件正常运行 grid.custom.js Grid高级插件功能包 grid.formedit.js用于表格编辑、增加、删除功能 grid.inlinedit.js线条编辑 grid.subgrid.js一个处理表格的插件 grid.postext.js一个可以用来操作post数据的包 jqModal.js模态对话框的编辑 jqDnR.js可拖拉的表格编辑 themes包含gird需要的样式表 一、功能描述: jqGrid包主要用于将需要展示的数据动态的展示在页面的上,即动态画出表格,并封装了增、删、改、查、分类显示、在线编辑修改等功能。 二、关键使用说明: 1、导入jqGrid包,在首页属性里面添加如下包的信息 注:由于加载js包会耗费大量资源,建议动态加载这些js包,优化页面初始化效率。 2、在页面上需要添加表格的地方,增加

list表格id,pager为表格导航条id

Jquery插件的使用--AutoComplete

Jquery插件的使用--AutoComplete Jquery插件是很不错的一种客户体验,今天就来讲讲我使用的AutoComplete插件,首先需要做一些准备工作:这3个文件还是少不了的(可以到Jquery官网去下载) 一、直接使用构造的json数据来实现 然后当然是写js代码了,首先来个稍微简单点的,最后的一个列子讲解如何从数据库中提取数据来实现这个效果(实际上都差不多) 引入。 简单的jQuery示例

50多个强大的jQuery插件应用实例.

50多个强大的jQuery插件应用实例 原文:50+ Amazing Jquery Examples- Part1 jquery是近段时间里比较流行的一个javascript框架,不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。这仅仅是第一个系列,你先品尝,第二道大餐即将到来。 Sliding Panels -滑动门控制 1 Sliding Panels For jQuery -元素可以展开或关闭,创建出手风琴的滑动效果。 (2 jQuery Collapse-这个jQuery插件同样点击后滑动展开或关闭DIV层。 Menu -菜单 3 LavaLamp (4 A Navigation Menu- 锚链接的无序列表嵌套, 可以添加2级菜单

(5 SuckerFish Style Tabs –选项卡 6 jQuery UI Tabs / Tabs 3–基于 jQuery 的一个Tab选项卡导航 (7 TabContainer Theme–当用户在选项卡之间进行切换时,产生JQuery风格的淡出动效果。 Accordion-手风琴效果 8 jQuery Accordion Demo (9 Simple JQuery Accordion menu

SlideShows -幻灯片 10 jQZoom-让你在你的网页上很简单的实现图片的缩放功能。 (11 Image/Photo Gallery Viewer- 一个图像/相片的画廊展示插件。可以让你对图片进行分组、并产生像Flash一样的多种浏览特效。 Transition Effects –过渡特效 12 InnerFade –可以让网页中的任何元素产生淡化效果 (13 Easing Plugin-另外一个简单的过渡效果插件 (14 Highlight Fade (15 jQuery Cycle Plugin- 拥有多种过渡效果的一个Gallery插件。

jquery常用的选择器整理

jquery: 基本的选择器: $('#id').css('color','blue');//根据id属性为id,设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器: $('div span');//在div内部获得span节点,不考虑层次,只获得div内第一个span节点,,注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点,获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器: $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值,大于某个范围 lt(索引值) less than 节点索引值,小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点

jQuery选择器种类

jQuery选择器种类 由于经常使用jQuery,但是其中的很多选择器又不太能够熟练记牢使用,所以趁着上周有人分享,我再仔细的把jQuery的选择器过一遍,争取一次拿下,以后做到运用自如。jQuery选择器主要来分可以分为三种:(1)基本选择器(2)层次选择器(3)过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中,是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素,返回集合$("#div,.class,input") 2、层次选择器(主要是选择层次下面的元素) $("E F") 选择E元素中的所有F后代元素(注意:是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素(注意:是子元素)返回集合 $("P+N") 选择P元素后的相邻元素(即下一个兄弟元素),和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素,和$("P").nextAll("S")方法执行效果相同,另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别:siblings()是所有前后的兄弟元素,nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替

jQuery多图上传插件imgUp.js

本文由我司收集整编,推荐下载,如有疑问,请与我司联系 jQuery 多图上传插件imgUp.js 2017/08/07 0 开发环境:idea mysql 效果: 前台步骤如下: 1)首先导入imgPlugin.js 注:实际项目中使用的时候只需要引用:imgPlugin.js 这个就可以了,因为这 个是对imgUp.js 的封装 script type= text/javascript src= ../style-wechat/js/imgPlugin.js /script 2)在页面中加入它需要的js script type= text/javascript var imgUrls= ; $( #file ).takungaeImgup({ formData: { name : file }, url: 192.168.1.109:8080/imgUp , success: function(data) { imgUrls =data.url , ; }, error: function(err) { alert(err); } }); function addComm(){ jQuery.ajax({ url: /addComment.action , type: ‘POST’,data: {‘imageUrls’:imgUrls}, dataType: ‘json’, success: function (data) { alert( 发布成功); } }) } /script 3)在页面 中代码添加内容div > section > div > section > img src= ../../style- wechat/images/a11.png > input type= file name= file id= file > /section /div /section /div aside > div > p > p > /div /aside 后台接受图片代码: tips:感谢大家的阅读,本文由我司收集整编。仅供参阅!

Jquery选择器分类应用(最全最新)

现在我们开始Jquery 的选择器之旅哈哈。 下面的选择器分类中, 带有“过滤器”的分类表示是“过滤”选择器, 否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类: [说明] 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的 元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几 个选择器匹配的内容. $("#divId, a, .bgRed") [学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节“jQuery 选择器实验室”进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询。 2.层次选择器 Hierarchy

child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点

  • 对 象. prev + next prev和next是两个同级别的元 素. 选中在prev元素后面的next元 素. $("#hibiscus+im g")选在id为hibiscus元素后面的img对象. prev ~ sibling s 选择prev后面的根据siblings 过滤的元素 注:siblings是过滤器 $("#someDiv~[ti tle]")选择id为someDiv 的对象后面所有带有title 属性的元素 3.基本过滤器Basic Filters 名称说明举例 :first匹配找到的第一个元素查找表格的第一 行:$("tr:first") :last匹配找到的最后一个元素查找表格的最后一 行:$("tr:last") :not(selector)去除所有与给定选择器匹配的元 素 查找所有未选中的 input 元素: $("input:not(:checked )") :even匹配所有索引值为偶数的元素,从 0 开始计数 查找表格的1、3、5...行:$("tr:even") :odd匹配所有索引值为奇数的元素,从 0 开始计数 查找表格的2、4、6行:$("tr:odd") :eq(index)匹配一个给定索引值的元素 注:index从0 开始计数 查找第二行:$("tr:eq(1)") :gt(index)匹配所有大于给定索引值的元素 注:index从0 开始计数 查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)") :lt(index)选择结果集中索引小于N 的 elements 注:index从0 开始计数 查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)") :header选择所有h1,h2,h3一类的 header标签. 给页面内所有标题 加上背景色: $(":header").css("bac kground", "#EEE"); :animated匹配所有正在执行动画效果的元只有对不在执行动

    完整版(JQuery语法)

    jQuery 语法 您可以选取(查询,query)HTML 元素,并对它们执行“操作”(actions)。 jQuery 语法实例 $(this).hide() 演示jQuery hide() 函数,隐藏当前的HTML 的元素。 $("#test").hide() 演示jQuery hide() 函数,隐藏id="test" 的元素。 $("p").hide() 演示jQuery hide() 函数,隐藏所有 元素。 $(".test").hide() 演示jQuery hide() 函数,隐藏所有class="test" 的元素。 jQuery 语法 jQuery 语法是为HTML 元素的选取编制,可以对元素执行某些操作。 基础语法是:$(selector).action() ?美元符号定义jQuery ?选择符(selector)“查询”和“查找” HTML 元素 ?jQuery action() 执行对元素的操作 实例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有class="test" 的段落 $("#test").hide() - 隐藏所有id="test" 的元素 提示:jQuery 使用的语法是XPath 与CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有jQuery 函数位于一个document ready 函数中:

    这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。 jQuery 选择器 选择器允许您对元素组或单个元素进行操作。 jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。 关键点是学习jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。选择器允许您对HTML 元素组或单个元素进行操作。 在HTML DOM 术语中: 选择器允许您对DOM 元素组或单个DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用CSS 选择器来选取HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有class="intro" 的 元素。 $("p#demo") 选取id="demo" 的第一个 元素。 jQuery 属性选择器 jQuery 使用XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有href 属性的元素。 $("[href='#']") 选取所有带有href 值等于"#" 的元素。

    jQuery插件(plugin)设计开发参考教程,jQuery plugin开发解析,jQuery 插件学习与开发

    jQuery插件开发全解析 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery 的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展: 1.1 添加一个新的全局函数 添加一个全局函数,我们只需如下定义: Javascript代码 1jQuery.foo = function() { 2alert('This is a test. This is only a test.'); 3}; 1.2 增加多个全局函数 添加多个全局函数,可采用如下定义: Javascript代码 4jQuery.foo = function() { 5alert('This is a test. This is only a test.'); 6}; 7jQuery.bar = function(param) { 8alert('This function takes a parameter, which is "' + param + '".'); 9}; 10调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar'); 1.3 使用jQuery.extend(object); Javascript代码 11jQuery.extend({

  • 相关文档
    相关文档 最新文档