jquery特效技巧-jq特效代码 收藏 0

jQuery 动画制作与特效

使用show()和hide()方法

在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。

在jQuery中提供了show()和hide()两个方法,来直接实现元素对象的显示和隐藏。

jQuery代码：

HTML代码：

制作多级菜单

jQuery代码:

HTML代码:

理解: e.target是引发事件的元素

this是当前执行事件句柄的元素,this等于e.currentTarget(在事件冒泡阶段中的当前DOM元素 )

if(this==e.target)语句作用。

this指的是定义事件的所有含有ul的li标签。

e.target指的是触发事件的对象,可能是包含ul的li, 也可能是该li内部的任何元素, 显然我们不能点击内部任意位置都触发事件，

所以必须添加判断, 只有点击当前菜单选项时才执行收起子菜单动作;如果去掉这个判断, 那么只要你点击二级菜单的任意位置, 就会收起菜单,

显然是不行的, 你可以去掉判断看看效果就明白了。

使用toggle()方法实现显隐切换

曾经介绍过toggle()方法,该方法接受两个函数作为参数,相互切换;

如果不接受参数,toggle()方法将默认为在show()和hide()之间切换,因此修改上面案列为:

HTML代码:

元素显隐和渐入渐出效果

show(duration,[callback]) duration表示动画执行的时间长短,可以是表示速度的字符串,包括slow、normal、fast，

也可以是表示时间的整数(毫秒);callback为可选的回调函数,在动画完成后执行;

jQuery代码：

HTML代码：

与show()和hide()方法一样,toggle()方法也可以接受两个参数,制作成动画的效果;

jQuery代码：

HTML代码:

使用fadeIn()和fadeOut()方法

fadeIn(duration,[callback]) 渐显(颜色增强)

fadeOut(duration,[callback]) 渐隐(颜色褪色)

其中参数duration和callback与slow()、hide()中的完全相同;

制作渐渐褪色的动画效果:

jQuery代码:

HTML代码:

使用fadeTo()方法自定义变幻目标透明度;

jQuery代码:

fadeTo(duration,opacity,callback)方法,能够让开发者自定义变幻的目标透明度.其中opacity的取值范围为0.0~1.0

HTML代码:

当使用fadeOut()方法时,图片完全消失后将不在占用<p>的空间,

而使用fadeTo(1000,0)时,虽然图片也完全不显示,但仍然占用着标记<p>的空间

幻灯片效果

slideUp()和slideDown()来模拟PPT中的类似幻灯片拉窗帘的特效

slideUp(duration,[callback]) 上滑(消失)

slideDown(duration,[callback]) 下滑(显示)

jQuery代码:

HTML代码:

停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

jQuery 代码:

实例：阻止动画播放

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目。

总结：

1、基本效果

show()：将隐藏的元素显示

show(speed,[callback]) ：以动画的效果显示

hide()：将显示的元素隐藏

hide(speed,[callback]) ：以动画的效果隐藏

toggle()：显示或者隐藏

toggle(switch) ：如果参数为true则表示只显示, 反之如果参数为false则表示只隐藏

toggle(speed,[callback])：以动画的方式显示或者是隐藏

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

2、滑动效果

slideDown()：将隐藏的元素显示

slideDown(speed,[callback]) ：以动画的方式显示

slideUp()：将显示的元素隐藏

slideUp(speed,[callback]) ：以动画的方式隐藏

slideToggle()：隐藏或显示

slideToggle(speed,[callback])：以动画的方式隐藏或者显示

参数说明：

speed：速度 单位为毫秒

\”slow\”, 缓慢

\”normal\”, 正常

\”fast\” 快速

callback：回调函数 当动画执行完毕以后再来执行的函数

3、淡入淡出

fadeIn()：淡入

fadeIn(speed,[callback]) ：以动画的方式进行淡入

fadeOut()：淡出

fadeOut(speed,[callback])：以动画的方式进行淡出

fadeTo(speed,opacity,[callback]) ：淡入淡出到指定值

opacity：透明度 取值：0-1之间 0表示完全透明 1表示不透明

callback：回调函数 当动画执行完毕以后再来执行的函数

show() 显示元素 hide()隐藏元素 toggle()显示和隐藏切换

fadeIn() 渐显(颜色增强) fadeOut()渐隐(颜色褪色) fadeTo() 自定义变换目标透明度 fadeToggle() 淡入和淡出切换

slideUp() 幻灯片上滑(消失) slideDown() 幻灯片下滑(显示) slideToggle() 幻灯片上滑和下滑切换

4 停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true, 则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成, 并且重设show和hide的原始样式, 调用回调函数等。

JQuery为什么会被淘汰？

前端的同学会发现，除了一些老项目外，现在基本没有新的前端项目使用JQuery了。因此，我们不得不接受一个现实，那就是曾经风光无限的JQuery，即将要被历史淘汰了。

