JQuery学习笔记-JQuery的CSS DOM操作

2025-02-17 技术教程

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="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:0auto;text-align:center;margin-top:40px;}.SubCategoryBoxul{list-style:none;}.SubCategoryBoxulli{display:block;float:left;width:200px;line-height:20px;}.showmore{clear:both;text-align:center;padding-top:10px;}.showmorea{display:block;width:120px;margin:0auto;line-height:24px;border:1pxsolid#AAA;}.showmoreaspan{padding-left:15px;background:url(img/down.gif)no-repeat00;}.promoteda{color:#F50;}</style><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){//测试jQuery样式相关的方法.//1.hasClass():某元素是否有指定的样式alert($("div:first").hasClass("SubCategoryBox"));//true//2.移除样式$("div:first").removeClass("SubCategoryBox");alert($("div:first").hasClass("SubCategoryBox"));//3.添加样式$("div:first").addClass("SubCategoryBox");//4.切换样式:存在,则去除;没有,则添加.$(".showmore").click(function(){$("div:first").toggleClass("SubCategoryBox");returnfalse;});//5.获取和设置元素透明度:opacity属性alert($("div:first").css("opacity"));$("div:first").css("opacity",0.5);//6.width和heightalert($("div:first").width());alert($("div:first").height());$("div:first").width(400);$("div:first").height(80);//7.获取元素在当前视窗中的相对位移:offset().//其返回对象包含了两个属性:top,left.该方法只对可见元素有效alert($("div:first").offset().top);alert($("div:first").offset().left);});</script></head><body><divclass="SubCategoryBox"><ul><li><ahref="#">佳能</a>(30440)</li><li><ahref="#">索尼</a>(27220)</li><li><ahref="#">三星</a>(20808)</li><li><ahref="#">尼康</a>(17821)</li><li><ahref="#">松下</a>(12289)</li><li><ahref="#">卡西欧</a>(8242)</li><li><ahref="#">富士</a>(14894)</li><li><ahref="#">柯达</a>(9520)</li><li><ahref="#">宾得</a>(2195)</li><li><ahref="#">理光</a>(4114)</li><li><ahref="#">奥林巴斯</a>(12205)</li><li><ahref="#">明基</a>(1466)</li><li><ahref="#">爱国者</a>(3091)</li><li><ahref="#">其它品牌相机</a>(7275)</li></ul><divclass="showmore"><ahref="more.html">显示全部品牌</a></div></div></body></html>

实现上面的按钮的事件

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="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:0auto;text-align:center;margin-top:40px;}.SubCategoryBoxul{list-style:none;}.SubCategoryBoxulli{display:block;float:left;width:200px;line-height:20px;}.showmore{clear:both;text-align:center;padding-top:10px;}.showmorea{display:block;width:120px;margin:0auto;line-height:24px;border:1pxsolid#AAA;}.showmoreaspan{padding-left:15px;background:url(img/down.gif)no-repeat00;}.promoteda{color:#F50;}</style><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">$(function(){var$categary=$("li:gt(5):not(:last)");$categary.hide();$(".showmore").click(function(){if($categary.is(":hidden")){$categary.show();//改变样式$("li:contains('佳能'),li:contains('尼康')").addClass("promoted");//设置文字$(".showmore>a>span").text("显示精简品牌");//设置图片$(".showmore>a>span").css("bakground","url(img/up.gif)no-repeat00");}else{$categary.hide();$("li").removeClass("promoted");$(".showmore>a>span").text("全部品牌");$(".showmore>a>span").css("bakground","url(img/down.gif)no-repeat00");}returnfalse;});});</script></head><body><divclass="SubCategoryBox"><ul><li><ahref="#">佳能</a>(30440)</li><li><ahref="#">索尼</a>(27220)</li><li><ahref="#">三星</a>(20808)</li><li><ahref="#">尼康</a>(17821)</li><li><ahref="#">松下</a>(12289)</li><li><ahref="#">卡西欧</a>(8242)</li><li><ahref="#">富士</a>(14894)</li><li><ahref="#">柯达</a>(9520)</li><li><ahref="#">宾得</a>(2195)</li><li><ahref="#">理光</a>(4114)</li><li><ahref="#">奥林巴斯</a>(12205)</li><li><ahref="#">明基</a>(1466)</li><li><ahref="#">爱国者</a>(3091)</li><li><ahref="#">其它品牌相机</a>(7275)</li></ul><divclass="showmore"><ahref="more.html">显示全部品牌</a></div></div></body></html>

附件：http://down.51cto.com/data/2364961