南大软院大神养成计划——第十七天

超、凢脫俗 2022-08-18 00:59 206阅读 0赞

今天是南大软院大神养成计划实施的第十七天，今天学习的还是jQuery基础

**一.jQuery事件与运用**

**页面加载时触发ready()事件**  
ready()事件类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外，下列写法是相等的：  
$(document).ready(function()\{\})等价于$(function()\{\});

**使用bind()方法绑定元素的事件**  
bind()方法绑定元素的事件非常方便，绑定前，需要知道被绑定的元素名，绑定的事件名称，事件中执行的函数内容就可以，它的绑定格式如下：  
$(selector).bind(event,\[data\] function)  
参数event为事件名称，多个事件名称用空格隔开，function为事件执行的函数。

**使用hover()方法切换事件**  
hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切实效果，调用格式如下：  
$(selector).hover(over，out);  
over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

例如，当鼠标移到<div>元素上时，元素中的字体变成金黄色，如下图所示：

[![52d22c9900013dbd03190241.jpg][]][52d22c9900013dbd03190241.jpg]

在浏览器中显示的效果：

[![52d22cba0001163f04670262.jpg][]][52d22cba0001163f04670262.jpg]

从图中可以看出，使用`hover()`方法执行两个函数，当鼠标移在元素上时调用`addClass()`方法增加一个样式，移出时，调用`removeClass()`方法移除该样式。

**使用toggle()方法绑定多个函数**  
toggle()方法可以在元素的click事件中绑定两个或两个以上的函数，同时，它还可以实现元素的隐藏与显示的切换，绑定多个函数的调用格式如下：  
$(selector).toggle(fun1(),fun2(),funN(),...)  
其中，fun1，fun2就是多个函数的名称

例如，使用toggle()方法，当每次点击<div>元素时，显示不同内容，如下图所示：

[![52d22e3a0001c56d02980289.jpg][]][52d22e3a0001c56d02980289.jpg]

在浏览器中显示的效果：

[![52d22e570001902a04670335.jpg][]][52d22e570001902a04670335.jpg]

从图中可以看出，每次点击<div>元素时，都依次执行toggle()方法绑定的函数，当执行到最后一个函数时，再次点击将又返回执行第一个函数。

**注意：**toggle()方法支持目前主流稳定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。

**使用unbind()方法移除元素绑定的事件**  
unbind()方法可以移除元素已绑定的事件，它的调用格式如下：  
$(selector).unbind(event,fun)  
其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。

例如，点击按钮时，使用unbind()方法移除<div>元素中已绑定的“dblclick”事件，如下图所示：

[![52d22feb0001c9ee04750306.jpg][]][52d22feb0001c9ee04750306.jpg]

在浏览器中显示的效果：

[![52d2300c0001ecfe06650362.jpg][]][52d2300c0001ecfe06650362.jpg]

从图中可以看出，当使用unbind()方法移除已绑定的“dblclick”事件时，再次双击<div>元素，样式和文字都没有任何变化，表明移除事件成功。

如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。如：$("div").unbind();

**使用one()方法绑定元素的一次性事件**  
one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下：  
$(selector).one(event,\[data\],fun)  
参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。

例如，使用one方法绑定<div>元素的单击事件，在事件执行的函数中，累计执行的次数，并将该次数显示在页面中，如下图所示：

[![52d231bd000192fb04310219.jpg][]][52d231bd000192fb04310219.jpg]

在浏览器中显示的效果：

[![52d231dd00011da004890293.jpg][]][52d231dd00011da004890293.jpg]

从图中可以看出，由于使用了one()方法绑定<div>元素的单击事件，因为事件函数只能执行一次，执行完成后，无论如何单击，都不再触发。

**调用trigger()方法手动触发指定的事件**  
trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为：  
$(selector).trigger(event)  
其中event参数为需要手动触发的事件名称。

