jQuery学习01-阿里云开发者社区

开发者社区> 小江同志> 正文

jQuery学习01

简介: 学习jQuery,jQuery其实是一个JavaScript函数库, jQuery的核心思想就是“写得少,做得多”。要使用jQuery的时候,先下载好jQuery版本在本地,然后直接通过标签引入就好了。
+关注继续查看

学习jQuery,jQuery其实是一个JavaScript函数库, jQuery的核心思想就是“写得少,做得多”。要使用jQuery的时候,先下载好jQuery版本在本地,然后直接通过<script>标签引入就好了。

一、jQuery之——动画效果

1、show(speed,easing,fn)和hide(speed,easing,fn)方法。其中的参数都是可选的

PS:参数speed代表动画执行的快慢,分别有(“slow”,"normal",“fast”);参数easing用来指定切换的动画效果;参数fn表示回调函数。

这两个方法当不给参数就没有什么动画效果,当给speed设置了slow,就会自动通过变化元素的宽、高、透明度来过渡元素的隐藏和显示,形成动画效果。

2、slideUp()和slideDown()方法。是滑动动画模式方法。参数都和上面一样是可选的

PS:与上面的方法一样最终目的都是让页面元素的display属性设置为none或者恢复原值,但是show()和hide()是在水平方向伸缩的,而slideUp()和slideDown()是在垂直方向伸缩的。原理:slideUp()是把元素的height属性值逐渐减少为0px,slideDown()是把元素的height属性值逐渐增长为原值。

3、fadeIn()和fadeOut()方法。是淡入淡出动画模式方法。与上面的slideUp()和slideDown()方法一样最终目的都是让页面元素的display属性设置为none或者恢复原值,但不同之处在于后者是通过改变height属性来实现动画效果的,而前者是通过改变元素的opacity属性(透明度)来实现动画效果的。

4、animate()自定义动画,由于基础动画很难满足用户实际的需求。

PS:animate(方法只能过度部分属性,数值类型的属性才能创建动画,比如“margin:30px”,而字符串值无法创建动画,比如“background-color:red”)

5、动画队列,当一个元素调用多个动画时就会产生动画队列,让每个动画按照页面加载顺序依次执行。只要对某一个DOM对象连续执行动画操作都会产生动画队列。

6、处理动画队列操作。

stop(s1,s2)方法:停止当前正在运行的动画。参数s1为true时则清空队列,参数s2为true时,则完成当前正在运行的动画

delay(s1,s2)方法:推迟后续动画队列的执行。参数s1表示延迟时间(毫秒),参数s2表示要延迟的队列名称

finish()方法:立刻完成动画队列中的所有动画效果,和stop(true,true)类似,只不过stop(true,true)把当前动画完成后,会把后续动画队列给全部清空掉

toggle()方法,是show()和hide()方法的交互式方法,它会自动判断切换显示或者隐藏的动画效果

二、jQuery之——事件处理

首先,事件处理的三大要素:事件、事件源、事件驱动。

事件绑定:可以使用bind()方法对元素集中进行事件绑定,这样对事件源进行分类,方便统一管理和维护。类似下图这样对p标签进行统一的事件绑定

img_da94f8a36a7291e807ac91c104c7ddd7.png

one()方法的使用方法和bind()方法一样,只是此事件被触发一次就被注销了,此后这事件不再生效。

事件冒泡:当元素处于嵌套层级关系时就会产生冒泡现象,即触发了子元素事件,会连锁得触发父元素的事件。

事件冒泡也是可以避免的。

第①种情况,在jQuery中为事件对象提供了stopPropagetion()方法来阻止自定义事件冒泡,用法是:在子元素事件中加上一句 event.stopPropagetion();

第②种情况,在jQuery种为时间提供了preventDefault()方法来阻止默认行为的发生

事件委派:为HTML页面中的所有匹配的元素都附加一个事件处理函数,即使某个元素是后来动态添加进来的也有效。这样就使得代码更加简洁

给对象赋予事件委派特性,比如$("table").delegate("td:contains('删除')",'click',function(){$(this).parent().remove()});这样就给table对象赋予了事件委派特性

undelegate()方法表示取消事件委派特性。比如 $("ul").undelegate('il','click');这样取消ul元素的对应的某个时间的事件委派特性。


   未完待续,继续更新学习记录~~~~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9963 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2957 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11570 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2487 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13722 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7453 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7315 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4443 0
+关注
小江同志
爱编程、爱生活
29
文章
10
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载