第八次学习周记

本次周记的主要内容为JQuery初步分为五个部分：JQuery简介、JQuery语法、JQuery选择器、JQuery事件以及JQuery效果。
一、JQuery简介
jQuery 是一个 JavaScript 函数库；是一个轻量级的"写的少，做的多"的 JavaScript 库。
jQuery 库包含以下功能：
①、HTML 元素选取
②、HTML 元素操作
③、CSS 操作
④、HTML 事件函数
⑤、JavaScript 特效和动画
⑥、HTML DOM 遍历和修改
⑦、AJAX
⑧、Utilities
提示： 除此之外，jQuery 还提供了大量的插件。
（jQuery 库可以通过一行简单的标记被添加到网页中。）

二、jQuery 语法
通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

注意：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
实例：
$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有 < p> 元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的 < p> 元素

$("#test").hide() - 隐藏 id=“test” 的元素
从上述举例可以看出：
①美元符号定义 jQuery
②选择符（selector）“查询"和"查找” HTML 元素
③jQuery 的 action() 执行对元素的操作

三、JQuery选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作；
是基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1、元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 < p> 元素:$(“p”)

实例：

运行结果：

点击之后的运行结果：

从上面的例子可以看出，用户点击按钮后，所有 < p> 元素都隐藏。
2、#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：$("#test")
实例：

运行结果：

点击之后的运行结果：

从上面的例子可以看出，当用户点击按钮后，有 id=“test” 属性的元素将被隐藏。

3、.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：$(".test")

实例：

运行结果：

点击之后的运行结果：

从上面的例子可以看出，用户点击按钮后所有带有 class=“test” 属性的元素都隐藏。

补充关于JQuery选择器的其他语法：

四、JQuery事件
一、事件的定义
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。

二、常用的 jQuery 事件方法
1、click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
实例：

运行结果：

分别点击上述一二三条信息将得到空白的运行结果。
从上述的例子可以看出，当点击事件在某个 < p> 元素上触发时，隐藏当前的 < p> 元素。
2、focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
3、blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

五、JQuery效果（隐藏和显示、淡出淡入）
1、jQuery hide() 和 show()
通过 jQuery，我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
实例：

运行结果：

点击”隐藏“按钮之后的运行结果：

2、jQuery toggle()
通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素
实例：

运行结果：

点击之后的运行结果：

再次点击又会出现第一次的运行结果。
3、jQuery Fading 方法
通过 jQuery，可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

4、jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback)。