Jquery学习笔记
文章平均质量分 91
在奋斗的大道
程序发烧友
展开
-
Jquery 菜单插件之 Superfish jQuery菜单
大家如果想了解"Superfish jQuery菜单"插件,可以查看我发布的一篇“关于JQuery 菜单插件”,这里已经告诉我们该jQuery菜单插件的相关优势和下载地址,在下载中包含基础的Demo,初始者可以依次入门。接下来,我们进入我们开发重点:第一步:首先,查看我们基于Superfish jQuery菜单插件实现的效果。第二步:查看静态HTML源代码,是如原创 2015-08-25 22:08:33 · 961 阅读 · 0 评论 -
jQuery 入门教程(36): jQuery UI Menu 示例
jQuery Menu 组件可以应用到任何具有父/子关系的元素,就其变为菜单,但通常使用u>,li ,如果你希望使用除 ul,li 之外的元素,可以通过menus 来配置。下例使用缺省的 ui和 li 菜单支持选择事件select,因此可以为菜单添加事件处理。基本用法12html lang="en"原创 2014-01-15 13:03:44 · 961 阅读 · 0 评论 -
jQuery 入门教程(34): jQuery UI Dialog 示例(二)
模式对话框如想对话框显示为模式的,可以通过配置modal: true来设置。12html lang="en">3head>4 meta charset="utf-8" />原创 2014-01-15 13:00:41 · 578 阅读 · 0 评论 -
jQuery 入门教程(33): jQuery UI Dialog 示例(一)
jQuery Dialog组件用来显示对话框,模式或非模式的。基本用法12html lang="en">3head>4 meta charset="utf-8" />5原创 2014-01-15 12:59:33 · 744 阅读 · 0 评论 -
jQuery 入门教程(26): jQuery UI Button示例(一)
jQuery Button 组件可以增强表单(Form)中的Buttons,Inputs和Anchor元素,使其具有按钮显示风格,能够正确对鼠标滑动做出反应。基本用法下例显示把表单中的button,input和anchor元素都变为按钮风格的jQuery Button组件。12html lang="原创 2014-01-15 12:51:25 · 1249 阅读 · 0 评论 -
jQuery 入门教程(40): jQuery UI Spiner 示例
Spinner 主要用来输入各种格式的数字,可以使用鼠标滚轮,键盘方向键来修改输入值,也支持直接键入数字。支持本地化的输入金额和时间。基本用法下面代码显示了Spinner的基本用法,设置和取得Spinner的当前值。12html lang="en">3原创 2014-01-15 13:07:15 · 744 阅读 · 0 评论 -
jQuery 入门教程(37): jQuery UI Progressbar 示例
前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。在使用进度条时,如果可以预知进度的大小,可以设置Max大小,如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。基本用法12html lang="en">原创 2014-01-15 13:04:36 · 629 阅读 · 0 评论 -
jQuery 入门教程(32): jQuery UI Datepicker 示例(五)
设置可以选择的日期范围有时希望用户在给定的日期内选择,比如预约会议的时间,只能在当天开始的一个月带10天以内。这时可以通过配置minDate和maxDate 来设置,如果minDate或maxDate 没有配置,表示没有最小日期或最大日期的限制。12html lang="en">原创 2014-01-15 12:58:52 · 740 阅读 · 0 评论 -
jQuery 入门教程(31): jQuery UI Datepicker 示例(四)
DatePicker支持使用另外的按钮控制日期选择界面显示,可以通过自定义的图标来显示这个按钮。12html lang="en">3head>4 meta charset="utf-8" />原创 2014-01-15 12:57:58 · 667 阅读 · 0 评论 -
jQuery 入门教程(38): jQuery UI Slider 示例(一)
jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件,滑动条可以支持多个滑块用来设置单个值或一个值域。基本用法12html lang="en">3head>4 meta charset=原创 2014-01-15 13:05:21 · 840 阅读 · 0 评论 -
jQuery 入门教程(22): jQuery UI Accordion示例
本篇介绍Accordion组件(类似手风琴可以折叠的UI组件)。基本用法jQuery Accordion UI组件可以把一个包含有具有Header (标题头)和Content(内容)对的容器转变成Accordion组件。比如如下一个Id=”accordion”Div HTML元素。1div id="accordion">原创 2014-01-15 12:45:38 · 820 阅读 · 0 评论 -
jQuery 入门教程(23): jQuery UI Autocomplete示例(一)
AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。这可以用作之前输入过的内容也可以用作自动填充相关内容,比如根据城市名,自动填充邮编等。你可以使用本地数据源或是远程数据源,本地数据一般使用小数据集合,比如包含50条记录的通讯录,远程数据源一般为保护大量记录的数据库。基本用法本例为使用AutoCo原创 2014-01-15 12:47:19 · 1090 阅读 · 0 评论 -
jQuery 入门教程(43): jQuery UI Tooltip 示例
JQuery tooltip 的基本用法,可以把所有元素的的 title 属性做为Toolbar显示,比如:12html lang="en">3head>4 meta charset="utf-8" />原创 2014-01-16 19:11:19 · 899 阅读 · 0 评论 -
jQuery 入门教程(42): jQuery UI Tab 示例(二)
支持收缩和展开缺省情况下,标签页是展开的,可以通过设置collapsible为true使得标签页支持收缩和展开。1script>2 $(function () {3 $("#tabs").tabs({4原创 2014-01-16 19:10:32 · 747 阅读 · 0 评论 -
jQuery 入门教程(41): jQuery UI Tab 示例(一)
Tab 显示多个标签页,每个标签含有一个标签头和一个Panel(显示标签的内容)。基本用法首先使用HTML定义用来作为Tab,一般使用列表(ul ,li) 来定义标签页的标题,每个标题使用href 链接到每个页面的内容页,比如下例定义了三个标签页:1div id="tabs">2 u原创 2014-01-16 19:09:31 · 720 阅读 · 0 评论 -
jQuery 入门教程(39): jQuery UI Slider 示例(二)
前面的slider 例子Slider都是水平显示的,Slider也可以显示成垂直的,这可以通过配置orientation ,将其值设为“vertical”。基本用法12html lang="en">3head>4原创 2014-01-15 13:06:04 · 769 阅读 · 0 评论 -
jQuery 入门教程(35): jQuery UI Dialog 示例(三)
本篇使用Dialog 构造一个比较实用的对话框,它可以内嵌一个表单用来接受用户输入,每个输入框支持数据校验,部分使用正则表达式来检验。12html lang="en">3head>4 meta charset="u原创 2014-01-15 13:02:15 · 907 阅读 · 0 评论 -
jQuery 入门教程(30): jQuery UI Datepicker 示例(三)
格式化日期可以通过日期格式重新定义Datepicker显示日期时的格式。12html lang="en">3head>4 meta charset="utf-8" />5原创 2014-01-15 12:57:03 · 836 阅读 · 0 评论 -
jQuery 入门教程(27): jQuery UI Button示例(二)
本例为使用jQuery的一个实用的例子,显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标(比如ui-icon-seek-end等)。12html lang="en">3head>4原创 2014-01-15 12:53:17 · 706 阅读 · 0 评论 -
jQuery 入门教程(25): jQuery UI Autocomplete示例(三)
AutoComplete在用户输入时,可以根据用户输入给出提示。其数据源可以来自本地,也可以使用远程数据源,AutoComplete 的DataSource可以使用一个Function,本篇中的Function,我们使用JSONP查询。 当数据源为Function时,其函数定义为:Function( Object request, Function response( Obje原创 2014-01-15 12:50:22 · 976 阅读 · 0 评论 -
jQuery 入门教程(24): jQuery UI Autocomplete示例(二)
如果一个输入框可以接受多个输入项,比如选择你喜欢的语言,以逗号隔开,这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外,还需要添加一些事件处理。12html lang="en">3head>原创 2014-01-15 12:49:19 · 762 阅读 · 0 评论 -
jQuery 入门教程(29): jQuery UI Datepicker 示例(二)
显示月份和年份选择下拉框changeMonth 和changeYear 选择可以打开和关闭月份和年份下拉选择框。12html lang="en">3head>4 meta charset="utf-8" />原创 2014-01-15 12:56:08 · 705 阅读 · 0 评论 -
jQuery 入门教程(28): jQuery UI Datepicker 示例(一)
jQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件,你可以配置显示日期的格式,语言,限制所能选择的日期范围,添加按钮等。基本用法如下:12html lang="en">3head>4原创 2014-01-15 12:55:08 · 736 阅读 · 0 评论 -
jQuery 入门教程(19): jQuery UI 概述
前面介绍了jQuery的基本用法,jQuery UI 是一套 JavaScript 函式库,提供抽象化、可自订主题的 GUI 控制项与动画效果。基于 jQuery JavaScript 函式库,可用来建构互动式的Web应用。它的基本功能有:互动拖曳(Draggable) – 让元素可以用滑鼠拖曳。拖放(Droppable) – 让控制项可以接受其原创 2014-01-14 14:34:07 · 811 阅读 · 0 评论 -
jQuery 入门教程(21): jQuery UI 示例
上篇介绍了使用jQuery UI基本工作过程,后面就逐个介绍jQuery UI库内置的UI组件,支持的拖放,动画效果等,如果你之前看过Yii Framework教程 ,PHP Yii Framework封装了jQuery UI组件,有兴趣的可以看一看。Yii Framework 开发教程(29) Zii组件-Menu 示例Yii Framework 开发教程转载 2014-01-14 14:36:23 · 1032 阅读 · 0 评论 -
jQuery 入门教程(20): jQuery UI 基本工作过程
本篇介绍JQuery UI组件的基本工作过程,以进程条(Progressbar)为例介绍JQuery UI组件工作的基本过程。初始化大部分JQuery Ui组件都可以保持其状态,因此为了能够跟踪UI组件的状态,jQuery UI组件也有一个生命周期,这个生命周期从初始化开始,为了初始化一个UI组件,一般在某个HTML元素调用UI组件(插件)方法。,比如原创 2014-01-14 14:35:02 · 641 阅读 · 0 评论 -
jQuery 入门教程(14): 添加HTML元素
使用jQuery可以方便的添加新的HTML元素。下面的方法用于添加HTML元素:append() – 在指定的元素的尾部添加一个新内容。prepend() -在指定的元素里前部添加新内容。after() – 在指定元素后添加新内容before() -在指定元素的前面添加新内容。乍一看append,prepend 和after,before似乎功能一样原创 2014-01-14 14:28:10 · 667 阅读 · 0 评论 -
jQuery 入门教程(12): HTML Get
jQuery库包含了很多用来改变和操作HTML元素及其属性的方法。其中一个非常重要的部分就是jQuery可以用来操作DOM。本篇介绍使用jQuery来取得DOM节点元素的值或属性。其中三个简单而有用的方法如下:text() – 设置或取得指定元素的文本内容。html() – 设置或取得指定元素的内容(包括HTML标记)val() – 设置或取得表单某个输原创 2014-01-14 14:26:20 · 635 阅读 · 0 评论 -
jQuery 入门教程(9):终止动画
jQuery的使用stop()方法在动画结束之前停止动画。基本语法如下:$(selector).stop(stopAll,goToEnd);可选参数stopAll 指明是否同时清除“动画队列”,缺省为false.意味着只停止当前活动的动画,之后的动画则继续运行。可选参数goToEnd 指明是否立即结束当前动画,缺省为false.因此缺省的stop()动作为终止指定HTM原创 2014-01-14 14:23:05 · 512 阅读 · 0 评论 -
jQuery 入门教程(8): 动画效果
前面的hide/show,slide in/out其实也具有动画效果,本篇介绍使用animate()实现自定义动画效果。基本语法如下:$(selector).animate({params},speed,callback);必选的参数为params,定义CSS用于动画效果的的属性。可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)原创 2014-01-14 14:22:10 · 560 阅读 · 0 评论 -
jQuery 入门教程(2): 基本语法
学习jQuery之前需要你有下面几个方面的基本知识HTMLCSSJavaScriptjQuery 的基本语法$(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样。action() 定义操作该HTML元素的方法。原创 2014-01-14 14:13:50 · 624 阅读 · 0 评论 -
jQuery 入门教程(6): 淡入淡出效果
jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:fadeIn()fadeOut()fadeToggle()fadeTo()fadeIn()方法fadeIn() 实现淡入效果,其基本语法如下:$(selector).fadeIn(speed,callback);可选参数speed给出了淡入效果的时间,可以使用 “slow原创 2014-01-14 14:19:56 · 560 阅读 · 0 评论 -
jQuery 入门教程(1): 概述
jQuery是一套跨浏览器的JavaScript函式库,简化HTML与JavaScript之间的操作,下面为摘自Wikepedia上的jQuery说明:jQuery 是开源软件,使用MIT许可证授权。[4] jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery 也提供了给开发人员在原创 2014-01-14 14:11:29 · 572 阅读 · 0 评论 -
jquery validate 详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation一导入js库二、默认校验规则(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)原创 2014-01-13 23:33:56 · 611 阅读 · 0 评论 -
jQuery 入门教程(4): Events
学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标,单击按钮等。下面为常见的DOM事件:鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangere原创 2014-01-14 14:17:11 · 531 阅读 · 0 评论 -
jQuery 入门教程(18): 操作HTML元素的大小
jQuery 提供下面方法来控制HTML元素的大小:width()height()innerWidth()innerHeight()outerWidth()outerHeight()一般影响HTML元素 大小各部分的示意图如下所示: jQuery width()和height()方法width()用来设置或取得元素的宽度,height()设置和取得元素的高度。原创 2014-01-14 14:33:06 · 504 阅读 · 0 评论 -
jQuery 入门教程(17): 读写HTML元素的css 属性
jQuery 的css()方法用来设置或读取HTML元素的css属性。读取元素的CSS语法语法如下:css(“propertyname“);比如下面代码取得第一个元素的背景颜色。[javascript] view plaincopyprint?$("p").css("background-color"); $("p").css("bac原创 2014-01-14 14:31:57 · 605 阅读 · 0 评论 -
jQuery 入门教程(16): 设置或取得元素的CSS class
jQuery支持方法用来操作HTML元素的CSS 属性下面的方法为jQuery 提供的CSS操作方法:addClass() – 为指定的元素添加一个或多个CSS类。removeClass() – 为指定的元素删除一个或多个CSS类。toggleClass() – 为指定的元素在添加/删除CSS类之间切换。css() -设置或是取得CSS类型属性。下面的StyleSheet为原创 2014-01-14 14:30:57 · 570 阅读 · 0 评论 -
jQuery 入门教程(15): 删除HTML元素
jQuery使用下面两个方法来删除或是清空某个HTML元素。remove() – 删除指定的元素(包括其子元素)empty() – 清空指定元素的子元素例如:[html] view plaincopyprint?> html> head> meta charset="utf-8"> title>JQue原创 2014-01-14 14:29:07 · 762 阅读 · 0 评论 -
jQuery 入门教程(13): HTML Set
上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值。text() – 设置或取得指定元素的文本内容。html() – 设置或取得指定元素的内容(包括HTML标记)val() – 设置或取得表单某个输入域的值。比如下面代码就是使用上面三种方法给HTML元素或Form赋值[javascript] view plainc原创 2014-01-14 14:27:06 · 704 阅读 · 0 评论