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相关请求
待续。。。