1.案例需求

　　jquery最基础的选择器部分已经基本结束，来一个简单案例总结回顾下学的东西。

案例需求：

　　用一个按钮控制元素的显示与隐藏，页面如下，从第五个开始，不要最后一个，控制他们的显示和隐藏。

2.代码实现

方法一

 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>动态列表效果.html</title>

 6 <style type="text/css">

 7  *{ margin:0; padding:0;}

 8 body {font-size:12px;text-align:center;}

 9 a { color:#04D; text-decoration:none;}

10 a:hover { color:#F50; text-decoration:underline;}

11 .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}

12 .SubCategoryBox ul { list-style:none;}

13 .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}

14 .showmore { clear:both; text-align:center;padding-top:10px;}

15 .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}

16 .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}

17 .promoted a { color:#F50;}

18 </style>

19 <!-- 引入jQuery -->

20 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

21 <script type="text/javascript">

22     var flag = true;

23     $(function(){

24         $(".showmore a").click(function(){

25             if(flag){

26                 $("ul li").each(function(index){

27                     if(index >= 5 && 12 >= index) {

28                         $(this).attr("style","display:none;");

29                         $("span").html("显示全部品牌");

30                     }

31                 });

32                 flag = false;

33             } else {

34                 $("ul li").each(function(index){

35                     if(index >= 5 && 12 >= index) {

36                         $(this).attr("style","");

37                         $("span").html("隐藏全部品牌");

38                     }

39                 });

40                 flag = true;

41             }

42         });

43     });

44 </script>

45 </head>

46 <body>

47 <div class="SubCategoryBox">

48 <ul>

49 <li ><a href="#">佳能</a><i>(30440) </i></li>

50 <li ><a href="#">索尼</a><i>(27220) </i></li>

51 <li ><a href="#">三星</a><i>(20808) </i></li>

52 <li ><a href="#">尼康</a><i>(17821) </i></li>

53 <li ><a href="#">松下</a><i>(12289) </i></li>

54 <li ><a href="#">卡西欧</a><i>(8242) </i></li>

55 <li ><a href="#">富士</a><i>(14894) </i></li>

56 <li ><a href="#">柯达</a><i>(9520) </i></li>

57 <li ><a href="#">宾得</a><i>(2195) </i></li>

58 <li ><a href="#">理光</a><i>(4114) </i></li>

59 <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>

60 <li ><a href="#">明基</a><i>(1466) </i></li>

61 <li ><a href="#">爱国者</a><i>(3091) </i></li>

62 <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>

63 </ul>

64 <div class="showmore">

65 <a href="#"><span>隐藏全部品牌</span></a>

66 </div>

67 </div>

68 </body>

69 </html>

　　2.方法2

<!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>动态列表效果.html</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>

<!-- 引入jQuery -->

<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

<script type="text/javascript">

    var flag = true;

    $(function(){

        //获取第5个之后的且不包括之后一个的li

        var liArr = $("li:gt(4):not(:last)");

        //隐藏

        liArr.hide();

        $("span").click(function(){

            //状态切换

            liArr.toggle();

            //判断是否隐藏

            if(liArr.is(":hidden")){

                $(this).html("显示所有品牌");

            }else{

                $(this).html("隐藏所有品牌");

            }

        });

    });

</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="#"><span>显示全部品牌</span></a>

</div>

</div>

</body>

</html>

　　很明显，法二比法一简洁了不是一点点，主要是因为法二对jquery的方法和过滤器有了恰当的应用，所以说api真的省事很多，工作中如果总感觉自己code很慢，可能就是api

不能熟练使用的原因qaq。。

jQuery--选择器案例实战的更多相关文章

jquery选择器案例
一.预期效果实现一个效果,如下. 品牌列表默认精简显示,单击“显示全部品牌”按钮显示全部品牌,同时列表将推荐的品牌的名字高亮显示,按钮里的文字变成“精简显示品牌”.再次点击“精简显示品牌”回到初始页 ...
jQuery的案例及必知重要的jQuery选择器
Jquery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合 Jquery的优势体积小,压缩后只有100KB左右 l强大的选择器出 ...
JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例复选框,综合案例随机图片
知识点梳理课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具插件:PageHelper (j ...
《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单示例2-1 使用javascript实现隔行变色 < ...
jQuery选择器---基本选择器总结
今天要跟大家分享一下jQuery选择器的使用方法,它的选择器分为四大类如图: 基本选择器的使用: 1.id选择器案例: <div id="notMe"><p& ...
jQuery选择器---层次选择器总结
今天要分享的是jQuery层次选择器,层次选择器的分类如图: 接下来就开始了要不先养养眼精神一下: 开始1.祖先选择器: 案例: <form> <label>Name:< ...
jQuery选择器的优点
jQuery选择器的优点相信小伙伴们对选择器并不陌生,从css1到css3的选择器有很多,但是JQuery都能完美的支持,而且API操作起来也特别方便好用,在很大程度上精简了代码,节约了很多性能.那 ...
图解CSS3核心技术与案例实战（1）
前言: 我买了一本<图解CSS3核心技术与案例实战>大漠写的,为了提高自己的自觉性呢,抓紧看书,把读书笔记放在这上面,跟大家一起分享,也为督促自己完成读书计划. 文末有微信公众号,感谢你的 ...
Jquery 使用和Jquery选择器
jQuery中的顶级对象($) jQuery 中最常用的对象即 $ 对象,要想使用 jQuery 的方法必须通过 $ 对象.只有将普通的 Dom 对象封装成 jQuery 对象,然后才能调用 jQue ...

随机推荐

记一次慢查询优化sql
sql语句优化(慢查询日志) 最近,旧系统向新系统迁移工程刚刚结束.开发完成后,测试阶段也是好好休息了一把.接到一个需求,由于内部员工使用的网站部分功能加载时间很长,所以需要去优化系统的一些功能.大致 ...
python-利用json模块处理json数据几个函数总结
1.前言 json是一种轻量级的数据交换格式,它是JavaScript的子集,易于人阅读和编写. 前端和后端进行数据交互,其实就是JS和Python进行数据交互. 接口间或者前后端间的语言不一致,不同 ...
NSSCTF-finalrce
菜狗的我打开题目之后,人都给我吓傻了,直接过滤的超出了我的认知菜狗直接就枯了,这个题目其实是不难的,就是比较阴间的一个题目,审计代码,可以看到最后一行的代码"exec($url)&quo ...
记一次payload绕过电脑管家免杀
一.msf命令提示符下generate命令生成1.首先可以使用show payloads命令查看所有的payload,然后使用use命令选中其中一个. 2.使用generate -h查看命令帮助 ge ...
Python3对接华三CAS平台Api获取虚拟机监控信息-渐入佳境
--时间:2021年2月3日 --作者:飞翔的小胖猪说明使用python对接华三CAS虚拟化平台,通过厂商提供的api接口获取每个集群下所有虚拟机的监控信息,并保存数据在本地的mariadb数据库 ...
一步一步分析Gin框架路由源码及radix tree基数树
Gin 简介 Gin is a HTTP web framework written in Go (Golang). It features a Martini-like API with much ...
Qt：QUrl构造时的qrc前缀
参考(按对我帮助从大到小排列): Qt内的各种路径(让人迷惑) - 鬼谷子com - 博客园 qt webengineview 加载本地资源方式 - beautifulday - 博客园 (17条消息 ...
Python：Scrap爬虫过程中遇到的各种错误
1.KeyError: 'Spider not found: BDS' 原因:settings.py中缺少了几项与spider名字配置相关的项: BOT_NAME = 'BDS' SPIDER_MOD ...
c/c++ 日常积累
基类是抽象类,有(纯)虚函数,子类必须要把所有的都实现啊啊啊!!!!包括子类的析构,你写一个~xx类 = default;也好啊啊啊啊啊啊啊,不然报错!!!!啊啊啊啊啊流下了悔恨的泪水!!!... ...
一个更好用的.NET Core程序瘦身器，减小程序尺寸到1/3
一.为什么要开发.NET Core程序瘦身器? .NET Core具有[剪裁未使用的代码]的功能,但是由于它是使用静态分析来实现的,因此它的剪裁效果并不是最优的.它有如下两个缺点: 不支持Window ...

jQuery--选择器案例实战

1.案例需求

案例需求：

2.代码实现

jQuery--选择器案例实战的更多相关文章

随机推荐

热门专题