jQuery 知识总结

1.什么是jQuery

jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

2.jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作

基础语法： $(selector).action()

实例:

• $(this).hide() - 隐藏当前元素

• $("p").hide() - 隐藏所有 <p> 元素

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

• $("#test").hide() - 隐藏 id="test" 的元素

3.jQuery事件方法语法

页面中指定一个点击事件：

$("p").click();

下一步是定义了点击后触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ // 动作触发后执行的代码!! });

4.常用的jQuery事件方法

$(document).ready()：允许我们在文档完全加载完后执行函数。

click()：当按钮点击事件被触发时会调用一个函数。

dblclick()：当双击元素时，会发生 dblclick 事件。

mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。

hover()：用于模拟光标悬停事件

focus()：当元素获得焦点时，发生 focus 事件。

blur()：当元素失去焦点时，发生 blur 事件。

5.jQuery创建自定义动画

jQuery animate() 方法用于创建自定义动画

语法：$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

6.jQuery stop()方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

7.jQuery -链

有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

$("#p1").css("color","red").slideUp(2000).slideDown(2000)【以.来链接】

8.jQuery 添加和删除元素

我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

9.jQuery获取并设置CSS类

jQuery 拥有若干进行 CSS 操作的方法：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

10.jQuery尺寸方法

jQuery 提供多个处理尺寸的重要方法：

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

11.jQuery遍历

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

用于向上遍历 DOM 树：

• parent()
• parents()
• parentsUntil()

用于向下遍历 DOM 树：

• children()
• find()

在DOM树中水平遍历：

• siblings() ：返回被选元素的所有同胞元素
• next()：返回被选元素的下一个同胞元素
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

过滤：缩小搜索元素范围

三个最基本的过滤方法是：

first()：返回被选元素的首个元素

last()：返回被选元素的最后一个元素

 eq()：返回被选元素中带有指定索引号的元素

它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

12.AJAX （***重点***）

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

AJAX load（）方法 ：从服务器加载数据，并把返回的数据放入被选元素中

语法: $(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

AJAX get() 和 post()方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.post() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )

• URL：发送请求的 URL字符串。
• data：可选的，发送给服务器的字符串或 key/value 键值对。
• callback：可选的，请求成功后执行的回调函数。
• dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )

• URL：发送请求的 URL字符串。
• data：可选的，发送给服务器的字符串或 key/value 键值对。
• callback：可选的，请求成功后执行的回调函数。
• dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。