JQuery

为什么那么受人们欢迎的JQuery就要面临被淘汰的命运呢？今天我们就来全面分析一下背后的原因。

一、JQuery的优势

首先，我们来分析一下JQuery的优点，了解一下他在当时为什么会受欢迎。

1.强大的DOM操作

JQuery提供了非常完善的DOM操作API，DOM节点的增、删、改、查，节点的样式更新，还是事件的交互处理 ，使用起来都非常方便。另外，提供了各种节点选择器，可以进行节点的批量操作，非常高效。

2.JQuery AJAX

AJAX的出现，对前端来说绝对是个革命性的变化，使得浏览器可以跟服务端异步请求，实现页面的局部刷新。JQuery提供的AJAX接口，使用起来极其简单、方便。在使用简单的基础上，还提供了各种配置、回调函数等，又保证了其功能的强大性，无论是POST、GET、同步、异步，还是文件上传，能满足各种场景。

3.领先时代的动画

JQuery的动画特效，能让页面做出非常酷炫的效果，使得页面效果更加生动活泼，这在当时是非常领先的。

4.丰富的插件

JQuery还支持插件的扩展，在标准的JQuery上，添加自己的插件功能。这就让当时的互联网上，出现了很多好用的JQuery插件，直接通过拿来主义就能使用。

从以上分析看，JQuery在当时，甚至是现在来说，都是非常优秀的。因此，JQuery的淘汰，不是因为你不够优秀，而是因为时代不再需要你了，是不是有点像当年柯达胶卷被时代抛弃的悲情。

二、为什么会被淘汰

接下来，我们来具体分析被淘汰的原因，总体来说，新技术的更新换代，JQuery在新一代技术的降维打击之下，不得不面临被淘汰。

1.优势被超越

首先，JQuery的DOM操作优势，现在的新技术换了一个不同的赛道跟JQuery竞争，现在都是通过模板语法、数据绑定、虚拟DOM等技术，进行页面UI的更新，更加方便、高效，也就是说，我们不再需要手动进行DOM操作了。

其次，对于JQuery AJAX，目前已经要被axios等取代，axios不仅同样强大、好用，而且支持请求、响应拦截的处理，这是JQuery不具备的。

另外，JQuery的动画特效，在CSS3出现后，完全不占优势，CSS3更是支持硬件加速，性能体验更优，这在移动互联网上非常重要。

最后，说说JQuery插件，相对于各种插件的大杂烩，可能会面临各种兼容问题，现在前端则是整套完整、风格统一的组件库，如：ElementUI、有赞UI、京东UI等等，一个库能提供你所有常用的组件。

2.新的技术趋势

JQuery充其量只是一个组件库，只能满足前端开发某一方面、或某几方面的需要。

现在前端项目的复杂度，要求我们有一整套完整的解决方案，包括模板绑定、路由、状态、监听、过滤等等。在模块化、组件化、MVVM等编程思想下，出现了一大批架构级的优秀前端框架，如：vue、react、angular等，它们具备以上所说的全部能力。

另外，如此复杂的前端架构，又必须要有前端的工程化管理，这些框架能很好地配合nodejs、webpack等，实现架构搭建、开发、测试、发布（压缩、混淆、打包编译等），等全过程的自动化、工程化管理。

因此，在这些新技术趋势下，JQuery的生存空间已经很小了。

三、致敬JQuery

时代在进步，是时候跟JQuery说再见了，但无论如何，我们都需要对JQuery致以崇高的敬意，陪伴一代前端程序员走过青春。

致敬JQuery

当然，现在JQuery依然还在，希望3.6.0不是它的最后一个版本。

不知道大家对JQuery的看法如何呢，欢迎大家交流。

web前端Jquery学习笔记一

Jquery 是一款优秀的JavaScript框架，它是一个轻量的JS库，它兼容CSS3，还兼容各种浏览器（IE6.0+,火狐1.5+,谷歌，safari2.0+等），使用Jquery让web开发变得更简单，例如：文档操作、文档选择、制作动画、事件处理、AJAX的使用以及其他的功能。

JS框架就是对JS各种功能的封装和抽象，使我们在开发的时候具有简便性和更好的兼容性，并且可以扩展框架的内容。

Jquery 、 phototype、Mootools

YUI（yahoo user interface 雅虎的）

Kissy（淘宝自己的框架）

JX(腾讯自己的框架)

Tangram(百度自己的框架)

ExtJs(后台开发前端框架，全部都是AJAX操作，性能不是太好)

所谓的库就类似于一个工具箱，我们在做项目的时候需要用这些工具来完成我们要的前端效果。

所谓的框架就是别人已经封装好的效果我们直接拿过来使用即可。

