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. jQuery Tags Input Plugin 插件的使用

    一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http://xoxco.com/pr ...

  2. asp.net 页面跳转的方法

    目前知道有4种: 1超链接 2.response.redirect("urlString") 3.server.transfer("urlString") 4. ...

  3. SQL Server 事务嵌套

    示例代码: DECLARE @TranCounter INT; SET @TranCounter = @@TRANCOUNT; -- Procedure called when there is -- ...

  4. 读书笔记-Coding faster(英文版)

    读书笔记-Coding faster(英文版) Getting More Productive with Microsoft visual Studio Author: Zain Naboulsi S ...

  5. [string]字符串中几个比较难的算法和容易搞混的题目

    一.两个难点算法 1.Manacher算法,线性时间求最长回文子串 2.KMP算法,字符串匹配问题,c语言中的strStr 二.几个题目 1.最长回文子串 方法:暴力,动态规划,中心扩展,manach ...

  6. C++ Primer 读书笔记：第11章 泛型算法

    第11章 泛型算法 1.概述 泛型算法依赖于迭代器,而不是依赖容器,需要指定作用的区间,即[开始,结束),表示的区间,如上所示 此外还需要元素是可比的,如果元素本身是不可比的,那么可以自己定义比较函数 ...

  7. InitCommonControlsEx()

    参见:http://blog.sina.com.cn/s/blog_4fcd1ea30100qlzp.html MFC通用控件初始化 ********************************* ...

  8. AOP面试遇到的问题

    1.什么是AOP? 面向切面的编程,找出纸和笔,画一个箭头,两道竖线将这个箭头砍断,这就是AOP 举例来说,某个方法正在运行呢,要想在前面加个日志,加在这里,后面加个日志,加在这里,前面加transa ...

  9. 自定义alert，confirm，prompt事件，模仿window.alert()，confirm()，prompt()

    css代码: /*custom_alert and custom_confirm*/ ; } ;;background-color: #585858; padding: 30px 30px; bord ...

  10. laravel中间件源码分析

    laravel中间件源码分析 在laravel5.2中,HTTP 中间件为过滤访问你的应用的 HTTP 请求提供了一个方便的机制.在处理逻辑之前,会通过中间件,且只有通过了中间件才会继续执行逻辑代码. ...