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 ...
随机推荐
- 密码算法详解——DES
0 DES简介 在20世纪60年代后期,IBM公司成立了一个由Horst Feistel负责的计算机密码学研究项目.1971年设计出密码算法LUCIFER后,该项目宣告结束.LUCIFER被卖给了伦敦 ...
- css中关于transform、transition、animate的区别
写动画经常会用到这几个属性,他们之间有什么区别呢? 1.transform 每每演示transform属性的,看起来好像都是带动画.这使得小部分直觉化思维的人(包括我)认为transform属性是动画 ...
- SQLServer 2012 已成功与服务器建立连接，但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时。
楼主用SQL Server 2012 在连接其他电脑的实例时,一直提示“已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - ...
- linux 链接控制
如发现系统存在大量TIME_WAIT状态的连接,通过调整内核参数解决,vim /etc/sysctl.conf编辑文件,加入以下内容:net.ipv4.tcp_syncookies = 1net.ip ...
- 诡异的_DEBUG宏
学习VLD1.0代码,发现Release版本的代码_DEBUG宏是已定义的,查找工程配置确只有NDEBUG宏的定义,不见_DEBUG的踪影. 好吧,最后发现是由于工程Code Generation选项 ...
- 当tomcat有两个链接数据库的应用同时运行可能冲突
-Xms512M -Xmx1024M -XX:MaxPermSize=256M
- jquery编写的简单日历
以前在开发web页面的时候遇到日历,都是直接引入一些日历组件来用,一直不太明白实现原理,总感觉挺复杂的. 今天尝试着用jquery写了一个简单的日历功能,可以选择年份,月份,返回今天,原来简单的日历功 ...
- 自学HTML5第一天（认识HTML5的全局属性）
contextmenu 属性 规定 <div> 元素的上下文菜单.上下文菜单会在用户右键点击元素时出现.列子: <div contextmenu="mymenu" ...
- ThinkPHP框架研究之一 基本函数 M和D的区别
http://my.oschina.net/wxweven/blog/56563?fromerr=32n4Nf7V https://segmentfault.com/q/101000000298807 ...
- VB生成xml
Dim text As XmlText Dim doc As New XmlDocument '加入XML的声明段落 Dim node As XmlNode = doc.CreateXmlDeclar ...