- 什么是jQuery
jQuery是一个JavaScript函数库，jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展，解决了 JS在不同浏览器中存在着大量的兼容性问题。
- jQuery安装
1、jQuery 库是一个 JavaScript 文件，下载jquery.min.js到项目js文件夹，使用 HTML 的 <script> 标签引用它。
2、通过 CDN（内容分发网络） 引用。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的项目用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你项目用户是国外的可以使用谷歌和微软。
- 选择器
jQuery 选择器是对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1、元素选择器
jQuery 元素选择器基于元素名选取元素（标签）。
2、ID选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
3、类选择器
jQuery 类选择器可以通过指定的 class 查找元素。
4、更多选择器
- 文档对象模型HTML DOM
当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,HTML DOM 模型被构造为对象的树：
- 文档就绪事件
如果在文档没有完全加载之前就运行函数，操作可能失败。
为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作，我们将所有的 jQuery 函数位于一个 document ready 函数中：
文档就绪事件相当于JS的window.onload()，但就绪事件只需要等待DOM加载完成，不需要等待页面内容加载完成。
- 事件方法
页面对不同访问者的响应叫做事件。当 HTML 中发生某些事件时会调用的方法，这些方法称为事件处理程序。
常见 DOM 事件：
jQuery常用方法
- 隐藏和显示
hide() - 方法隐藏HTML 元素。
show() - 方法显示 HTML 元素。
fadeIn () - 方法实现HTML 元素淡入效果
fadeOut() – 方法实现HTML 元素淡出效果
toggle() - 方法用来切换 hide() 和 show() 方法。
fadeToggle() - 方法用来切换 fadeIn() 与 fadeOut() 方法。
【示例】
【示例】
可以规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可以隐藏或显示完成后所执行的回调函数。
- 内容和属性
text() - 设置或返回所选元素的文本内容。
html() - 设置或返回所选元素的内容（包括 HTML 标记）。
val() - 设置或返回表单字段的值。
attr() - 方法用于获取属性值。
prop() - 方法用于获取属性值。
【示例】
- 添加元素
append() - 在被选元素的结尾插入内容。
prepend() - 在被选元素的开头插入内容。
after() - 在被选元素之后插入内容。
before() - 在被选元素之前插入内容。
【示例】用单步调试效果。
- 删除元素
remove() - 删除被选元素（及其子元素）。
empty() - 从被选元素中删除子元素。
【示例】用单步调试效果。
- CSS 类
addClass() - 向被选元素添加一个或多个类。
removeClass() - 从被选元素删除一个或多个类。
toggleClass() - 对被选元素进行添加/删除类的切换操作。
css() - 设置或返回样式属性。
【示例】
- 尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
jQuery遍历
【学时：2，练习：2】
- 遍历DOM
jQuery 遍历，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
图示解析：
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
- jQuery 遍历 - 祖先
parent() - 方法返回被选元素的直接父元素。
parents() - 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
【示例】
- jQuery 遍历 - 后代
children() -方法返回被选元素的所有直接子元素。
find() -方法返回被选元素的后代元素，一路向下直到最后一个后代。
【示例】
- jQuery 遍历 - 同胞
siblings() - 方法返回被选元素的所有同胞元素。
next() - 方法返回被选元素的下一个同胞元素（最大弟弟）。
prev() - 方法返回被选元素的上一个同胞元素（最小哥哥）。
【示例】
- jQuery 遍历- 过滤
first() - 方法返回被选元素的首个元素。
last() - 方法返回被选元素的最后一个元素。
eq() - 方法返回被选元素中带有指定索引号的元素。
filter() - 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() - 方法返回不匹配标准的所有元素。
【示例】
- each()方法
each() 方法为每个匹配元素规定要运行的函数。
【示例】
jQuery事件方法
- 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
事件方法主要有鼠标事件、键盘事件、表单事件等。
常用的事件方法（见jQuery基础）。
- 动态绑定事件
on() – 方法向元素添加事件处理程序。使用js动态产生的控件，只有 on() 能成功的绑定到动态控件中。
off() – 方法移除通过 on() 方法添加的事件处理程序。
one() – 方法向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次。
【示例】
表单验证
- 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE），使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
1、模式
/正则表达式主体/修饰符(可选)
var reg=new RegExp(正则表达式主体,[修饰符])
（1）正则表达式修饰符
（2）正则表达式模式
方括号用于查找某个范围内的字符：
元字符（Metacharacter）是拥有特殊含义的字符：
2、方法
search() - 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
match() - 方法在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
split() - 方法用于把一个字符串分割成字符串数组。
replace() - 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
test() - 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec() - 方法用于检索字符串中的正则表达式的匹配。
【示例】
- 表单验证
- js验证
【示例】根据要求验证表单
- input失去焦点时验证
- 表单提交时验证
- H5验证
表单验证事件（click）会在表单submit事件之前触发，如果验证不通过的话就不会触发表单的submit。而提交时会先验证所有表单元素是值是否有效。
（1） 表单元素约束DOM 方法
setCustomValidity() - 用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，验证不通过，如果要重新判断需要取消自定义提示:setCustomValidity('')
（2）验证对象validity属性约束DOM
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
