jQuery基础2

                                      jQuery基础2
开发工具与关键技术：Visual Studio2015 与jQuery  作者：北道海棠     撰写时间：2019.05.16

一、jQuery效果
1.1隐藏与显示
jQuery中隐藏元素的hide方法：让页面上的元素不可见，我们一般可以通过设置css的display为none属性。但是通过css直接修改的是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法用.hide()来达到这个效果

语法：          $elem.hide/show/toggle([speed,[easing],[fn]]);

参数说明：
Speed：speed 参数规定隐藏/显示的速度，默认是 “0"毫秒，也可以取以下值：“slow”、“fast” 或毫秒。
Easing：(Optional) 用来指定切换效果，默认是"swing”，可用参数"linear"。
fn：在动画完成时执行的函数，每个元素执行一次。

jQuery中显示元素的show方法：css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法，方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示。

jQuery中显示与隐藏的切换方法为：toggle（），show与hide是一对互斥的方法，需要对元素进行显示隐藏的互斥切换，通常情况是需要先判断元素的display状态，然后调用其对的处理方法。比如显示的元素，那么就要调用hide，反之亦然。 对于这样的操作行为，jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素。

1.2.上卷下拉效果
Query中下拉/上拉动画slideDown/slideUp：对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideDown/ slideUp方法：

   slideDown/ slideUp ([speed],[easing],[fn])  

通过高度变化（向下/上增大/小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

  上卷下拉的切换方式代码为：slideToggle([speed],[easing],[fn])；

1.3 淡入淡出效果
jQuery中淡出/淡入动画fadeOut（）/fadeIn（）：让元素在页面可见可不见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。
fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果，所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)，隐藏的元素不会被完全显示（不再影响页面的布局）
其写法为：

fadeout/fadeIn([speed],[easing],[fn])

下面我们来比较一下三种效果所用到的三种切换方法有和区别：
toggle、sildeToggle以及fadeToggle的区别：
toggle：切换显示与隐藏效果
sildeToggle：切换上下拉卷滚效果
fadeToggle：切换淡入淡出效果
toggle与slideToggle细节区别：
toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性
通过我们简单的了解，对jQuery效果也有了初步的认识，如需了解更多请查阅：jQuery 效果参考手册
二．jQuery AJAX 方法
我们要了解这个方法首先了解一下什么是AJAX。AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML），简单地说就是在不重载整个页面的时候，AJAX通过后台加载数据，在页面上更新部分网页技术。在传统的网页中如果要更新内容，不使用AJAX，必需要重新加载整个页面，这样给人的感觉就会慢很多，在这种追求速度和快捷的时代，AJAX的出现就有效地帮我们解决了这一问题。但是在编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同，这意味着您必须编写额外的代码对浏览器进行测试。而通过 jQuery AJAX 方法，我们就能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。这个方法就可以帮我们解决掉这种编程问题。下图为jQuery AJAX相关请求

待续。。。