学习日记—CSS样式的操作
2020-06-05 本文已影响0人
叫子非鱼啊
1 斑马线效果实现
最初的想法是要实现这种效果，获取总共的行数，然后if-else去判断所在位置，然后赋予相应的css样式，实现背景颜色的不同(对于前端半路子出身的我还真就这样干了)。
后来渐渐的发现,jquery有相应的选择器可以实现这样的效果，一行代码就可以顶的上我的好几行判断。
- $(selector:odd) 满足选择器条件的奇数元素
- $(selector:even) 满足选择器条件的偶数元素
因为是基零的，所以第一排的下标其实是0(是偶数)
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color","lightgray");
});
</script>
<table>
<tr>
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr>
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr>
<td>3</td>
<td>annie</td>
<td>380</td>
<td>78</td>
</tr>
<tr>
<td>4</td>
<td>lessin</td>
<td>410</td>
<td>69</td>
</tr>
</table>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:500;
}
table tr{
width:120px;
height:50px;
}
table td{
border-bottom:1px solid #ddd;
padding-bottom:5px;
padding-top:5px;
text-align:center;
width: 461px;
}
</style>
</html>
不得不说这是真的香，对于开发来说，需求一下来，怎么设计，如何实现，前端 、后端一把抓的的我来说也只能不断的去看教程，渐渐的学会用最简单的方式解决问题了。
也许这就是既当爹又当妈的苦。
2 切换效果
显示 隐藏 切换 算是常用的了
show
hide
toggle
向上滑动 向下滑动 滑动切换
slideUp
slideDown
slideToggle
淡入 淡出 淡入淡出切换 指定淡入程度
fadeIn
fadeOut
fadeToggle
fadeTo
使用方式类似
$("#b1").click(function(){
div.slideUp(); //可以填入参数控制持续时间 ms
});
