標籤：3.1.1 單位 技術分享 logs content 索尼 pac width city
JQuery的CSS_DOM與樣式操作
樣式：
擷取 class 和設定 class : class 是元素的一個屬性, 所以擷取 class 和設定 class 都可以使用 attr() 方法來完成.
追加樣式: addClass() 移除樣式: removeClass() --- 從匹配的元素中刪除全部或指定的 class
轉場樣式: toggleClass() --- 控制樣式上的重複切換.如果類名存在則刪除它, 如果類名不存在則添加它.
判斷是否含有某個樣式: hasClass() --- 判斷元素中是否含有某個 class, 如果有, 則返回 true; 否則返回 false
CSS_DOM操作
擷取和設定元素的樣式屬性: css()
擷取和設定元素透明度: opacity 屬性
擷取和設定元素高度, 寬度: height(), width(). 在設定值時, 若只傳遞數字, 則預設單位是 px. 如需要使用其他單位則需傳遞一個字串, 例如 $(“p:first”).height(“2em”);
擷取元素在當前視窗中的相對位移: offset(). 其返回對象包含了兩個屬性: top, left. 該方法只對可見元素有效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> *{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { color:#F50; text-decoration:underline;} .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} .SubCategoryBox ul { list-style:none;} .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} .showmore { clear:both; text-align:center;padding-top:10px;} .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} .promoted a { color:#F50;} </style> <script type="text/javascript" src="../jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(function(){ //測試 jQuery 樣式相關的方法. //1. hasClass(): 某元素是否有指定的樣式 var bool = $("div:first").hasClass("SubCategoryBox"); //alert(bool); //2. 移除樣式 var bool2 = $("div:first").removeClass("SubCategoryBox"); alert(bool2); //3. 添加樣式 $("div:first").addClass("SubCategoryBox"); //4. 轉場樣式: 存在, 則去除; 沒有, 則添加. $(".showmore").click(function(){ $("div:first").toggleClass("SubCategoryBox"); //取消預設行為 return false; }); //5. 擷取和設定元素透明度: opacity 屬性 var $css = $("div:first").css("opacity"); alert($css); $("div:first").css("opacity",0.5); //6. width 和 height alert($("div:first").width()); alert($("div:first").width(300)); //7. 擷取元素在當前視窗中的相對位移: offset(). //其返回對象包含了兩個屬性: top, left. 該方法只對可見元素有效 var top = $("div:first").offset().top; var left = $("div:first").offset().left; alert(top); alert(left); }); </script> </head> <body> <div class="SubCategoryBox"> <ul> <li ><a href="#">佳能</a><i>(30440) </i></li> <li ><a href="#">索尼</a><i>(27220) </i></li> <li ><a href="#">三星</a><i>(20808) </i></li> <li ><a href="#">尼康</a><i>(17821) </i></li> <li ><a href="#">松下</a><i>(12289) </i></li> <li ><a href="#">卡西歐</a><i>(8242) </i></li> <li ><a href="#">富士</a><i>(14894) </i></li> <li ><a href="#">柯達</a><i>(9520) </i></li> <li ><a href="#">賓得</a><i>(2195) </i></li> <li ><a href="#">理光</a><i>(4114) </i></li> <li ><a href="#">奧林巴斯</a><i>(12205) </i></li> <li ><a href="#">明基</a><i>(1466) </i></li> <li ><a href="#">愛國者</a><i>(3091) </i></li> <li ><a href="#">其它品牌相機</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="more.html"><span>顯示全部品牌</span></a> </div> </div> </body></html>View Code
JQuery第三天——大綱待更新
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
