1. 修改内联CSS
传统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)表示法
2. 动态效果
1. 显示和隐藏:
优点:操作后会记住之前设置的数值!
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
2. 淡入和淡出:
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).
3. 高度
slideDown(speeds) 将匹配对象的高度由0以指定速率平滑的变化到正常!
slideDown(speeds,callback) 将匹配对象的高度由0变化到正常!变化结束后执行函数callback
slideUp("slow") slideUp(speed, callback) 匹配对象的高度由正常变化到0
4. 交替
slideToggle("slow") 如果匹配对象的高度正常则逐渐变化到0,若为0,则逐渐变化到正常
toggle() toggle(speed) 如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。
5. 多重效果
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()方法中以多个属性的方式应用时,是同时发生的。
当以方法连缀的形式应用时,是按顺序发生的(排队效果)。
多组元素上的效果:
默认情况下是同时发生的。
当在事件处理程序的回调函数中应用时,是按顺序发生的(排队效果)。
分享到:
相关推荐
q-learning的一个解释性例子.压缩文件有两个m文件构成,运行后可输出结果。
Learning JQuery PDF中文版 完整版,共6卷,需全部下载后才可正常解压。
Learning JQuery PDF中文档,共6卷.需全部下载后才可正常解压。
Learning JQuery PDF中文档,共6卷.需全部下载后才可正常解压。
Learning jQuery Fourth Edition jQuery基础教程 带源码
JQuery官网推荐的学习教程,英文原版,找了好久,共享下
Learning jQuery 3 - Fifth Edition by Adam Boduch English | 29 May 2017 | ASIN: B01N2RKEL3 | 448 Pages | AZW3 | 6.45 MB Create efficient and smart web applications with jQuery 3.0 using this step-by-...
Learning jquery中文版.PDF[完整版-共6卷] - 04。需全部下载后才可正常解压。
Learning jquery中文版.PDF[完整版-共6卷] - 05.需全部下載完成才可以正常解壓。
Learning jquery中文版.PDF[完整版-共6卷] - 06,需全部下載完成才可正常解壓.
JQuery精品教程,对学习了解JQuery有很大的帮助。此版本为英文版
Learning jquery中文版 pdf版
机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据中学习得到模型参数,并最终对数据进行预测和分析的一门学科。 机器学习的用途 机器学习是一种通用的数据处理技术,其包含了大量...
jQuery基础教程 (Learning jQuery) 完整源代码
Jquery基础教程完整版(Learning jQuery)-第四版高清文档
《Mathematics for Machine Learning》读书笔记(一)一、线性代数1.核心概念及相互关系下图摘抄自书中第二章开篇之处,较详细的展示了
Learning_jQuery_zh_CN.pdf 中文版 Learning_jQuery_zh_CN.pdf 中文版 Learning_jQuery_zh_CN.pdf 中文版 Learning_jQuery_zh_CN.pdf 中文版 Learning_jQuery_zh_CN.pdf 中文版
Learning jQuery Jquery基础教程(第二版)
周志华《Machine Learning》学习笔记(1)--绪论.md