jquery动画

208 jQuery 效果 之 显示隐藏

↘锁芯ラ 提交于 2020-01-16 20:49:26
jQuery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 划入画出:slideDown() / slideUp() / slideToggle() ; 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画:animate() ; 注意: 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。 jQuery为我们提供另一个方法,可以停止动画排队:stop() ; 1.5.1 显示隐藏 ​ 显示隐藏动画,常见有三个方法:show() / hide() / toggle() ; ​ 语法规范如下: 代码演示 <body> <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script> $(function() { $("button").eq(0).click(function() { $("div").show(1000, function() { alert(1); }); }) $("button").eq(1).click(function() { $("div").hide(1000, function() { alert(1)

jQuery设计思想

↘锁芯ラ 提交于 2020-01-16 18:55:29
【目录】   一、选择网页元素   二、改变结果集   三、链式操作   四、元素的操作:取值和赋值   五、元素的操作:移动   六、元素的操作:复制、删除和创建   七、工具方法   八、事件操作   九、特殊效果 【正文】 一、选择网页元素 jQuery 的基本设计思想和主要用法,就是 " 选择某个网页元素,然后对其进行某种操作 " 。这是它区别于其他 Javascript 库的根本特点。 使用 jQuery 的第一步,往往就是将一个选择表达式,放进构造函数 jQuery() (简写为 $ ),然后得到被选中的元素。 选择表达式可以是 CSS 选择器 : $(document) //选择整个文档对象$('#myId') //选择ID为myId的网页元素$('div.myClass') // 选择class为myClass的div元素$('input[name=first]') // 选择name属性等于first的input元素也可以是jQuery特有的表达式:$('a:first') //选择网页中第一个a元素$('tr:odd') //选择表格的奇数行$('#myForm :input') // 选择表单中的input元素$('div:visible') //选择可见的div元素$('div:gt(2)') // 选择所有的div元素,除了前三个$('div

jQuery---jQuery初体验

懵懂的女人 提交于 2020-01-15 11:45:22
jQuery初体验 1. 引入jquery文件 2. 入口函数标准 jQuery优点总结 (对应的就是js的缺点): 查找元素的方法多种多样,非常灵活 拥有隐式迭代特性,因此不需要手写for循环 完全没有兼容性问题 实现动画非常简单,而且功能更加强大 代码简单粗暴 什么是jQuery? jQuery的官网 http://jquery.com/ jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。 js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js) 我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; margin-bottom: 10px; background-color: #a43035; display: none; } </style> <!-- 1.引入jquery文件 -->

jQuery设计思想

好久不见. 提交于 2020-01-15 07:46:20
前面的话   在深入了解jQuery的各个细节之前,需要对jQuery的设计思想有一个大致的了解。在遇到问题时, 知道应该使用jQuery的哪一个功能,然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想 选择元素   jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他javascript库的根本特点   使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素 【模拟CSS选择元素】 $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 【特有表达式选择】 $('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素,除了前三个 $('div:animated') // 选择当前处于动画状态的div元素

jQuery的动画相关方法

ⅰ亾dé卋堺 提交于 2020-01-14 21:56:48
show() 将元素的 display 属性改为先前元素的 display 状态 hide() 将元素的 display 属性改为 none show方法和hide方法都可以传入一个数字参数或速度字符串来控制显示或隐藏的速度,比如 show(100) 和 hide('slow') fadeIn() 会在指定的时间段里增加元素的不透明度,从0到1 dadeOut() 会在指定的时间段里减少元素的不透明度,从1到0 fadeTo() 会在指定的时间段里将元素的不透明度调整到指定的值 fadeToggle() 通过不透明度来切换匹配元素的可见性 slideDown() 如果一个元素的 display 属性值为"none",这个元素将由上至下延伸显示,改变高度 sildeUp() 如果一个元素的 display 属性值为 none ,这个元素将由下到上缩短隐藏,改变高度 stop() 停止元素的动画 toggle() 切换元素的可见状态,原来为隐藏切为显示,反之相反 slideToggle() 通过高度切换元素的可见状态 animate() 通过修改一个元素的样式属性来产生动画 animate(params, speed, callback); // params 一个包含样式属性和值的映射, 如{property1: "value1", property2:"value2"} //

我所知道的Javascript

倖福魔咒の 提交于 2020-01-13 21:02:03
javascript到了今天,已经不再是我10多年前所认识的小脚本了。最近我也开始用javascript编写复杂的应用,所以觉得有必要将自己的javascript知识梳理一下。同大家一起分享javascript给我们带来的福利。 索引 工具 库 参考资料 技能 工具 Online Javascript interpreter[在线javascript解析器] 可以在线运行javascript代码。这篇文章中的所有代码都在里面运行过。用它来做javascript实验,它是不错的选择。 运行地址: http://math.chapman.edu/~jipsen/js/ Html5 在线运行 地址: W3School在线测试工具 –canvas JQuery在线运行 地址: W3School在线测试工具-JQuery Closure Compiler 这是google提供的一款用于编译javascript的工具。所谓编译,是将一般可读的javascript代码编译成紧凑的,短小的javascript代码。其效果类似于jquery-x.min.js。 下载地址: https://developers.google.com/closure/compiler/ 运行命令:java -jar compiler.jar --js=..\carports\assets\www\js

Web 开发人员不能错过的 jQuery 教程和案例

久未见 提交于 2020-01-13 02:20:29
转自: http://www.cnblogs.com/lhb25/p/must-see-examples-of-jquery-tutorials.html   jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能。这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuery 在网站实际效果实现中的应用,千万不要错过。 您可能感兴趣的相关文章 So Easy!让开发人员更轻松的工具和资源 12款经典的白富美型 jQuery 图片轮播插件 几款优秀的 jQuery Ajax 分页插件和教程 推荐几款极好的 JavaScript 下拉列表插件 10大流行 Metro UI Bootstrap 主题和模板 Timeline Portfolio 超炫的时间轴展示作品集效果。设计师和前端开发人员可以借助这个效果来制作新颖的个人简历。 源码下载 在线演示 Swatch Book with CSS3 and jQuery 基于 CSS3 & jQuery 实现的多彩的动画 Swatch Book 效果。 源码下载 在线演示 Making an Interactive Picture with jQuery 基于 jQuery 实现交互的图片效果,可以弹出层提示内容。对于介绍图片的某个部分很有用。 源码下载

jQuery设计思想

一个人想着一个人 提交于 2020-01-13 01:13:55
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。 对于网页开发者来说,学会jQuery是必要的。因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。 目前,互联网上最好的jQuery入门教材,是 Rebecca Murphey 写的 《jQuery基础》 (jQuery Fundamentals)。在Google里搜索"jQuery培训",此书排在第一位。jQuery官方团队已经 同意 ,把此书作为官方教程的基础。 这本书虽然是入门教材,但也足足有100多页。我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从 手册 中找到具体的写法。 下面就是我的笔记,它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识,就能看懂它,在最短的时间里

JS库

五迷三道 提交于 2020-01-12 09:29:59
JavaScript 库 - jQuery、Prototype、MooTools。 JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。为了应对这些调整,许多的 JavaScript (helper) 库应运而生。这些 JavaScript 库常被称为 JavaScript 框架。在本教程中,我们将了解到一些广受欢迎的 JavaScript 框架: jQuery Prototype MooTools 所有这些框架都提供针对常见 JavaScript 任务的函数,包括动画、DOM 操作以及 Ajax 处理。 jQuery jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。jQuery 同时提供 companion UI(用户界面)和插件。许多大公司在网站上使用 jQuery: Google Microsoft IBM Netflix Prototype Prototype 是一种库,提供用于执行常见 web 任务的简单 API。API 是应用程序编程接口(Application Programming Interface)的缩写。它是包含属性和方法的库,用于操作 HTML DOM。Prototype 通过提供类和继承,实现了对

2019 JS内功修炼之读jQuery源码

青春壹個敷衍的年華 提交于 2020-01-12 09:13:32
引言:2019年,react hooks成功上位,vue3.0发布alpha版,TS使用率的飞速增长,以及大量前端开发工具使用体验的大幅优化和提高等等让越来越多的开发者吐槽前端学不动了的时候,最好的应对方式便是对基础概念的掌握。内功足够强大,才能做到不被别人牵着鼻子走。阅读开源代码是一个很好的方式,首先率选择了jQuery便是里面的内容没有太多足够抽象的设计思想。更多的是对于基础内容的覆盖。同时也包含一些不错但设计模式在里面,因此具有不错的性价比。 jQuery是早期前端开发中占比很重的一个库。在手动操作DOM和浏览器差异较大的时代,jQuery通过统一和简化不同浏览器之间的API,为程序开发带了极大的便利。所以jQuery的设计思路也是围绕这两点展开的。 ps: 不做特殊说明, $ 在源码示例中等效 jQuery 。 jQuery做的主要工作 DOM查询及操作 ajax请求 animation动画 promise(deferred) event handle css style 兼容性问题,抹平不同浏览器的间差异 jQuery的特点 面向对象 ————> prototype API设计的特点 ————> 函数重载 jQuery对于DOM的操作是命令式的,那么相对就要要求使用成本是相对较低的,没有特别复杂的API设计,数量少,参数简单。 内部封装,为了实现jQuery的几大功能