jQuery与Ajax

2020-04-14 本文已影响0人低调的灬攻城狮

一、jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery是一个JavaScript函数库，是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery，例如:Google、Microsoft、IBM、Netflix

二、jQuery安装

1.网页中添加 jQuery：可以通过多种方法在网页中添加 jQuery。

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

也可以使用其它网站的CDN：

百度 CDN

<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

新浪 CDN

<head>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>

Google CDN

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

Microsoft CDN

<head>
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
</head>

三、jQuery语法

Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()
- $美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery选择器
- 元素选择器：基于元素名选取元素。在页面中选取所有元素:
```
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
```
- id选择器：通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：
```
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
```
- class选择器：jQuery 类选择器可以通过指定的 class 查找元素。语法如下：
```
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
```
jQuery事件
- 页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 常见 DOM 事件：
  鼠标事件：click、dblclick、mouseenter、mouseleave
  键盘事件：keypress、keydown、keyup、blur
  表单事件：submit、change、focus、unload
  文档/窗口事件：load、resize、scroll
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：$("p").click();
通过一个事件函数实现：
```
$("p").click(function(){
    // 动作触发后执行的代码!!
});
//不传参数是点击，传参数是设置事件。
```
- 常用的 jQuery 事件方法
  - $(document).ready() 方法允许我们在文档完全加载完后执行函数。
  - click()：当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。
  - dblclick()：当双击元素时，会发生 dblclick 事件。
    dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
  - mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数
  - mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数
  - mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数
  - mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
  - hover()：hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
  - focus()：当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
  - blur()：当元素失去焦点时，发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

四、jQuery效果

显示
- hide()：您可以使用 hide() 将元素隐藏
- show()：您可以使用show()将元素显示
- toggle()：通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
- 事实上，这三种方法都是有两个参数的：
```
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
// 可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
// 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
```
淡入淡出：通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
- fadeIn() 方法：用于淡入已隐藏的元素：$(selector).fadeIn(speed,callback);
- fadeOut() 方法：方法用于淡出可见元素：$(selector).fadeOut(speed,callback);
- fadeToggle() 方法：可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果：$(selector).fadeToggle(speed,callback);
- fadeTo() 方法：允许渐变为给定的不透明度（值介于 0 与 1 之间）：$(selector).fadeTo(speed,opacity,callback);
滑动：通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：slideDown()、slideUp()、slideToggle()、slideDown() 方法
- slideDown() 方法用于向下滑动元素：$(selector).slideDown(speed,callback);
- slideUp() 方法：用于向上滑动元素：$(selector).slideUp(speed,callback);
- slideToggle() 方法：可以在 slideDown() 与 slideUp() 方法之间进行切换：$(selector).slideToggle(speed,callback);
动画：animate() 方法：用于创建自定义动画：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。
停止动画：stop() 方法：用于停止动画或效果，在它们完成之前。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画：$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。
Callback许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
链式编程：有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。提示：当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

五、jQuery HTML

jQuery DOM 操作：jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容、html() - 设置或返回所选元素的内容（包括 HTML 标记）、val() - 设置或返回表单字段的值
获取属性-attr()：方法用于获取属性值。
设置：将使用三个相同的方法来设置内容：text() - 设置或返回所选元素的文本内容、html() - 设置或返回所选元素的内容（包括 HTML 标记）、val() - 设置或返回表单字段的值
text()、html() 以及 val() 的回调函数：上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
设置属性 - attr()：方法也用于设置/改变属性值。
添加元素：添加新的 HTML 内容。用于添加新内容的四个 jQuery 方法：append() - 在被选元素的结尾插入内容、prepend() - 在被选元素的开头插入内容、after() - 在被选元素之后插入内容、before() - 在被选元素之前插入内容
- append()：在被选元素的结尾插入内容：$("p").append("追加文本");
- prepend() 方法：在被选元素的开头插入内容：$("p").prepend("在开头追加文本");
- after() 和 before() 方法：after() 方法在被选元素之后插入内容。before() 方法在被选元素之前插入内容。
删除元素：删除元素/内容。如需删除元素和内容，一般可使用以下两个 jQuery 方法：remove() - 删除被选元素（及其子元素）、empty() - 从被选元素中删除子元素
- remove() 方法：删除被选元素及其子元素：$("#div1").remove();
- empty() 方法：删除被选元素的子元素：$("#div1").empty();
- 过滤被删除的元素：remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
jQuery 操作 CSS：jQuery 拥有若干进行 CSS 操作的方法：addClass() - 向被选元素添加一个或多个类、removeClass() - 从被选元素删除一个或多个类、toggleClass() - 对被选元素进行添加/删除类的切换操作、css() - 设置或返回样式属性
- css() 方法：设置或返回被选元素的一个或多个样式属性。
- 返回 CSS 属性：如需返回指定的 CSS 属性的值，请使用如下语法：css("propertyname");
- 设置 CSS 属性：如需设置指定的 CSS 属性，请使用如下语法：css("propertyname","value");
- 设置多个 CSS 属性：如需设置多个 CSS 属性，请使用如下语法：css({"propertyname":"value","propertyname":"value",...});
jQuery 尺寸方法：jQuery 提供多个处理尺寸的重要方法：width()、height()、innerWidth()、innerHeight()、outerWidth()、outerHeight()
- jQuery width() 和 height() 方法：width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
- jQuery innerWidth() 和 innerHeight() 方法：innerWidth() 方法返回元素的宽度（包括内边距）。innerHeight() 方法返回元素的高度（包括内边距）。
- jQuery outerWidth() 和 outerHeight() 方法：outerWidth() 方法返回元素的宽度（包括内边距和边框）。outerHeight() 方法返回元素的高度（包括内边距和边框）。

六、jQuery遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
parent() ：方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents() 方法：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil() 方法：返回介于两个给定元素之间的所有祖先元素。
children() 方法：返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
find() 方法：返回被选元素的后代元素，一路向下直到最后一个后代。
siblings() 方法：返回被选元素的所有同胞元素。
next() 方法：返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll() 方法：返回被选元素的所有跟随的同胞元素。
nextUntil() 方法：返回介于两个给定参数之间的所有跟随的同胞元素。
first() 方法：返回被选元素的首个元素。
last() 方法：返回被选元素的最后一个元素。
eq() 方法：返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个
filter() 方法：允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法：返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。

七、jQuery AJAX

jQuery AJAX简介

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
load方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法:$(selector).load(URL,data,callback);必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。也可以把 jQuery 选择器添加到 URL 参数。可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。
回调函数可以设置不同的参数：responseTxt - 包含调用成功时的结果内容、statusTXT - 包含调用的状态、xhr - 包含 XMLHttpRequest 对象
get和post方法
- $.get() 方法：通过 HTTP GET 请求从服务器上请求数据。语法：$ .get(URL,callback);必需的 URL 参数规定您希望请求的 URL。可选的 callback 参数是请求成功后所执行的函数名。
- $.post() 方法：通过 HTTP POST 请求从服务器上请求数据。语法:$ .post(URL,data,callback);必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。=可选的 callback 参数是请求成功后所执行的函数名。

jQuery与Ajax

一、jQuery简介

二、jQuery安装

三、jQuery语法

jQuery选择器

jQuery事件

jQuery 事件方法语法

四、jQuery效果

五、jQuery HTML

六、jQuery遍历

七、jQuery AJAX

jQuery AJAX简介

猜你喜欢

热点阅读