例如，当页面加载时，手动触发文本输入框的“select”事件，使文本框的默认值处于全部被选中的状态，如下图所示：

[![52d233a30001df8204290153.jpg][]][52d233a30001df8204290153.jpg]

在浏览器中显示的效果：

[![52d233c50001587304890256.jpg][]][52d233c50001587304890256.jpg]

从图中可以看出，由于文本输入框调用trigger()方法触发了“select”事件，因此，当页面加载完成后，文本框中的默认值处于全部被选中的状态。

**文本框的focus和blur事件**  
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。

例如，在触发文本框的“focus”事件时，<div>元素显示提示内容，如下图所示：

[![52d235210001b6f203730194.jpg][]][52d235210001b6f203730194.jpg]

在浏览器中显示的效果：

[![52d2353f00013ccf04890294.jpg][]][52d2353f00013ccf04890294.jpg]

从图中可以看出，当点击文本框时，触发文本框的“focus”事件，在该事件中，页面中的<div>元素显示提示信息。

**下拉列表框的change事件**  
当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。

例如，当在页面选择下拉列表框中的选项时，将在<div>元素中显示所选择的选项内容，如下图所示：

[![52d236cc00019b6d04420272.jpg][]][52d236cc00019b6d04420272.jpg]

在浏览器中显示的效果：

[![52d236ea0001022a04890294.jpg][]][52d236ea0001022a04890294.jpg]

从图中可以看出，由于使用bind()方法绑定了下拉列表的“change”事件，因此，当选择列表中的选项时，在<div>元素中显示所选择的选项内容。

**调用live()方法绑定元素的事件**  
与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下：  
$(selector).live(event,\[data\],fun)  
参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。

例如，使用live()方法绑定，页面中按钮元素的单击事件，而这个按钮是通过追加的方式添加至页面的。如下图所示：

[![52d2389e0001f46e06470188.jpg][]][52d2389e0001f46e06470188.jpg]

在浏览器中显示的效果：

[![52d238c20001936b04900286.jpg][]][52d238c20001936b04900286.jpg]

从图中可以看出，虽然按钮元素是在事件绑定声明之后，并且是通过追加的方式添加至页面的，但由于使用的是live()方法绑定元素的事件，因此，仍然生效。

注意：从 jQuery 1.7 开始，不再建议使用 .live() 方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8。

上面就是jQuery事件与运用，可以从上面的各种例子来看，实现相同的功能，jQuery比纯JavaScript代码要简单很多，最后说一下绑定元素的多个事件时,只需将事件用空格符隔开。

**二..jQuery动画特效**

接下来就是讲解大家非常感兴趣的jQuery动画特效，大家其实在学习jQuery的基础的时候，可以想一下每个函数里面到底封装了哪些JavaScript的语法或者函数，可以尝试自己去封装来实现同样的功能。

**调用show()和hide()方法显示和隐藏元素**  
show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为：  
$(selector).hide(speed,\[callback\])和$(selector).show(speed,\[callback\])  
参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

例如，在页面中，通过点击“显示”和“隐藏”两个按钮来控制图片元素的显示或隐藏状态，如下图所示：

[![52dc9f250001508d03860257.jpg][]][52dc9f250001508d03860257.jpg]

在浏览器中显示的效果：

[![52dc9f450001e4a205620313.jpg][]][52dc9f450001e4a205620313.jpg]

从图中可以看出，点击“显示”按钮时，可以将图片元素显示在页面中，点击“隐藏”按钮时，则将图片元素隐藏起来。

**动画效果的show()和hide()方法**  
在上一小节中，调用show()和hide()方法仅是实现的元素的显示和隐藏功能，如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用。

例如，以动画的方式显示或隐藏页面中的图片，同时，当显示或隐藏完成时，对应的按钮状态将变为不可用，如下图所示：

[![52dca0cb00012c5604130354.jpg][]][52dca0cb00012c5604130354.jpg]

