1 jQuery 简介
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
1.1 jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。可以通过下面的标记把 jQuery 添加到网页中：
1 | <head> |
2. jQuery 语法
jQuery 语法是为 HTML元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
3. jQuery 效果
- 隐藏和显示
1
2
3
4
5$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback); //切换 hide() 和 show() 方法。
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 - 淡入淡出
1
2
3
4$(selector).fadeIn(speed,callback); //jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeOut(speed,callback); //jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeToggle(speed,callback); //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeTo(speed,opacity,callback); //jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 - 滑动
1
2
3$(selector).slideDown(speed,callback); //jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideUp(speed,callback); //jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideToggle(speed,callback); //jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。 - 动画
1
2
3$(selector).animate({params},speed,callback); //jQuery animate() 方法用于创建自定义动画。
默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> - 停止动画
1
$(selector).stop(stopAll,goToEnd); //jQuery stop() 方法用于停止动画或效果，在它们完成之前。
4. jQuery - 获得内容和属性
4.1 jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法这使访问和操作元素和属性变得很容易。
提示:DOM = Document Object Model（文档对象模型）
- 获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- 获取属性 - attr()
1
2
3$("button").click(function(){
alert($("#w3s").attr("href"));
}); - jQuery - 添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
- jQuery - 删除元素
- remove() - 删除被选元素（及其子元素）
- jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法 - empty() - 从被选元素中删除子元素
- jQuery - 获取并设置 CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- jQuery - css() 方法
- css() 方法设置或返回被选元素的一个或多个样式属性。
1
2
3
4
5
6返回 CSS 属性
$("p").css("background-color"); //设置指定的 CSS 属性
设置 CSS 属性
$("p").css("background-color","yellow");
设置多个 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});
- jQuery - 尺寸
- width(param) width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 param :设置值
- height() height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth() innerWidth() 方法返回元素的宽度（包括内边距）。
- innerHeight() innerHeight() 方法返回元素的高度（包括内边距）。
- outerWidth() outerWidth() 方法返回元素的宽度（包括内边距和边框）。
- outerHeight() outerHeight() 方法返回元素的高度（包括内边距和边框）。
5. jQuery 遍历
- jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
1 | - <div>> 元素是 <ul> 的父元素，同时是其中所有内容的祖先 |
- 向上遍历 DOM 树
- parent() 方法返回被选元素的直接父元素
- parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
- parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
- jQuery 遍历 - 后代
- children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
- find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
- jQuery 遍历 - 同胞
- siblings() 方法返回被选元素的所有同胞元素。
- next() 方法返回被选元素的下一个同胞元素。
- nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
- jQuery 遍历 - 过滤
- first() 方法返回被选元素的首个元素
- last() 方法返回被选元素的最后一个元素。
- eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
- filter(selector) 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
- not(selector) 方法返回不匹配标准的所有元素。
6. jQuery - AJAX 简介
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新,简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
6.1 jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
- HTTP 请求：GET vs. POST
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
- jQuery $.get() 方法
1
2
3
4$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名 - jQuery $.post() 方法
1
2
3
4
5$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。7. jQuery 选择器
选择器 实例 选取 * $(“*”) 所有元素 #id $(“#lastname”) id=”lastname” 的元素 .class $(“.intro”) 所有 class=”intro” 的元素 element $(“p”) 所有 <p> 元素 .class.class $(“.intro.demo”) 所有 class=”intro” 且 class=”demo” 的元素 :first $(“p:first”) 第一个 <p> 元素 :last $(“p:last”) 最后一个 <p> 元素 :even $(“tr:even”) 所有偶数 <tr> 元素 :odd $(“tr:odd”) 所有奇数 <tr> 元素 :eq(index) $(“ul li:eq(3)”) 列表中的第四个元素（index 从 0 开始） :gt(no) $(“ul li:gt(3)”) 列出 index 大于 3 的元素 :lt(no) $(“ul li:lt(3)”) 列出 index 小于 3 的元素 :not(selector) $(“input:not(:empty)”) 所有不为空的 input 元素 :header $(“:header”) 所有标题元素 <h1> - <h6> :contains(text) $(“:contains(‘W3School’)”) 包含指定字符串的所有元素 :empty $(“:empty”) 无子（元素）节点的所有元素 :hidden $(“p:hidden”) 所有隐藏的 <p> 元素 :visible $(“table:visible”) 所有可见的表格 s1,s2,s3 $(“th,td,.intro”) 所有带有匹配选择的元素 [attribute] $(“[href]”) 所有带有 href 属性的元素 [attribute=value] $(“[href=’#’]”) 所有 href 属性的值等于 “#” 的元素 [attribute!=value] $(“[href!=’#’]”) 所有 href 属性的值不等于 “#” 的元素 [attribute$=value] $(“[href$=’.jpg’]”) 所有 href 属性的值包含以 “.jpg” 结尾的元素 :input $(“:input”) 所有 <input> 元素 :text $(“:text”) 所有 type=”text” 的 <input> 元素 :password $(“:password”) 所有 type=”password” 的 <input> 元素 :radio $(“:radio”) 所有 type=”radio” 的 <input> 元素 :checkbox $(“:checkbox”) 所有 type=”checkbox” 的 <input> 元素 :submit $(“:submit”) 所有 type=”submit” 的 <input> 元素 :reset $(“:reset”) 所有 type=”reset” 的 <input> 元素 :button $(“:button”) 所有 type=”button” 的 <input> 元素 :image $(“:image”) 所有 type=”image” 的 <input> 元素 :file $(“:file”) 所有 type=”file” 的 <input> 元素 :enabled $(“:enabled”) 所有激活的 input 元素 :disabled $(“:disabled”) 所有禁用的 input 元素 :selected $(“:selected”) 所有被选取的 input 元素 :checked $(“:checked”) 所有被选中的 input 元素
