今天学得不是很多。
早上看了点设计模式中的简单模式，但也只是熟悉了一下。看得也不仔细，现在想要描述出他的好处，用法，实现的方法。脑子模糊掉了。早上起来，脑袋浆糊了。
在实验室里，老师讲了重新做了的三层架构和json。叫我们以这个为基础，做出一个小项目，要求有调用数据库，前端用html，css，jquery等知识，有用到ajax，json的知识点，以三层架构为基础。
看了锋利的jquery，敲了其中的两个案例，觉得很好玩，很方便。其中的一些效果，只需要一个简单的知识点，就可以造出好玩的效果。不错呀。
关于显示全部标签和部分标签的效果例子如下：
<!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=gb2312" /> <title>无标题文档</title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //从第5条开始隐藏后面的li，最后一个li除外 var $category=$("ul li:gt(5):not(:last)"); $category.hide(); //点击show all时执行全部显示操作，并把文本改为show some,并高亮推荐的li var $toggleBtn=$("div.showmore >a"); $toggleBtn.click(function(){ if($category.is(":visible")){ $category.hide(); $(".showmore a span").text("show all"); $("ul li").filter(":contains('bb'),:contains('cc'),:contains('dd')").removeClass("promoted"); }else{ $category.show(); $(".showmore a span").text("show some"); $("ul li").filter(":contains('bb'),:contains('cc'),:contains('dd')").addClass("promoted"); } return false; //超链接不跳转 }); }); </script> <style type="text/css"> .Box{ width:400px; height:250px; margin:0 auto; text-align:center; border:#CC3300 double; background-color:#FFCC00; } .Box ul{ list-style-type:none; } .Box ul li{ float:left; margin:10px 20px 10px 20px; } .showmore{ width:80px; height:25px; border:double red thin; background-color:#FF6633; } .showmore a{ text-decoration:none; } .div1{ margin:0 auto; width:400px; } .promoted{ color:#0000CC; background-color:#009900; } </style> </head> <body> <div class="Box"> <ul> <li><a href="#">aaa</a><i>(111)</i></li> <li><a href="#">bb</a><i>(112)</i></li> <li><a href="#">aaa</a><i>(113)</i></li> <li><a href="#">cc</a><i>(114)</i></li> <li><a href="#">aaa</a><i>(115)</i></li> <li><a href="#">aaa</a><i>(116)</i></li> <li><a href="#">aaa</a><i>(117)</i></li> <li><a href="#">aaa</a><i>(118)</i></li> <li><a href="#">aaa</a><i>(119)</i></li> <li><a href="#">aaa</a><i>(120)</i></li> <li><a href="#">aaa</a><i>(121)</i></li> <li><a href="#">dd</a><i>(122)</i></li> <li><a href="#">aaa</a><i>(123)</i></li> <li><a href="#">aaa</a><i>(124)</i></li> <li><a href="#">other</a><i>(125)</i></li> </ul> <br/> <br/> <div class="div1"> <div class="showmore"> <a href="more.html"><span>show all</span></a> </div> </div> </div> </body> </html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