在浏览器中显示的效果：

[![52dca1180001468205960341.jpg][]][52dca1180001468205960341.jpg]

从图中可以看出，当以动画方式显示或隐藏图片时，图片在显示或隐藏过程中，则以动画效果按“speed”参数设置数字执行，完成后，调用回调函数中的代码。

**调用toggle()方法实现动画切换效果**  
第一节我们学过实现元素的显示与隐藏需要使用hide()与show()，那么有没有更简便的方法来实现同样的动画效果呢？  
调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是：  
$(selector).toggle(speed,\[callback\])  
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

例如，调用toggle()方法以动画的效果显示和隐藏图片元素，如下图所示：

[![52dca25300010e0405830241.jpg][]][52dca25300010e0405830241.jpg]

在浏览器中显示的效果：

[![52dca2730001372d06240327.jpg][]][52dca2730001372d06240327.jpg]

从图中可以看出，当按钮显示内容为“隐藏”时，点击该按钮，将调用toggle()方法以动画的方式隐藏图片元素，隐藏成功后，按钮显示的内容变为“显示”。

**使用slideUp()和slideDown()方法的滑动效果**  
可以使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为：  
$(selector).slideUp(speed,\[callback\])和$(selector).slideDown(speed,\[callback\])  
其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。  
要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。

例如，调用slideUp()和slideDown()方法实现页面中元素的向上和向下的滑动效果，如下图所示：

[![52dcb1b20001c7d403880386.jpg][]][52dcb1b20001c7d403880386.jpg]

在浏览器中显示的效果：

[![5366e34c0001eab206860385.jpg][]][5366e34c0001eab206860385.jpg]

从图中可以看出，根据按钮中显示的内容，分别调用slideUp()和slideDown()方法，实现图片元素向上和向下的滑动效果，当每个滑动效果完成时，再通过回调函数改变按钮中显示内容。

滑动与淡入淡出的区别：滑动改变元素的高度，淡入淡出改变元素的透明度。

这个效果蛮好看的，大家可以自己亲手去试下

**使用slideToggle()方法实现图片“变脸”效果**  
使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为：  
$(selector).slideToggle(speed,\[callback\])  
其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。

例如，在页面中，使用slideToggle()方法实现图片“变脸”效果，如下图所示：

[![52dcb5930001bd2603830402.jpg][]][52dcb5930001bd2603830402.jpg]

在浏览器中显示的效果：

[![52dcb5b40001da9d05510364.jpg][]][52dcb5b40001da9d05510364.jpg]

从图中可以看出，当点击第一张图片时，向上滑动收起该图片，当收起完成时，触发回调函数，调用第二张图片的slideToggle()方法，向下滑动显示第二张图片。

**使用fadeIn()与fadeOut()方法实现淡入淡出效果**  
fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为：  
$(selector).fadeIn(speed,\[callback\])和$(selector).fadeOut(speed,\[callback\])  
其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。

例如，分别在页面中以淡入淡出的动画效果显示图片元素，如下图所示：

[![549a7819000117a103910414.jpg][]][549a7819000117a103910414.jpg]

在浏览器中显示的效果：

[![549a782d0001eea505410456.jpg][]][549a782d0001eea505410456.jpg]

从图中可以看出，当点击“淡出”按钮时，调用fadeOut()方法以淡出效果隐藏图片，当点击“淡入”按钮时，调用fadeIn()方法以淡入效果显示图片。

**使用fadeTo()方法设置淡入淡出效果的不透明度**  
调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为：  
$(selector).fadeTo(speed,opacity,\[callback\])  
其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。

例如，分别调用fadeTo()方法，设置三个图片元素的不透明度值，如下图所示：

[![52dcc1f20001235d03890370.jpg][]][52dcc1f20001235d03890370.jpg]

在浏览器中显示的效果：

[![52dcc22a000195fb05070349.jpg][]][52dcc22a000195fb05070349.jpg]

