Learning JQuery 读书笔记——第四章 效果-为艺术添加艺术性(CSS)

[b][size=large]1. 修改内联CSS[/size][/b]
传统javascript对css的操作相当繁琐,比 如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操 作,$("#a").background(),$("#a").background(“red”)
css(name) 获取样式名为name的样式
css(prop) prop是一个map对象,用于设置大量的css样式;
如: $("#b").css({ color: "red", background: "blue" });
css(name, value) 用于设置一个单独得css样式;$("#b").css("color","red");
对于属性名name:jQuery可处理Css(background-color),也可处理DOM (backgroundColor)表示法
[b][size=large]2. 动态效果[/size][/b]
[b]1. 显示和隐藏:[/b]
优点:操作后会记住之前设置的数值!
1) 简单:
hide() 隐藏匹配对象
show() 显示匹配对象
2) 效果和速度:
hide(speed) 以一定的速度隐藏匹配对象,其大小(长宽)和透明度都逐渐变化到0,speed有3级("slow"0.6秒, "normal"-0.4秒, "fast"-0.2秒),也可以是自定义的速度。
show(speed) 以一定的速度显示匹配对象,其大小(长宽)和透明度都由0逐渐变化到正常
hide(speed, callback) show(speed, callback) 当显示和隐藏变化结束后执行函数callback
[b]2. 淡入和淡出:[/b]
fadeIn(speeds) fadeOut(speeds) 根据速度调整透明度来显示或隐藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调整透明度,不调整大小
fadeIn(speed, callback) fadeOut(speed, callback) callback为函数,先通过调整透明度来显示或隐藏匹配对象,当调整结束后执行callback函数
fadeTo(speed, opacity, callback) 将匹配对象以speed速度调整到透明度opacity,然后执行函数callback。Opacity为最终显示的透明度(0-1).
[b]3. 高度[/b]
slideDown(speeds) 将匹配对象的高度由0以指定速率平滑的变化到正常!
slideDown(speeds,callback) 将匹配对象的高度由0变化到正常!变化结束后执行函数callback
slideUp("slow") slideUp(speed, callback) 匹配对象的高度由正常变化到0
[b]4. 交替[/b]
slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0,若为0,则逐渐变化到正常
toggle() toggle(speed) 如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。
[b]5. 多重效果[/b]
animate()用于创建自定义动画的函数。有四个参数,如:
$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
6. 并发和排队效果
1) 处理一组元素:
可以采用连缀方式,效果方法会依次发生。如
$(‘div.button’)
.animate({left:650, height:38},’slow’); $(‘div.button’)
.animate({left:650},’slow’)
.animate({ height:38},’slow’);
注意:连缀排队不适用于其他的非效果方法,如.css(),非效果方法会随事件立即执行。解决方法采用处理多组元素。
2) 处理多组元素:
与一组元素的情况不同,当为不同组的元素应用效果时,这些效果几乎会同时发生。
解决方法:回调函数
总结:
一组元素上的效果:
 当在一个.animate()方法中以多个属性的方式应用时,是同时发生的。
 当以方法连缀的形式应用时,是按顺序发生的(排队效果)。
多组元素上的效果:
 默认情况下是同时发生的。
 当在事件处理程序的回调函数中应用时,是按顺序发生的(排队效果)。
资源下载链接为: https://pan.quark.cn/s/3d8e22c21839 随着 Web UI 框架(如 EasyUI、JqueryUI、Ext、DWZ 等)的不断发展与成熟,系统界面的统一化设计逐渐成为可能,同时代码生成器也能够生成符合统一规范的界面。在这种背景下,“代码生成 + 手工合并”的半智能开发模式正逐渐成为新的开发趋势。通过代码生成器,单表数据模型以及一对多数据模型的增删改查功能可以被直接生成并投入使用,这能够有效节省大约 80% 的开发工作量,从而显著提升开发效率。 JEECG(J2EE Code Generation)是一款基于代码生成器的智能开发平台。它引领了一种全新的开发模式,即从在线编码(Online Coding)到代码生成器生成代码,再到手工合并(Merge)的智能开发流程。该平台能够帮助开发者解决 Java 项目中大约 90% 的重复性工作,让开发者可以将更多的精力集中在业务逻辑的实现上。它不仅能够快速提高开发效率,帮助公司节省大量的人力成本,同时也保持了开发的灵活性。 JEECG 的核心宗旨是:对于简单的功能,可以通过在线编码配置来实现;对于复杂的功能,则利用代码生成器生成代码后,再进行手工合并;对于复杂的流程业务,采用表单自定义的方式进行处理,而业务流程则通过工作流来实现,并且可以扩展出任务接口,供开发者编写具体的业务逻辑。通过这种方式,JEECG 实现了流程任务节点和任务接口的灵活配置,既保证了开发的高效性,又兼顾了项目的灵活性和可扩展性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值