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 学习笔记二 隐藏与显示的更多相关文章

  1. jquery学习笔记(二)：DOM元素操作

    内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...

  2. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  3. jQuery学习笔记二

    事件监听者是DOM的一部分,任何页面都可以增加事件监听者.浏览器利用事件监听者监视页面上做了什么,然后告诉Javascript解释器是否需要采取行动.如:$('#showMessage').click ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  6. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  7. jQuery学习笔记之概念（1）

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  8. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  9. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

随机推荐

  1. ThreadLocal 在web环境下使用的边界问题

    ThreadLocal 相关分析,请查看http://wangxinchun.iteye.com/blog/1884228 另外一个必须要提的点是: ThreadLocal在线程池环境下的使用. 比如 ...

  2. 样式布局分享-基于frozen.js的移动OA

    最近改造了公司移动OA的样式,改善了显示效果和用户体验,其中用到了腾讯的 frozen.js 框架,在此把布局代码分享给大家,希望大家可以用得上,具体效果如下图. Demo 百度网盘 下载地址 Git ...

  3. (转)js prototype 详解

    转载自:http://blog.csdn.net/chaojie2009/article/details/6719353(也是转载的.鄙视一下此人转载不著名出处.) 注意:必须带着怀疑的态度去看这篇文 ...

  4. UVA 1312 Cricket Field

    题意: 在w*h的坐标上给n个点, 然后求一个最大的矩形,使得这个矩形内(不包括边界)没有点,注意边界上是可以有点的. 分析: 把坐标离散化.通过两重循环求矩形的高,然后枚举,看是否能找到对应的矩形. ...

  5. IOS开发 统计XCODE 代码行数

    如果要统计ios开发代码,包括头文件的,终端命令进入项目目录下,命令如下 find . -name "*.m" -or -name "*.h" -or -nam ...

  6. 关于Apache+PHP+MySQL的安装

    除了在安装MySQL的时候花了三天的时间,也学习了如何看错误日志,如何看配置文件等, Apache+PHP的安装都比较顺利,主要是要按照一个文档来安装,不要东拼西凑, 个人认为这篇“百度经验”写得很好 ...

  7. 点击显示子菜单，离开隐藏子菜单（onmouseout下包含a标签的js解决方法）

    <div class="menu">     <a href="javascript:void(0);" id="a_all&quo ...

  8. SQL Server 数据库文件 4 点注意

    1.数据库被分解成逻辑页面,每页8K,在每一个文件中页面从 0 --> x 连续编号: 2.可以通过 [database_id]   [file_id]   [page_id] 的形式引用页面: ...

  9. UML－状态图，顺序图，活动图

    一.编写用例文档      1.用例的内容:   用例编号   用例名  执行者  前置条件  后置条件  基本路径  扩展路径  字段列表  业务规则                         ...

  10. linux 如何禁用账号和解除禁用账号

    把账号禁用可以有几个方法:1. # usermod -L <username> # usermod -U <username> // 解除禁用2. 修改/etc/passwd文 ...