为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 6月30号的第三天

6月30号的第三天

2018.09.09 18:04 677浏览

今天学得不是很多。

早上看了点设计模式中的简单模式,但也只是熟悉了一下。看得也不仔细,现在想要描述出他的好处,用法,实现的方法。脑子模糊掉了。早上起来,脑袋浆糊了。

在实验室里,老师讲了重新做了的三层架构和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>

 

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
30
获赞与收藏
118

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消