jQuary学习の三の效果展示

一、隐藏显示

1.$(selector).hide(speed,callback);
2.$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

3.$(selector).toggle(speed,callback);(隐藏显示之间的切换。)

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

二、淡入淡出

fadeIn()用于淡入已经隐藏的元素(参数同上,可取slow,fast或者毫秒)

fadeOut()用于淡出可见元素

fade Toggle()方法可以在fadeIn和fadeOut之间进行切换。

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

  $(selector).fadeTo(speed,opacity,callback);

  必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。

三、滑动

  slideDown()方法用于向下滑动元素

  slideUp()方法用于向上滑动元素

  jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动,则 slideToggle() 可向上滑动它们。如果元素向上滑动,则 slideToggle() 可向下滑动它们。

四、动画

  jQuery animate() 方法用于创建自定义动画。

  $(selector).animate({params},speed,callback);

  必需的 params 参数定义形成动画的 CSS 属性。

  也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

  甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

  默认地,jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

五、停止动画

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

六、Callback 函数在当前动画 100% 完成之后执行。

  在隐藏函数后面添加后继函数参数,来达到Callback效果。

七、链接技术(chaining)

  举例如下:$("#p1").css("color","red").slideUp(2000).slideDown(2000);

八、捕获内容和属性:

  text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

三者在函数后面加相应参数即可完成文本输出等操作,同时,其回调函数有两个参数:被选元素列表中当前元素的下标,以及(原始)旧的值,然后以函数新值返回您希望使用的字符串。

  attr() 方法用于获取属性值,属性值必须在后面的参数中。

attr设置属性可以多个设置,且设置时需要存在两个参数,并且可知attr的回调函数使用时和其他三个相同参数设置。

九、添加元素

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

十、删除元素

remove() - 删除被选元素(及其子元素)

remove接受jquary选择器的参数,则变成一个过滤删除操作。

empty() - 从被选元素中删除子元素

十一、jquaryのcss操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类后面如果有多个类参数,类之间使用空格隔开即可,不需使用逗号和分号。前边的$("x","y","z")中xyz之间使用逗号分隔开。

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性返回css的值与设定css的值,其中设定css的值时,可以同时多值设定,但需要在每次设定后面添加一个逗号。

十二、jquary尺寸

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

设置或返回元素的高度和宽度。

原文地址:https://www.cnblogs.com/saber123/p/8590942.html

时间: 2024-10-11 01:24:45

jQuary学习の三の效果展示的相关文章

7个播放器效果展示(附源码)(一,二,三,四)

1.  HTML5+CSS3自定义视频播放器实现物理效果 源码下载/  在线演示 2.  html5触发式音频播放 这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本动画插件. 源码下载 /  在线演示 3. html5+css3酷炫音频播放器 源码下载/  在线演示 4.  css3迷你播放器面板 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/  在线演示 7个播放器效果展示(附源码)(一,二,三,四)

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息.当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:Pop Up Window弹出修改详情以及在本页面隐藏详情页面显示编辑页面. 实现这个功能以前主要需要先了解几个标签: lightning:recordForm: 此标签允许用户快速的创建一个form去查看,添加以及修改一条记录.集合了 lightning:recordEditForm 以及 lightning:recordViewFor

10个Web前端值得收藏的背景全屏效果展示(附源码)(上)

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.特别是在移动端大显身手.这篇文章挑选了10个绚丽的背景全景展示效果,希望对你有所帮助. 1.  JS图片背景全屏代码实现物理效果 玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标滑轮放大或者缩小,有不同的效果,赶紧来体验一下. 源码下载  /  在线演示 2.  CSS3学习 - 网站背景拉伸平铺jQuery插件 这个插件集成了一些非常好的 JavaScript 库,提供一个方便使用的文本

Jetty学习三:配置概览-需要配置什么

上一节讲述了怎么配置Jetty,这节将告诉你使用Jetty你需要配置些什么. 配置Server Server实例是Jetty服务端的中心协调对象,它为所有其他Jetty服务端组件提供服务和生命周期管理.在标准Jetty发布中,核心的服务端配置是在etc/jetty.xml文件中,你也能在其中包含其他服务端配置,可以包括: 1)ThreadPool Server实例提供了一个线程池,你可以在etc/jetty.xml中配置最大线程数和最小线程数. 2)Handlers Jetty服务端只能有一个H

Jquery Easy UI初步学习(三)数据增删改

第二篇只是学了加载用datagrid加载数据,数据的增删改还没有做,今天主要是解决这个问题了. 在做增删改前需要弹出对应窗口,这就需要了解一下EasyUi的弹窗控件. 摘自:http://philoo.cnblogs.com/ 我的理解,就是panel有的属性Window.dialog都有,同时保留自己的扩展属性方法 , 所以主要展示pannel的属性. Pannel 属性 名称 类型 说明 默认值 title string 显示在Panel头部的标题文字. null iconCls strin

虚拟化(七):vmware horizon view 安装及效果展示

虚拟化(一):虚拟化及vmware产品介绍 虚拟化(二):虚拟化及vmware workstation产品使用 虚拟化(三):vsphere套件的安装注意及使用 虚拟化(四):vsphere高可用功能前提-共享存储搭建 虚拟化(五):vsphere高可用群集与容错 虚拟化(六):vmware 桌面虚拟化 horizon view 介绍 vmware horizon view 整体结构图,如下: 本节主要简要介绍view套件的安装,主要步骤有准备ad和dns环境,安装vsphere套件,安装com

6个绚丽时尚的Web前端3D效果展示(附源码)

作为一个前沿的 Web 开发者,对于 HTML5 和 现在流行的3D技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身手.这篇文章挑选了6个前沿的绚丽的3D展示效果,希望对你有所帮助. 1.  3D自由立体旋转现实物理效果 3D自由立体旋转是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的3D自由立体旋转运动.玩法介绍:可以随意拖动鼠标.按住鼠标左键选中旋转物体.或者按住鼠标

Dango基础学习三

今天主要来学习一下Django的路由系统,视频中只学了一些皮毛,但是也做下总结,主要分为<静态路由>.<动态路由>.<二级路由> 一.先来看下静态路由 1.需要在project中的urls文件中做配置,然后将匹配到的urls转发到对应app的views的函数中 2.在对应的app的views中配置相应的函数 3.这个时候我们通过浏览器访问这个url,就可以得到如下的结果 ok.至此,静态路由我们就学习完了,下面我们开始学习动态路由 二.动态路由的学习,动态路由的学习主要

算法学习三阶段

?? 第一阶段:练经典经常使用算法,以下的每一个算法给我打上十到二十遍,同一时候自己精简代码, 由于太经常使用,所以要练到写时不用想,10-15分钟内打完,甚至关掉显示器都能够把程序打 出来. 1.最短路(Floyd.Dijstra,BellmanFord) 2.最小生成树(先写个prim,kruscal 要用并查集,不好写) 3.大数(高精度)加减乘除 4.二分查找. (代码可在五行以内) 5.叉乘.判线段相交.然后写个凸包. 6.BFS.DFS,同一时候熟练hash 表(要熟,要灵活,代码要