从图中可以看出，调用fadeTo()方法，分别改变“opacity”参数的值，以淡入淡出的动画效果设置图片元素的不透明度。

**\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*上面三种隐藏和显示的方法对比\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\***

这部分不知道网上有没有，我就通过我的实际体会来说，首先根据其效果描述，我们可以知道toggle是不带任何效果的，当我们将时间调为3000毫秒时，我们可以看到ul里的内容字体是随着内容慢慢显示出来，假如不看ul里的字体的话，光看边框的变化是和slideToggle()效果是一模一样的，但是区别在于边框里面的内容的显示效果，slideToggle里的内容是在边框展开之前就显示完毕，而Toggle()则是随着边框展开，字体也随着显示出来，大家可以自己去看，然后fadeTo跟前面两种方法差别就比较大了，它没有滑动效果，虽然边框带有滑动效果，但是速度是一定的，而且非常快，我们几乎感受不到那滑动效果，而里面的内容则是一起出现或者一起消失，不会看见类似于滑动的效果，所以什么时候选择上面三种方法隐藏和显示就看自己的实际需求。在学习过程中，我们发现每一种隐藏和显示的方法，都有三个函数分别是隐藏，显示，自动隐藏显示，也许有人会觉得这样功能不是重复了吗？只用一个函数不就行了，为什么要多封装那么多函数，这其实就要考虑一些特殊情况，也许有些内容只想让用户看一次就隐藏起来呢，所以还是需要这些函数的。

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

## 调用animate()方法制作移动位置的动画 ##

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

例如，调用animate()方法先将图片向右移动90px，然后，再将图片宽度与高度分别增加30px，如下图所示：

[![52dcc4eb0001c08e03410291.jpg][]][52dcc4eb0001c08e03410291.jpg]

在浏览器中显示的效果：

[![52dcc50b0001ba2205060337.jpg][]][52dcc50b0001ba2205060337.jpg]

从图中可以看出，图片先向右移动了“90px”，然后，移动成功后，再在原来的基础之上以动画的效果增大30px，增加成功后，显示“执行完成！”的字样。

$(selector).stop(\[clearQueue\],\[goToEnd\])

其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

**调用stop()方法停止当前所有动画效果**  
stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为：  
  
$(selector).stop(\[clearQueue\],\[goToEnd\])  
  
其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。

例如，在页面中，当图片元素正在执行动画效果时，点击“停止”按钮，中止正在执行的动画效果，如下图所示：

[![52dcc63f00019e3203870387.jpg][]][52dcc63f00019e3203870387.jpg]

在浏览器中显示的效果：

[![52dcc65f0001ef9605300345.jpg][]][52dcc65f0001ef9605300345.jpg]

从图中可以看出，当页面中的图片正在执行动画效果向右移动时，由于点击了“停止”按钮，执行了图片元素的stop方法，因此，中止了正在执行的动画效果。

**调用delay()方法延时执行动画效果**  
delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为：  
  
$(selector).delay(duration)  
  
其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。

例如，当页面中图片动画正在执行时，点击“延时”按钮调用delay()方法推迟2000毫秒后继续执行，如下图所示：

[![52dcc785000162dc03840385.jpg][]][52dcc785000162dc03840385.jpg]

在浏览器中显示的效果：

[![52dcc7a100014fb806800406.jpg][]][52dcc7a100014fb806800406.jpg]

从图中可以看出，当图片动画正在执行时，点击“延时”按钮，调用delay()方法中止当前正在执行的图片动画效果，当超过设置的延时值时，动画效果继续执行。

以上就是jQuery动画的所有内容，大家肯定发现，通过对比，我们发样的动画效果，我们使用JavaScript的代码远远比jQuery的代码多很多，这也是jQuery给我们带来的好处，减少了代码，提高了效率，但是也会让很多人忘记了基础的JavaScript语法。

