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. golang之pkg（包）

    一.概述 Golang拥有超过100个标准包(可用go list std |wc -l查看) 任何包系统设计的目的都是简化大型程序的设计和维护工作,通过将一组相关的特性放进一个独立的模块以便于理解和更 ...

  2. String常用方法总结

    字符串的截取: 1. slice(start,end) 返回一个新的字符串,不会改变原来引用值.end省略的时候,截取的是start到字符串结尾.传入start=0或者不传入start,就是复制了整个 ...

  3. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

  4. javascript模式——Prototype模式

    GoF权威的解释是,原型模式是一种通过对一个对象的克隆,创建基于这个对象的多种对象的模式. 为了实现这种原型模式,可以直接使用ECMAScript 5 中的方法Object.create.它不紧可以创 ...

  5. SQL Server AlwaysOn 故障转移

    目的: a) AlwaysOn 可用性组功能是一个提供替代数据库镜像的企业级方案的高可用性和灾难恢复解决方案. b) 当数据库服务器SQL1出现故障宕机时,可以通过AlwaysOn可用性组,自动故障转 ...

  6. ASP.NET 生命周期(原文翻译)

    在网上看到这篇文章,老外写的,里面很多图片挺精致,顺带翻译过来给大家分享下,英语太次好多地方都翻不过来 ASP.NET application and page life cycle Download ...

  7. javascript中数组方法小计

    一:数组的常用方法: 1:join(); 将数组转为字符串显示.不输入参数,默认以逗号连接:输入参数,则以参数连接. var arr=[1,2,3]; console.log(arr.join()); ...

  8. jquery EsayUi 里一个小弹框

    网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...

  9. c# 中的 Trim

    1. 让用户输入字符串 并且判断是否是 'yes'(无关大小写) Console.WriteLine("input a string"); string userResponse ...

  10. linux 驱动模块 内核编译环境

    目录(?)[+] Linux设备驱动Hello World程序介绍 如何编写一个简单的linux内核模块和设备驱动程序.我将学习到如何在内核模式下以三种不同的方式来打印hello world,这三种方 ...