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. Hadoop 安装 （4） SSH无密码验证配置

    验证SSH 和 RSYNC 已经安装好了 Master 生成密码对以及对于 Slave 的无密码登录. 见:http://www.cnblogs.com/xia520pi/archive/2012/0 ...

  2. 移动端影像解决方案Adobe Creative SDK for ios

    移动端影像解决方案Adobe Creative SDK for ios 2015-12-20 分类:整理 阅读(390) 评论(0)  老牌影像界泰斗不甘落寞,正式推出了Adobe Creative ...

  3. shell 学习

    将maven 项目里面的jar 包导出目录: 在项目里面执行: mvn dependency:copy-dependencies -DoutputDirectory=lib shell 参数之间必有空 ...

  4. Android Studio 项目目录结构 英文版

    I don't know if this is because of the Gradle Build System (I'd wager it is), but I'll tell you what ...

  5. Git教程--Git分支管理

    分支管理--原理分析 在前面讲到的版本回退里,每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.只有一条时间线的这条分支称为master,HEAD严格来说不是指向提交,而是指向maste ...

  6. PHP的五种常见设计模式

    工厂模式 最初在设计模式 一书中,许多设计模式都鼓励使用松散耦合.要理解这个概念,让我们最好谈一下许多开发人员从事大型系统的艰苦历程.在更改一个代码片段时,就会发生问题,系统其他部分 —— 您曾认为完 ...

  7. 基于jQuery的前端如何做到无伤迁移

    首先,解释一下我个人对前端无伤迁移的理解,即移动端和PC端使用同一套代码,或者说原本在PC端运行得很完美的代码,只要修改少许,就可以在移动端完美运行. 当然,大部分的公司会专门为移动端设计了一套,同时 ...

  8. Manifest merger failed : uses-sdk:minSdkVersion 9 cannot be smaller than version 10 declared in library

    Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger failed : uses-sdk: ...

  9. poj中一些对我来说不错的东西（每天不同的加入，要保持）

    1.关于深度搜索与暴力结合的棋盘翻转问题 poj1753::2965:: 2.贪心算法:2109,2586: 3.韩信点兵问题:poj1006

  10. lex 和 yacc 的区别与联系

    lex负责词法解析,而yacc负责语法解析,其实说白了就是lex负责根据指定的正则表达式,将输入的字符串匹配成一个一个的token,同时允许用户将当前匹配到的字符串进行处理,并且允许返回一个标识当前t ...