使用库我们可以快速做出自己想要的效果。

框架具有选择性如果没有给我们封装那个效果我们同样要自己来写。

开源（源码开放）

轻量级，代码非常小巧

完善的学习资源，语法简练、语义易懂、学习快速、丰富文档

出色的浏览器兼容

出色的dom操作

插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能

官方网站:http://www.jquery.com

下载地址：http://www.jquery.com/download

下载后出现

文件后缀会出现min.js 这个是压缩版也是线上版，.js是开发版本

压缩版：没有空格，没有换行，没有文字说明

未压缩版：有空格，有换行，有简单的注释

如何选用版本呢？

1.0,1.2,1.3 …….2.0….3.0

区别在于兼容性：

2.0 以上版本不支持IE9以下的浏览器

1.0-1.9版本支持IE6，IE7，IE8

建议使用（1.7-1.9）版本

JS操作

语法：JS对象.style.CSS属性转化为JS后的名称=属性的值

JS设置背景色：

对象.BackgroundColor=’red’;

CSS设置背景色:

background-color: red;

缺点：

需要将CSS的写法转换成JS的写法

一次只能设置一个样式

Jquery操作

语法:

$().css(‘属性名’); //获取样式属性的值

$().css(‘属性名’,’属性值’);//设置样式的属性和值

$().css(json对象)//设置样式的多个属性

说明：json对象的键=>值（‘属性名’=>’属性值’）

例如：设置背景为红色，字符30px;

所谓选择器就是用来查找定位DOM元素的工具

获取和选择：

HTML中的标签元素

JS中的DOM节点

JS中的对象

简单选择器的对比

灵感来源于CSS选择器