三.jQuery实现Ajax应用

说先说说什么是Ajax，AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。国内翻译常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。  
  
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。  
  
Ajax对服务器没什么要求，可以为Java EE应用程序，.NET应用程序和其他类型的应用程序服务。可以通过Ajax，可以编写javascript代码来改进HTML，创建出丰富的交互性用户体

**使用load()方法异步请求数据**  
使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为：

load(url,\[data\],\[callback\])

例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。如下图所示：

[![52dccb920001d2d505970337.jpg][]][52dccb920001d2d505970337.jpg]

在浏览器中显示的效果：

[![52dccbaf0001c21507380393.jpg][]][52dccbaf0001c21507380393.jpg]

从图中可以看出，当点击“加载”按钮时，通过调用load()方法向服务器请求加载fruit.html文件中的内容，当加载成功后，先显示数据，并将按钮变为不可用。

参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

**使用getJSON()方法异步加载JSON格式数据**  
使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为：  
  
jQuery.getJSON(url,\[data\],\[callback\])或$.getJSON(url,\[data\],\[callback\])  
  
其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。

例如，点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。如下图所示：

[![52dcced70001f67806010370.jpg][]][52dcced70001f67806010370.jpg]

在浏览器中显示的效果：

[![52dccefe0001c87005860341.jpg][]][52dccefe0001c87005860341.jpg]

从图中可以看出，当点击“加载”按钮时，通过getJSON()方法调用服务器中的sport.json文件，获取返回的data文件数据，并遍历该数据对象，以data\[“name”\]取出数据中指定的内容，显示在页面中。

**使用getScript()方法异步加载并执行js文件**  
使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示：  
  
jQuery.getScript(url,\[callback\])或$.getScript(url,\[callback\])  
  
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

例如，点击“加载”按钮，调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件，并在页面中显示加载后的数据内容，如下图所示：

[![52dcd433000151e606000305.jpg][]][52dcd433000151e606000305.jpg]

在浏览器中显示的效果：

[![52dcd44e000145de06380392.jpg][]][52dcd44e000145de06380392.jpg]

从图中可以看出，当点击“加载”按钮调用getScript()方法加载服务器中的JavaScript格式文件后，自动执行文件代码，将数据内容显示在<ul>元素中。

**使用get()方法以GET方式从服务器获取数据**  
使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下：  
  
$.get(url,\[callback\])  
  
参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。

例如，当点击“加载”按钮时，调用get()方法向服务器中的一个.php文件以GET方式请求数据，并将返回的数据内容显示在页面中，如下图所示：

[![52dcd5b1000161ce05970338.jpg][]][52dcd5b1000161ce05970338.jpg]

在浏览器中显示的效果：

[![52dcd5d900010aaf06440326.jpg][]][52dcd5d900010aaf06440326.jpg]

从图中可以看出，通过$.get()方法向服务器成功请求数据后，在回调函数中通过data参数传回请求的数据，并以data.name格式访问数据中各项的内容。

使用post()方法以POST方式从服务器发送数据  
与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下：  
  
$.post(url,\[data\],\[callback\])  
  
参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。

例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，检测输入值的奇偶性，并显示在页面中，如下图所示：

[![52dcd7430001e25004690464.jpg][]][52dcd7430001e25004690464.jpg]

在浏览器中显示的效果：

[![52dcd77200010b4c05450336.jpg][]][52dcd77200010b4c05450336.jpg]

从图中可以看出，当点击“检测”按钮时，获取输入框中的值，并将该值使用$.post()方法一起发送给服务器，服务器接收该值后并进行处理，最后返回处理结果。

**使用serialize()方法序列化表单元素值**  
使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：  
$(selector).serialize()  
其中selector参数是一个或多个表单中的元素或表单元素本身。

例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中，如下图所示：

[![52dcd9470001b1e705400481.jpg][]][52dcd9470001b1e705400481.jpg]

