jquery 学习笔记二 隐藏与显示
css找到元素后是添加样式，而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=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<style type="text/css">
.subtn{}
ul{ list-style:none; width:500px; margin:auto}
ul li{ float:left; margin:0 20px 0 20px; width:120px; text-align:center;}
.clear{ clear:both}
.morebtn{ width:500px; text-align:center; height:50px; line-height:50px; margin:auto}
.promoted{ color:blue;}
</style>
<script type="text/javascript">
$(function(){
var $subtn=$('ul li:gt(5):not(:last)');
$subtn.hide();
var $morebtn=$('.morebtn a');
$morebtn.click(function(){
if($subtn.is(":visible")){
$('.morebtn a span').css('color','red').text('显示全部品牌');
$('ul li').removeClass("promoted");
$subtn.hide();
}
else{
$('.morebtn a span').css('color','red').text('精简显示品牌');
$('ul li').filter(":contains('佳能3'),:contains('佳能4'),:contains('佳能6'),:contains('佳能8')").addClass("promoted");
$subtn.show();
}
return false;
});
});
</script>
<body>
<div class="subtn">
<ul>
<li><a href="#">佳能1</a><i>300301</i></li>
<li><a href="#">佳能2</a><i>300302</i></li>
<li><a href="#">佳能3</a><i>300303</i></li>
<li><a href="#">佳能4</a><i>300304</i></li>
<li><a href="#">佳能5</a><i>300305</i></li>
<li><a href="#">佳能6</a><i>300306</i></li>
<li><a href="#">佳能7</a><i>300307</i></li>
<li><a href="#">佳能8</a><i>300308</i></li>
<li><a href="#">佳能9</a><i>300309</i></li>
<li><a href="#">佳能10</a><i>3003010</i></li>
<li><a href="#">佳能11</a><i>3003011</i></li>
<li><a href="#">佳能12</a><i>3003012</i></li>
<li><a href="#">佳能13</a><i>3003013</i></li>
<li><a href="#">佳能14</a><i>3003014</i></li>
<li><a href="#">佳能15</a><i>3003015</i></li>
<li><a href="#">佳能16</a><i>3003016</i></li>
</ul>
</div>
<div class="clear"></div>
<div class="morebtn">
<a href="#"><span>显示全部品牌</span></a>
</div>
</body>
</html>
jquery 学习笔记二 隐藏与显示的更多相关文章
- jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery学习笔记二
事件监听者是DOM的一部分,任何页面都可以增加事件监听者.浏览器利用事件监听者监视页面上做了什么,然后告诉Javascript解释器是否需要采取行动.如:$('#showMessage').click ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery学习笔记之概念（1）
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- 初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
随机推荐
- 前端中的SEO
前端中的SEO: mate.title META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). <Meta name="Keywords" ...
- View的滑动冲突
一.常见的滑动冲突 场景1:外部滑动和内部滑动不一致 场景2:外部滑动和内部滑动一致 场景3:上面两种情况的嵌套 二.滑动冲突的处理方法 场景一:根据水平滑动还是竖直滑动判断到底由谁来拦截事件. 场景 ...
- PHP5的类与对象
类是一个由变量和方法组成的独立程序块或功能模块. 人类: 口,脚,身高,体重,姓名,肤色等 (变量) 说话,行走等(方法) 丁三石,马化树,张夕阳(具体对象) 类的定义和对象的创建
- 从头开发MUDLIB
跟Akuma一起从头打造mudlib--[第一讲] 第一讲:让它跑起来注:每一讲我都会上传一个相符的lib,有些文件是旧的,有些是新的,我尽可能在lib里写清楚注释.更详细的内容则在每讲的正文里写. ...
- Asp.net身份认证记录
基础知识 身份标识在客户端主要是两个存储位置: cookie 常用 url 很少用 url作为cookie禁用的备选方案 form 几乎不用 很麻烦,每次请求都必须是form提交方式 authoriz ...
- AppClassLoader和WebAppClasssLoader的坑
最近,打算学习一下spring mvc,为后续做一些积累. 搭建spring+mybatis,动态创建mapper,mapper的文件名称和类在一个目录,但是我之前犯个 错误,大小写写错了,结果我用普 ...
- 凯恩斯主义VS货币主义
Milton Friedman在1960年代后期以及整个1970年代,到处不知疲倦地像传教士一般地宣讲他的货币主义.当时,美联储成员几乎清一色地是凯恩斯主义者.你可以想像Friedman的对手是多么强 ...
- InputStream读取文件到string后OutputStream到文件,按String和Bytes拷贝
http://www.iteye.com/problems/72150 写了一段代码 大体是 InputStream读取文件到string后OutputStream到文件 遇到的问题为TXT文件大小格 ...
- java中memcached
http://www.oschina.net/code/snippet_250396_9181
- Java实现验证码图片
这样的实现方式对JDK版本有要求. 1 package edu.cloud.editmap.utils; import java.awt.Color; import java.awt.Font; im ...