《JQuery教程自学笔记》由会员分享，可在线阅读，更多相关《JQuery教程自学笔记（111页珍藏版）》请在金锄头文库上搜索。
1、JQuery教程自学笔记JQuery教程自学笔记1一、概述4二、JQuery技术综述52.1 JQuery基本语法52.1.1 JQuery选择器62.2 JQuery事件响应82.2.1 常见的JQuery事件92.2.2 淡入淡出效果122.2.3 滑动效果152.2.4 动画效果182.2.5 终止动画202.2.6 回调函数202.2.7 方法链222.3 HTML操作232.3.1 HTML 取值232.3.2 HTML 赋值252.3.3添加HTML元素282.3.4设置或取得元素的CSS class342.3.5读写HTML元素的css 属性362.3.6 操作HTML元素的长宽
2、大小37三、JQuery UI393.1 概述393.2 JQuery UI 基本工作过程413.2.1初始化413.2.2 方法423.2.3 通用方法423.2.4 事件433.2.5 共有事件433.3 JQuery UI示例443.3.1 Accordion组件（手风琴似折叠）443.3.2 JQuery UI Autocomplete（自动完成）563.3.3 JQuery UI Button（按钮）633.3.4 JQuery UI Datepicker (时间控件)693.3.5 JQuery UI Dialog (对话框)793.3.6 JQuery UI Menu （JQue
3、ry菜单）883.3.7 JQuery UI Progressbar (进度条)923.3.8 JQuery UI Slider (滑动条)963.3.9 JQuery UI Spiner (微调框)1013.3.10 JQuery UI Tab (标签页)103 3.3.11 JQuery UI Tooltip (提示条)-111参考：http:/ 是开源软件，使用MIT许可证授权。4 JQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。JQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员
4、可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 JQuery 函数库能够创建功能强大的动态网页以及网络应用程序。JQuery有下列特色:跨浏览器的DOM元素选择DOM巡访与更改：支援CSS 1-3与 基本的XPath，JQuery 1.2版以后默认取消XPath支持，改为插件支持事件（Events）CSS操纵特效和动画（移动显示位置、淡入、淡出）Ajax延伸性（Extensibility）工具：例如浏览器版本和each函数。JavaScript插件轻量级下载jquery可在http:/ Learningscript src=/js/jquery/jquery-1.1
5、0.2.js 二、JQuery技术综述2.1 JQuery基本语法$(selector).action() $ 符合定义这是一个JQuery语句 (selector) 用来选择某个HTML元素，其语法和CSS的selector语法一样。action() 定义操作该HTML元素的方法。比如：$(this).hide() 隐藏当前元素.$(“p”).hide() 隐藏所有 元素.$(“.test”).hide() -隐藏所以类名为test的元素.$(“#test”).hide() - 隐藏ID为test的元素。几乎所有的JQuery 都有如下的代码：$(document).ready(functi
6、on() / JQuery methods go here. ); 这为Document Ready事件处理器以防止JQuery在页面没有完成载入前就执行。从而可以避免下面类似情况发生：试图隐藏尚未创建好的元素试图获取尚未载入的图片的大小这个方法也可以使用下面简化的方法：$(function() / JQuery methods go here. ); JQuery Selector 是JQuery库中非常重要的一个组成部分。JQuery Selector 用来选择某个HTML元素，其基本语句和CSS的选择器（Selector）是一样的，所有JQuery selector 都是以$()开始。2
7、.1.1 JQuery选择器JQuery Selector 是JQuery库中非常重要的一个组成部分。JQuery Selector 用来选择某个HTML元素，其基本语句和CSS的选择器（Selector）是一样的，所有JQuery selector 都是以$()开始。选择某个HTML元素的方法是直接使用该元素的标记名称，比如选择所有元素$(p)下面的例子当用户点击一个按钮时，隐藏所有的元素$(document).ready(function() $(button).click(function() $(p).hide(); ); );JQuery #id 选择器用来选择定义了id 属性的元素
8、，网页上元素的id应保证是唯一的，你可以使用id来选择单个唯一的元素。比如下面的例子，当点击按钮时，只会隐藏id为test 的元素。JQuery Learningscript src=/js/jquery/jquery-1.10.2.js $(document).ready(function() $(button).click(function() $(#test).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me.class 选择器JQuery .class 选择器选择所有定
9、义了class属性为制定值的所有元素，比如下面的例子 隐藏所有类名称为test的元素：JQuery Learningscript src=/js/jquery/jquery-1.10.2.js $(document).ready(function() $(button).click(function() $(.test).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me更多的例子语法说明$(“*”)选择所以元素$(this)选择当前元素$(“p.intro”)选项所有class=intro的p元素$(“p:first”)选择第一个p元素$(“ul li:first”)选择第一个元素的第一个元素$(“ul li:first-child”)选择每个的第一个 元素$(“href“)