在浏览器中显示的效果：

[![52dcd9660001637f05610308.jpg][]][52dcd9660001637f05610308.jpg]

从图中可以看出，当点击“序列化”按钮后，调用表单元素本身的serialize()方法，将表单中元素全部序列化，生成标准URL编码，各元素间通过&号相联。

**使用ajax()方法加载服务器数据**  
使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下：  
  
jQuery.ajax(\[settings\])或$.ajax(\[settings\])  
  
其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。

例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，并将返回的文件中的内容显示在页面，如下图所示：

[![52dcdb5000014e9804600419.jpg][]][52dcdb5000014e9804600419.jpg]

在浏览器中显示的效果：

[![52dcdb6b00010eea05990345.jpg][]][52dcdb6b00010eea05990345.jpg]

从图中可以看出，当点击“加载”按钮时，调用$.ajax()方法请求服务器中txt文件，当请求成功时调用success回调函数，获取传回的数据，并显示在页面中。

**使用ajaxSetup()方法设置全局Ajax默认选项**  
使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：  
  
jQuery.ajaxSetup(\[options\])或$.ajaxSetup(\[options\])  
  
可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

例如，先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在页面，如下图所示：

[![52dcdce60001de2604780449.jpg][]][52dcdce60001de2604780449.jpg]

在浏览器中显示的效果：

[![52dcdd090001ccfd06390382.jpg][]][52dcdd090001ccfd06390382.jpg]

从图中可以看出，使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后，在两次调用ajax请求服务器txt文件时，只需要设置url地址即可。

**使用ajaxStart()和ajaxStop()方法**  
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：  
  
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())  
  
其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

[![52dcfb3a0001746d06020435.jpg][]][52dcfb3a0001746d06020435.jpg]

在浏览器中显示的效果：

[![52dcfb5500013ffa06500337.jpg][]][52dcfb5500013ffa06500337.jpg]

从图中可以看出，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax请求时，元素显示，请求完成时，动画元素自动隐藏。

注意：该方法在1.8.2下使用是正常的

以上就是今天所学的内容。

**学习总结：**

今天学习的主要还是jQuery基础，jQuery基础实在是太多了，虽然是有JavaScript封装而来的，但是无异于学习一门新的语言就像mfc一样。今天学习了基础中的三大部分——事件与运用，动画效果和实现ajax应用，知识总结已经在上面详细的给出了，接下来主要讲讲自己这么多天的体会与感受。首先，说说慕课网，我在大一的时候，已经接触到了慕课网，但是网站里的资源并不是很多，而且大多都是零零碎碎的教程，需要一些基础，而那些教基础的教程又不教进阶部分，所以造成我没有使用慕课网进行学习，然后时间来到了现在，我再一次接触到了慕课网，并且认真的学习其中的一个计划，发现确实蛮好，它并没有单一的使用视频教程，而是采用了视频与文本结合的方法教学，这样其实节省了一部分人力，也方便我们在学习基础的时候，能够根据自我的理解能力进行学习，像在看书一样，这点我觉得非常好，因为假如基础都用视频播放出来，我们做为一名初学者来说，可能理解能力有限，只能断断续续地学习，严重影响我们的学习兴趣。今天学习的内容就是基础，而这部分基础就是用文本形式展现出来的，然后每个基础部分都有编程题，大部分代码已经给出，只需要我们填写其中一小部分代码，可能一段或者两段代码，既有利于我们了解基础又节约了我们时间。然后说说学习基础的感受，作为一名学习过几门语言的人来说，学习计算机语言的基础确实非常难受，因为语言的基础可能是非常粗糙无味的，我们用这些基础也无法编出什么有趣的东西来，所以慢慢地可能就会丧失兴趣，但是对于一个想精通一门语言人来说，基础是非常重要的，假如基础只是懵懵懂懂地混过去，就会像学习数学一样，九九乘法表都没有背熟，就去学习多位数乘法，那只能造成学习进阶东西效率低下，或者根本无法理解其中的语法结构和原理，只能靠死记硬背记住代码，然后用到的时候套用上去，假如要实现另一种效果时，又要记另一种效果的代码，然后造成假如网上没有现成的代码，自己也就不会编写代码了。所以基础虽然难学，但是也要耐心地学下去，今天学习三部分的基础，花了一个晚上的时间去学习，大部分的语法知识可能已经记住，但是有些细节方面还是没有记牢，这个只能靠后期的编程练习加强了，有时候死记硬背不如多多动手敲代码，也许敲着敲着就理解了一些难以理解的知识，就像学习数学一样，一些数学定理，很难记住，但是在不断的做题过程，一次次运用就一次次加深了印象，最后牢记于心。

