2023.3.2 JQuery CSS 样式操作与jQuery 动画
CSS 样式操作
-
addClass() 添加样式
-
removeClass() 删除样式
-
toggleClass() 有就删除，没有就添加样式。
-
offset() 获取和设置元素的坐标。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 8 div{ 9 width:100px; 10 height:260px; 11 } 12 13 div.border{ 14 border: 2px white solid; 15 } 16 17 /*div.redDiv{} div为限制 .redDiv为class选择器 红色背景*/ 18 div.redDiv{ 19 background-color: red; 20 } 21 /*蓝色边框*/ 22 div.blackDiv{ 23 border: 5px blue solid; 24 } 25 </style> 26 27 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 28 <script type="text/javascript"> 29 30 $(function(){ 31 /* 32 CSS 33 css(name|pro|[,val|fn]) 读写匹配元素的样式属性。 34 a.css('color')取出a元素的color 35 a.css('color',"red")设置a元素的color为red 36 CSS 类 37 addClass(class|fn) 为元素添加一个class值;<div class="mini big"> 38 removeClass([class|fn]) 删除元素的class值；传递一个具体的class值，就会删除具体的某个class 39 a.removeClass()：移除所有的class值 40 **/ 41 var $divEle = $('div:first'); 42 43 $('#btn01').click(function(){ 44 //addClass() - 向被选元素添加一个或多个类 45 $divEle.addClass("redDiv blackDiv"); //添加了两个类选择器的样式 46 }); 47 48 $('#btn02').click(function(){ 49 //removeClass() - 从被选元素删除一个或多个类 50 $divEle.removeClass("redDiv");//$divEle.removeClass();这个是全部删除 51 }); 52 53 54 $('#btn03').click(function(){ 55 //toggleClass() - 对被选元素进行添加/删除类的切换操作 56 //如果具有该类(样式)那么删除，如果没有那么添加 57 $divEle.toggleClass("redDiv"); 58 }); 59 60 $('#btn04').click(function(){ 61 //offset() - 返回第一个匹配元素相对于文档的位置。 按照当前页面大小计算，缩放会改变值 62 var os = $divEle.offset(); 63 //注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距 64 alert("顶边距："+os.top+" 左边距："+os.left); 65 66 //调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left 67 //offset({ top: 10, left: 30 }); 68 $divEle.offset({ 69 top:50, 70 left:60 71 }); 72 }); 73 74 }) 75 </script> 76 </head> 77 <body> 78 79 <table align="center"> 80 <tr> 81 82 <td> 83 <div class="border"> 84 </div> 85 </td> 86 87 <td> 88 <div class="btn"> 89 <input type="button" value="addClass()" id="btn01"/> 90 <input type="button" value="removeClass()" id="btn02"/> 91 <input type="button" value="toggleClass()" id="btn03"/> 92 <input type="button" value="offset()" id="btn04"/> 93 </div> 94 </td> 95 </tr> 96 </table> 97 <br /> <br /> 98 <br /> <br /> 99 </body> 100 </html>
jQuery 动画
基本动画
-
show() 将隐藏的元素显示
-
hide() 将可见的元素隐藏
-
toggle() 可见就隐藏，不可见就显示。
淡入淡出动画
-
fadeIn() 淡入（慢慢可见）
-
fadeOut() 淡出（慢慢消失）
-
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
-
fadeToggle() 淡入/淡出 切换
以上动画方法都可以添加参数。
-
第一个参数是动画执行的时长，以毫秒为单位
-
第二个参数是动画的回调函数 (动画完成后自动调用的函数)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 <link href="css/style.css" type="text/css" rel="stylesheet" /> 7 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 8 9 <script type="text/javascript"> 10 $(function(){ 11 //显示 show() 对隐藏的元素有效 12 $("#btn1").click(function(){ 13 $("#div1").show(1000,function () { 14 alert("show动画回调函数") 15 });//有两个参数,可以不写参数(不写表示立即执行) 16 }); 17 //隐藏 hide() 对可见的有效 18 $("#btn2").click(function(){ 19 $("#div1").hide(1000); 20 }); 21 //切换 toggle() 22 $("#btn3").click(function(){ 23 $("#div1").toggle(1000); 24 }); 25 26 //形成动画的操作 27 $("#btn8").click(function(){ 28 $("#div1").toggle(1000,donghua); 29 }); 30 var donghua = function () { 31 $("#div1").toggle(1000,donghua); 32 } 33 34 35 //淡入 fadeIn() 36 $("#btn4").click(function(){ 37 $("#div1").fadeIn(500); 38 }); 39 //淡出 fadeOut() 40 $("#btn5").click(function(){ 41 $("#div1").fadeOut(500); 42 }); 43 44 //淡化到 fadeTo() 与其它的不同 有多个参数 45 $("#btn6").click(function(){ 46 $("#div1").fadeTo(2000,0.5,function () { 47 alert("fadeTo完成") 48 });//speed速度 to到达的透明度 49 }); 50 //淡化切换 fadeToggle() 51 $("#btn7").click(function(){ 52 $("#div1").fadeToggle(1000); 53 }); 54 }) 55 </script> 56 57 </head> 58 <body> 59 <table style="float: left;"> 60 <tr> 61 <td><button id="btn1">显示show()</button></td> 62 </tr> 63 <tr> 64 <td><button id="btn2">隐藏hide()</button></td> 65 </tr> 66 <tr> 67 <td><button id="btn3">显示/隐藏切换 toggle()</button></td> 68 </tr> 69 <tr> 70 <td><button id="btn4">淡入fadeIn()</button></td> 71 </tr> 72 <tr> 73 <td><button id="btn5">淡出fadeOut()</button></td> 74 </tr> 75 <tr> 76 <td><button id="btn6">淡化到fadeTo()</button></td> 77 </tr> 78 <tr> 79 <td><button id="btn7">淡化切换fadeToggle()</button></td> 80 </tr> 81 <tr> 82 <td><button id="btn8">动画</button></td> 83 </tr> 84 </table> 85 86 <div id="div1" style="float:left;border: 1px solid;width: 300px;height: 200px;"> 87 jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果 88 </div> 89 </body> 90 91 </html>
练习品牌展示 需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>品牌展示练习</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 body { 13 font-size: 12px; 14 text-align: center; 15 } 16 17 a { 18 color: #04D; 19 text-decoration: none; 20 } 21 22 a:hover { 23 color: #F50; 24 text-decoration: underline; 25 } 26 27 .SubCategoryBox { 28 width: 600px; 29 margin: 0 auto; 30 text-align: center; 31 margin-top: 40px; 32 } 33 34 .SubCategoryBox ul { 35 list-style: none; 36 } 37 38 //后代选择器 39 .SubCategoryBox ul li { 40 display: block; 41 float: left; 42 width: 200px; 43 line-height: 20px; 44 } 45 46 .showmore , .showless{ 47 clear: both; 48 text-align: center; 49 padding-top: 10px; 50 } 51 52 .showmore a , .showless a{ 53 display: block; 54 width: 120px; 55 margin: 0 auto; 56 line-height: 24px; 57 border: 1px solid #AAA; 58 } 59 60 /*向下的箭头图片*/ 61 .showmore a span { 62 padding-left: 15px; 63 background: url(img/down.gif) no-repeat 0 0; 64 } 65 66 /*向上的箭头图片*/ 67 .showless a span { 68 padding-left: 15px; 69 background: url(img/up.gif) no-repeat 0 0; 70 } 71 72 .promoted a { 73 color: #F50; 74 } 75 </style> 76 <script type="text/javascript" src="script/jquery-1.7.2.js"></script> 77 <script type="text/javascript"> 78 $(function() { 79 // 基本初始状态 80 $("li:gt(5):not(:last)").hide();//隐藏无序列表中大于索引5的但是不包括最后一个 81 82 // 给功能的按钮绑定单击事件 类选择器.showmore 下的a标签 83 $(".showmore a").click(function () { 84 // 让某些品牌，显示，或隐藏 85 $("li:gt(5):not(:last)").toggle(); 86 87 // 判断 品牌，当前是否可见 88 if( $("li:gt(5):not(:last)").is(":hidden") ){ 89 // 品牌隐藏的状态 ：1 显示全部品牌 == 角标向下 showmore 90 $("div div a span").text("显示全部品牌"); 91 92 $("div div").removeClass();//移除样式 93 $("div div").addClass("showmore");//添加展示的样式 94 95 // 去掉高亮 96 $("li:contains('索尼')").removeClass("promoted"); 97 98 } else { 99 // 品牌可见的状态：2 显示精简品牌 == 角标向上 showless 100 $("div div a span").text("显示精简品牌"); 101 102 $("div div").removeClass(); 103 $("div div").addClass("showless");//添加收回的样式 104 105 // 加高亮 106 $("li:contains('索尼')").addClass("promoted"); 107 } 108 109 return false; 110 }); 111 }); 112 </script> 113 </head> 114 <body> 115 <div class="SubCategoryBox"> 116 <ul> 117 <li><a href="#">佳能</a><i>(30440) </i></li> 118 <li><a href="#">索尼</a><i>(27220) </i></li> 119 <li><a href="#">三星</a><i>(20808) </i></li> 120 <li><a href="#">尼康</a><i>(17821) </i></li> 121 <li><a href="#">松下</a><i>(12289) </i></li> 122 <li><a href="#">卡西欧</a><i>(8242) </i></li> 123 <li><a href="#">富士</a><i>(14894) </i></li> 124 <li><a href="#">柯达</a><i>(9520) </i></li> 125 <li><a href="#">宾得</a><i>(2195) </i></li> 126 <li><a href="#">理光</a><i>(4114) </i></li> 127 <li><a href="#">奥林巴斯</a><i>(12205) </i></li> 128 <li><a href="#">明基</a><i>(1466) </i></li> 129 <li><a href="#">爱国者</a><i>(3091) </i></li> 130 <li><a href="#">其它品牌相机</a><i>(7275) </i></li> 131 </ul> 132 <div class="showmore"> 133 <a href="more.html"><span>显示全部品牌</span></a> 134 </div> 135 </div> 136 </body> 137 </html>