jQuery操作css方法
目录
一、jQuery可以使用css方法来修改元素样式
二、设置类的样式方法
1.添加类
2.移除类
3.切换类
三、类操作与className区别
四、显示隐藏效果
1、显示语法
2、隐藏语法
3、切换语法
五、滑动效果
1、上滑效果语法
2、下滑效果语法
3、滑动切换效果语法
4、事件切换
六、动画队列及其停止排队方法
1、动画或效果队列
2、停止排队
七、淡入淡出效果
1、淡入效果语法
2、淡出效果语法
3、淡入淡出切换效果语法
4、渐进方式调整到指定的不透明度
八、自定义动画animate
一、jQuery可以使用css方法来修改元素样式
jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
1.参数只写属性名,则是返回属性值
$(this).css("color"");
⒉.参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加号,值如果是数字可以不用
跟单位和引号
$(this).css("color", "red");
示例:
<body><div>123</div><script>$(function(){$("div").css("color","red");});</script>
</body>
3.参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,
$(this).css({ "color":" white","font-size":"20px"});
示例:
<body><div></div><script>$(function(){$("div").css({width:200,height:200,backgroundColor:"red"});});</script>
</body>
二、设置类的样式方法
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
1.添加类
$("div").addClass("current");
2.移除类
$("div").removeClass("current");
3.切换类
$("div").toggleClass("current");
示例:
<style>div{width: 100px;height: 100px;background-color: aquamarine;margin: 100px auto;transition: all 0.5s;}.current{background-color: red;transform: rotate(360deg);}</style></head><body><div class="current"></div><script>//添加类addClass()/* $(function(){$("div").click(function(){$(this).addClass("current");});}) *///删除类removeClass()/* $("div").click(function(){$(this).removeClass("current");}); *///切换类 toggleClass()$("div").click(function(){$(this).toggleClass("current");});</script></body>
三、类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
<body><div class="one"></div><script>//追加类名,覆盖原来的类名var one = document.querySelector(".one");one.className = "two";//addClass相当于追加类名,不影响以前的类名$(".one").addClass("two");//移除two这个类名//$(".one").removeClass("two");</script>
</body>
四、显示隐藏效果
1、显示语法
show ([speed,[easing],[fn]])
显示参数
(1)参数都可以省略,无动画直接显示。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"norma",or“fast”)或表示动画时长的毫秒数值
(如:1000)。
( 3 ) easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
( 4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
2、隐藏语法
hide([speed,[easing],[fn]])
3、切换语法
toggle([speed,[easing],[fn]])
示例:
<style>div{width: 100px;height: 100px;background-color: aquamarine;}</style></head><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);});});//一般情况不加参数,直接显示隐藏$("button").eq(2).click(function(){$("div").toggle(1000);});})</script></body>
五、滑动效果
1、上滑效果语法
slideUp ([speed,[easing],[fn]])
2、下滑效果语法
slideDown([speed,[easing],[fn]])
3、滑动切换效果语法
slideToggle ([speed,[easing],[fn]])
示例:
<style>div{width: 100px;height: 100px;background-color: aquamarine;display: none;}</style></head><body><button>下滑</button><button>上滑</button><button>滑动切换</button><div></div><script>$(function(){//下滑slideDown()$("button").eq(0).hover(function(){$("div").slideDown();})//上滑slideUp()$("button").eq(1).hover(function(){$("div").slideUp();})//滑动切换slideToggle()$("button").eq(2).hover(function(){$("div").slideToggle();})})</script>
</body>
4、事件切换
hover([over,]out)
( 1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数(相当于mouseleave )
六、动画队列及其停止排队方法
1、动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
2、停止排队
stop()
(1 ) stop()方法用于停止动画或效果。
(2)注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画。
<script>$(function(){//下滑slideDown()$("button").eq(0).hover(function(){$("div").stop().slideDown();})//上滑slideUp()$("button").eq(1).hover(function(){$("div").stop().slideUp();})//滑动切换slideToggle()$("button").eq(2).hover(function(){$("div").stop().slideToggle();});});
</script>
七、淡入淡出效果
1、淡入效果语法
fadeIn([speed,[easing],[fn]])
淡入效果参数
(1)参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串(“slow”,“normal”,or"fast”)或表示动画时长的毫秒数值(如
∶1000)。
( 3 ) easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。.
( 4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
2、淡出效果语法
fadeout([speed,[easing],[fn]])
3、淡入淡出切换效果语法
fadeToggle([speed, [easing],[fn]])
4、渐进方式调整到指定的不透明度
fadeTo ([[speed],opacity,[easing],[fn]])
2.效果参数
( 1 ) opacity透明度必须写,取值0~1之间。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal" ,or“fast”)或表示动画时长的毫秒数值(如∶1000)。必须写
( 3 ) easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
( 4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
示例:
<style>div{width: 100px;height: 100px;background-color: aquamarine;display: none;}</style></head><body><button>淡入</button><button>淡出</button><button>淡入淡出</button><button>修改不透明度</button><div></div><script>$(function(){$("button").eq(0).click(function(){$("div").fadeIn(1000);})$("button").eq(1).click(function(){$("div").fadeOut(1000);})$("button").eq(2).click(function(){$("div").fadeToggle(1000);})//透明度必须要写$("button").eq(3).click(function(){$("div").fadeTo(1000,0.5);});});</script>
</body>
八、自定义动画animate
语法:
animate(params, [speed],[easing],[fn])
参数
( 1 ) params:想要更改的样式属性,要以对象的形式传递,必须写。属性名可以不用带引号,如果
是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如
∶1000)。
( 3 ) easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
( 4 ) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
示例:
<style>div{//盒子定位position: absolute;width: 100px;height: 100px;background-color: aquamarine;}</style></head><body><button>动起来</button><div></div><script>$(function(){$("button").click(function(){$("div").animate({left: 300,top: 200,opacity: 0.4,width: 200,height: 200},500);});});</script></body>
jQuery操作css方法相关推荐
- jQuery 样式操作||操作 css 方法/设置类样式方法
操作 css 方法 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- jQuery操作CSS常见问题
1.jquery操作css !important无效 解决: 这种写法:$('#oDiv').css({"width":"100px", "color ...
- 【jQuery学习】—jQuery操作CSS和表格
[jQuery学习]-jQuery操作CSS和表格 一.jQuery操作CSS 二.jQuery操作表格
- css()用法,jQuery的css()方法用法实例
本文实例讲述了jQuery的css()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置匹配元素的一个或多个样式属性. 语法结构: 语法一: 取得指定样式属性的属性值.以样式属性名称作为 ...
- jQuery:css方法 动态更改标签css样式
hello,大家好,我是wanzirui32,今天我们来学习如何使用jQuery的css方法,动态更改标签css样式. 开始学习吧! 学习目录 读取标签的css样式 设置标签的css样式 给标签设置多 ...
- jQuery CSS 操作 - css() 方法
实例 设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...
- Jquery中css()方法获取边框长度
1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...
- jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...
- jQuery操作css样式、属性、动画、节点
css样式操作: 1.设置单个样式: css(name, value) 2.设置多个样式:css(obj) 3.获取样式:css(name) <!DOCTYPE html> <htm ...
最新文章
- 【windows】编译安装ninja
- ant的if-else
- 关于快速开发和设计应用系统的一些个人的意见
- php oop 效率,浅谈PHP的oop
- UVA 216 - Getting in Line
- 以修改注册表的方式避免ACK确认机制带来的延时现象
- 20180513 实参 形参 数组
- springboot的Interceptor、Filter、Listener及注册
- 黑php的称呼,“黑”起母校都是把好手!这些高校别称你绝对想不到
- vmware7序列号
- 官方win10安装教程,win10系统一键安装方法
- 逆腹式呼吸-用气发力气先行
- LeetCode刷题日记:LCP 03.机器人大冒险
- AC自动机+状压dp hdu2825 Wireless Password
- 【Hadoop快速入门】Hdfs、MapReduce、Yarn
- oracle 通信通道异常,(oracle)ORA-03113: 通信通道的文件结尾错误处理
- windows 7 优化快速设置参考(实测好用)
- 液晶弹性自由能计算_液晶材料预倾角与弹性常量的关系
- 【无线串口模块应用实例】防小人不防君子的智慧安防监测系统
- 用java定义三维空间的点