语法：$(‘#ID名称’)

作用：选择页面指定ID的元素的名称，返回JQ对象

说明：说明相当于JS中的document.getElementsById();

案例：使用ID选择器将【who are you!】变成红色

【原生JS】

obj = document.getElementById(\’em1\’);

obj.style.color=\’red\’;

【Jquery】

$(\’#em1\’).css(\’color\’,\’red\’);

脚下留心：$is not defined

当我们看到$ is not defined 说明我们没有引入jquery操作库

语法：$(‘.类名’)

作用：选择页面指定类名称的元素，返回JQ对象

说明:相当于JS中document.getElementsByClassName

$(\’.em1\’).css({\’color\’:\’blue\’,\’font-size\’:\’30px\’});

语法：$(‘标签名称’);

作用：选定页面指定标签的名称

说明：相当于JS中的getElemetsTagName()

【HTML】

3.使用标签选择器将【<span>O!NO!</span>】变成<span>黄色</span>,

【JS】

$(\’span\’).css(\’color\’,\’red\’);

脚下留心：是将页面中所有的span标签字体颜色全部改变。

语法：$(*)

作用：选择页面所有的标签元素，返回JQ对象

//通配符选择器

$(\’*\’).css(\’color\’,\’blue\’);

语法:$(‘选择器1,选择器2,选择器3…’);

作用：选择页面同时指定多个标签元素，返回JQ对象

特点：

可以选择多个选择器，多个之间使用,号隔开

可以执行相同的操作

$(\’div,p\’).css(\’color\’,\’red\’);

语法:$(‘选择器1 选择器2 选择器..n’);

作用：选择指定父级元素下的所有子元素

特点：

给所有的子孙增加样式

多个选择器使用逗号分隔开来

//父亲下面的所有的子孙

$(\’#id1 span,#id2 span\’).css(\’color\’,\’blue\’);

语法：$(‘选择器1>选择器2’)

作用:选中父级下的儿子选择器

特点：选中父级下的儿子但是不包含孙子

$(\’#id1 > span\’).css(\’color\’,\’red\’);

思考：后代选择器和子元素选择器有什么区别？

后代选择器：会选中父级下的所有标签元素

子元素选择器：只会选中父级下的所有子元素

【+】紧邻同辈

语法：$(‘选择器1+选择器2’)

作用；选中指定对象的下一个兄弟元素

特点：

只是选择一个和其紧邻的下一个元素(紧邻同辈元素)

//选择紧挨p元素的下一个元素

$(\’#id3 p+span\’).css(\’color\’,\’red\’);

【~】相邻同辈

语法：$(‘选择器1~选择器2’)

作用：选中指定对象的下的所有兄弟元素

特点:

从对象下面开始找，所有指定的兄弟元素

//选择相邻p元素的下一个元素

$(\’#id4 p~span\’).css(\’color\’,\’red\’);

:input

语法:$(‘:input’)

作用：选中所有input select textarea button 表单元素

:text

语法:$(‘:text’)

作用：选中所有单行文本(<input type=’text’/>)

:password

语法:$(‘:password’);

作用:选中所有密码文本(<input type=’password’/>)

:radio

语法:$(‘:radio’);

作用：选中所有单选框 (<input type=’radio’/>)

:checkbox

语法：$(‘:checkbox’);

作用：选中所有复选框元素（<input type=’checkbox’/>）

:file

语法：$(‘:file’)

作用：选中所有文件域元素（<input type=’file’>）

:hidden

案例：

在表单元素中单选和复选框比较特殊，不能设置颜色，在实际项目中我们可以通过

div设置图片来代替单选和复选框

案例代码：

:checked

语法：$(‘:checked’)

作用：匹配所有选择的表单标签，一般用于匹配单选按钮和多选按钮

脚下留心：同时包含单选和多选按钮

:selected

语法:$(‘:selected’)

作用:匹配所有选中的的元素，一般用于匹配下拉列表

:disabled

语法：$(‘:disabled’)

作用：选中匹配表单中禁用的元素

:enabled

语法:$(‘:enabled’)

作用：选中匹配表单可用元素，和disabled相反

7.过滤-简单过滤/选中

:first

语法：$(‘选择器:first’);

作用：用于匹配选中元素集合中的第一个元素

:last

语法:$(‘:last’);

作用：匹配选中集合元素中的最后一个元素

脚下留心：

First和last 操作的是当前选择器集合下的元素（当前选中的所有标签）集合外的不会被选中

:even

语法：$(‘选择器:even’);

作用:用于匹配 元素集合中 索引为偶数的（说明：偶数从零开始）

:odd

语法：$(‘选择器:odd’);

作用:用于匹配指定元素集合中 索引为偶数的元素

小总结

even和odd他们的作用刚刚相反，在实际工作项目中我们用来区分列表的每行显示

:eq

语法:$(‘选择器:eq(index)’) ,index:索引从0开始

作用:匹配指定元素集合中的具体某一个元素

:gt

语法:$(‘选择器:gt(index)’)

作用:用于匹配指定集合中的元素索引值大于index的元素集合

:lt

语法:$(‘选择器:lt(index)’);

作用：和gt 的作用相反

脚下留心:

Gt(index)和lt(index) 过滤选择器 不包含当前选中的index元素

:not(selector)

语法:$(‘选择器:not(选择器1,选择器2)’)

作用:匹配指定元素集合 除了指定的元素

:header

语法：$(‘选择器:header’)

作用:匹配选中所有标题标签元素

:contains

语法：$(‘选择器:contains(内容)’)

作用: 匹配选中标签中是否存在指定内容

例如：

:has

语法:$(‘选择器1:has(标签名称)’)

作用：匹配指定选择器中的指定标签。

案例：

:empty

语法:$(‘选择器:empty’)

作用:匹配指定选择器内容为空的元素

说明：如果有子元素就不为空

:parent

语法：$(‘选择器:parent’)

作用:和empty相反，匹配指定选择器内容不为空的元素

包含属性[attribute]

语法:$(‘选择器[属性名称]’)

作用:匹配选择器，有该属性的元素（标签）

包含值[attribute*=value]

语法:$(‘选择器[属性名称*=属性值]’)

作用：用于匹配选中选择器中 属性名 含有 属性值的元素

等值[attribute=value]

语法：$(‘选择器[属性名称=属性值]’)

作用:用于匹配选中选择器中 属性名 等于 属性值的元素

不等值[attribute!=value]

语法:$(‘选择器[属性名!=属性值]’)

作用:用于匹配选中选择器中的元素 属性名 不等于 属性值的元素

值开头[attribute^=value]

语法:$(‘选择器[属性名^=属性值]’)

作用:用于匹配选中的元素 属性名 开头为 指定元素属性值的元素

值结尾[attribute$=value]

语法:$(‘选择器[属性名$=属性值]’)

作用:用于匹配选中的元素 属性名 结尾为 指定元素属性值的元素

案例代码：

和简单并且选择器做比较

第一个子:first-child

语法：$(‘选择器:first-child’)

作用：匹配指定父元素的第一个子元素

最后一个子:last-child

语法:$(‘选择器:last-child’)

作用:匹配指定父元素下的最后一个子元素

指定子:nth-child(index/even/odd)

语法:$(‘选择器:nth-child(index)’)

作用:匹配指定父元素的 指定索引元素或索引为奇数或索引为偶数的元素

说明：

Index:代表索引，索引的值从（1）开始，要和eq区分开来

Even：代表偶数

Odd：代表奇数

唯一子:only-child

语法:$(‘选择器:only-child’)

作用:如果当前元素为父元素的唯一元素则匹配

:hidden

语法：$(‘选择器:hidden’)

作用:匹配不可见元素

:visible

语法:$(‘选择器:visible’)

作用:匹配可见元素

选择器:hidden 之间是没有空格的

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com