jQuery--选择器案例实战
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 ...
随机推荐
- SpringBoot实现QQ邮件发送
建项目 创建一个SpringBoot项目 改pom,导入相关依赖 org.springframework.boot spring-boot-starter-parent 2.2.2.RELEASE & ...
- 『德不孤』Pytest框架 — 4、Pytest跳过测试用例
目录 1.无条件跳过skip 2.有条件跳过skipif 3.练习 自动化测试执行过程中,我们常常出现这种情况:因为功能阻塞,未实现或者环境有问题等等原因,一些用例执行不了, 如果我们注释掉或删除掉这 ...
- 三种移除list中的元素(可靠)
/** * 直接使用foreach方法移除list中的元素会抛异常 * Exception in thread "main" java.util.ConcurrentModific ...
- 【笔试必备】常见sql笔试题（30题）
sql是测试从业者必备的技能之一,基本上也是笔试必考内容. 所以,不要让sql拖了后腿,有些测友一遇到多表关联查询就犯晕,甚至连单表的执行顺序都没搞懂,下面简单介绍下,顺便给一些题供大家练习. 单表执 ...
- 国内主流大数据厂商太多不知道怎么选？Smartbi满足你的需求
目前的BI市场上有很多大数据的厂商,这也让许多客户眼花缭乱,不知如何下手.比如国内的亿信华辰跟国外的Tableau,QLK, PowerBI 都有非常多便于分析的可视化工具,但是在数据处理分析的功能 ...
- github push时提示Username for 'https://github.com' 解决办法
问题 github push时在输入账号密码后仍提示:Username for 'https://github.com',需要进一步输入账号密码. 解决方案 注意这里的账号密码并不是github的登录 ...
- 如何在win10系统上安装linux子系统
对于软件开发人员来说,linux基本上是一个绕不过去的槛. 因为工作经常要用到linux,电脑用纯linux还是windows + 虚拟机装linux,我一直纠结. 如果装个纯linux,则一些win ...
- SPYEYE手机远程监控和官方SPYEYE间谍软件最新下载方式
听起来远程控制手机好像很高级的样子,但是实现起来其实非常简单.实现原理如下: 运行程序,让程序不停地读取数据 用手机给手机发送邮件 判断是否读取到指定主题的手机,如果有,则获取手机内容 根据邮件内容, ...
- Go之Logrus用法入门
Go之Logrus用法入门 Logrus是Go (golang)的结构化日志程序,完全兼容标准库的API日志程序. Logrus is a structured logger for Go (gola ...
- 微服务入门三：SpringCloud Alibaba
一.什么是SpringCloud Alibaba 1.简介 1)简介 阿里云未分布式应用开发提供了一站式解决方案.它包含了开发分布式应用程序所需的所有组件,使您可以轻松地使用springcloud开发 ...