今天学习的内容就是这些，明天继续学习jQuery，估计最后只能学习完jQuery的基础吧，期待明天的学习。

[52d22c9900013dbd03190241.jpg]: /images/20220731/66e25d6626534d2dbc07ec24a2167038.png
[52d22cba0001163f04670262.jpg]: /images/20220731/6f9a3719d89549bf9244337acce9cb7e.png
[52d22e3a0001c56d02980289.jpg]: /images/20220731/6288b939415d41228397731965a0daf8.png
[52d22e570001902a04670335.jpg]: /images/20220731/2b265cc38d1a4950a05d47e34f626b40.png
[52d22feb0001c9ee04750306.jpg]: /images/20220731/df9d20ece93a429a996109f1dc0af2c0.png
[52d2300c0001ecfe06650362.jpg]: /images/20220731/2b04a91a56cc4153a320babeeaa3b189.png
[52d231bd000192fb04310219.jpg]: /images/20220731/2c9ae32364fe4c9ab8a471869cb61fbc.png
[52d231dd00011da004890293.jpg]: /images/20220731/e1d80ae120a7439d8bfcf3247f21e0ca.png
[52d233a30001df8204290153.jpg]: /images/20220731/3a33e497d1a04b71b16b43663c003b55.png
[52d233c50001587304890256.jpg]: /images/20220731/5259e3d4629347f990a621ad108e6f33.png
[52d235210001b6f203730194.jpg]: /images/20220731/72a24408639e48d6a7cff7aa7b05ad16.png
[52d2353f00013ccf04890294.jpg]: /images/20220731/55909beadd1e4587a02c095b7f1c786f.png
[52d236cc00019b6d04420272.jpg]: /images/20220731/51ee67766421424f8d8528b82bff70a6.png
[52d236ea0001022a04890294.jpg]: /images/20220731/dc756b5d8622401e967e48d496698139.png
[52d2389e0001f46e06470188.jpg]: /images/20220731/2caec1899bff4166afd61cbf426b209b.png
[52d238c20001936b04900286.jpg]: /images/20220731/90de6a2c164b43068cb99bee5318a8d7.png
[52dc9f250001508d03860257.jpg]: /images/20220731/0628d75cbe5f46c286cc4b2d66423e5f.png
[52dc9f450001e4a205620313.jpg]: /images/20220731/536e513cccc54bc0aafa68fc955ed61d.png
[52dca0cb00012c5604130354.jpg]: /images/20220731/7584fec2cc2445d4835f422a28256f31.png
[52dca1180001468205960341.jpg]: /images/20220731/ce2f3d16a34e46abae6aaef328aba5ca.png
[52dca25300010e0405830241.jpg]: /images/20220731/e0c6ffac77234b07bb7703a1fd8aba6b.png
[52dca2730001372d06240327.jpg]: /images/20220731/589c4a3dbab54cbf9ecd7e90ac96e0c6.png
[52dcb1b20001c7d403880386.jpg]: /images/20220731/4ef7810088394afeba86f7d8f4758650.png
[5366e34c0001eab206860385.jpg]: /images/20220731/88502a7b66f64606a7cdce14ba824a10.png
[52dcb5930001bd2603830402.jpg]: /images/20220731/cbe8f557a1564568ac1335b63b7767bf.png
[52dcb5b40001da9d05510364.jpg]: /images/20220731/41456be4ae7b45218d132c14315ee9ed.png
[549a7819000117a103910414.jpg]: /images/20220731/ff77ab3b9d20425f9ef06efccadde9bc.png
[549a782d0001eea505410456.jpg]: /images/20220731/74ae22eaff964ceb889595b8e045e3b6.png
[52dcc1f20001235d03890370.jpg]: /images/20220731/d40a0384fe8940c4abc4f827cd9a42ce.png
[52dcc22a000195fb05070349.jpg]: /images/20220731/64414f94e29c43e3b576f7eb31bd13e9.png
[52dcc4eb0001c08e03410291.jpg]: /images/20220731/fa4d447b37254e8c950c480918914d1d.png
[52dcc50b0001ba2205060337.jpg]: /images/20220731/f531269f5779443b82e662a1daaa6abe.png
[52dcc63f00019e3203870387.jpg]: /images/20220731/e39399e2ce1c4500b544a442b0643d6d.png
[52dcc65f0001ef9605300345.jpg]: /images/20220731/f942f8b5ea5943eeadcb3c4aab408f63.png
[52dcc785000162dc03840385.jpg]: /images/20220731/8984507c34274024ba1a87fdfb049100.png
[52dcc7a100014fb806800406.jpg]: /images/20220731/ea07edf6630f4438af863f48428532eb.png
[52dccb920001d2d505970337.jpg]: /images/20220731/b93a44e36d5442e2bef6e6ceccbf5e79.png
[52dccbaf0001c21507380393.jpg]: /images/20220731/acbf32c0c1164c3394546f7744f3d271.png
[52dcced70001f67806010370.jpg]: /images/20220731/3504a40563f145f1a7c59d6a4b59ec8a.png
[52dccefe0001c87005860341.jpg]: /images/20220731/a976cef67da7424fba0f53226bbe7254.png
[52dcd433000151e606000305.jpg]: /images/20220731/e5f88b4a06dc410781f542d2dffd83ca.png
[52dcd44e000145de06380392.jpg]: /images/20220731/0322d6fc29f64a0bbdd2a8ba1923e494.png
[52dcd5b1000161ce05970338.jpg]: /images/20220731/e3fb439772694567865cf8ab08e02755.png
[52dcd5d900010aaf06440326.jpg]: /images/20220731/7f0208b9ab2347f1be70886c3e3169f5.png
[52dcd7430001e25004690464.jpg]: /images/20220731/6fa208b3fd6a41659b57b5edc5bfbf76.png
[52dcd77200010b4c05450336.jpg]: /images/20220731/9b25d16cdb044b04a9d271c697c0f688.png
[52dcd9470001b1e705400481.jpg]: /images/20220731/09f27d8232f544afbdf10bcca77632da.png
[52dcd9660001637f05610308.jpg]: /images/20220731/337ad3c619af42169cd5c839ceb38552.png
[52dcdb5000014e9804600419.jpg]: /images/20220731/e274ebba1bcd4e6683077cc036fad210.png
[52dcdb6b00010eea05990345.jpg]: /images/20220731/427af61374b74c0e916835edb025696d.png
[52dcdce60001de2604780449.jpg]: /images/20220731/62109758c6324309975be837b5ad163a.png
[52dcdd090001ccfd06390382.jpg]: /images/20220731/586e304aa4654e25a2edaa99abb7dd11.png
[52dcfb3a0001746d06020435.jpg]: /images/20220731/0409e948299b4ca78fafcb246ad1b50f.png
[52dcfb5500013ffa06500337.jpg]: /images/20220731/000d88c61a2d41fabd2792228de3068c.png