jQuery选择器实例应用


Posted in Javascript onJanuary 05, 2017

刚学完jQuery选择器,闲来无事,照着书上的范例敲了一段代码(HTML和CSS抄自书上),自己试着写了写jQuery的代码,感觉相当轻便啊。

显示效果:

jQuery选择器实例应用

功能说明:

1、点击上边的图书分类一栏,实现向下的伸缩扩展,可以控制分类的显示状态;

2、“简化”功能点击后实现分类显示菜单数量的简化,简化后,简化字样变成“展开”;

3、页面中的两个红色箭头图标均为显示状态的图标,每次点击后都会变换相应的状态效果。

代码实现:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta name="keywords" content=" keywords" />
  <meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
  body{font-size:13px}
  #divFrame{border:solid 1px #666;width:301px;overflow:hidden}
  #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:pointer}
  #divFrame .clsHead h3{padding:0px;margin:0px;float:left}
  #divFrame .clsHead span{float:right;margin-top:3px}
  #divFrame .clsContent{padding:8px}
  #divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px}
  #divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px}
  #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
  .GetFocus{background-color:#eee}
</style>
<body>
<script type="text/javascript">
  $(function(){
    $('.clsHead').click(function(){
      if($('.clsContent').is(':visible')){
        $('.clsContent').css('display','none');
        $('.clsHead span img').attr('src','a.gif');
      }else{
        $('.clsContent').css('display','block');
        $('.clsHead span img').attr('src','a2.gif');
      }
    });
    $('.clsBot').click(function(){
      if($('li:last').is(':visible')){
        $('li:gt(5)').css('display','none');
        $('.clsBot a').html('展开');
        $('.clsBot img').attr('src','a.gif');
      }else{
        $('li:gt(5)').css('display','block');
        $('.clsBot a').html('简化');
        $('.clsBot img').attr('src','a2.gif');
      }
    });
  });
</script>
<div id="divFrame">
  <div class="clsHead">
    <h3>图书分类</h3>
    <span><img src="a2.gif" alt="" /></span>
  </div>
  <div class="clsContent">
    <ul>
      <li><a href="#">小说</a><i>(1110) </i></li>
      <li><a href="#">文艺</a><i>(230) </i></li>
      <li><a href="#">青春</a><i>(1430) </i></li>
      <li><a href="#">少儿</a><i>(235) </i></li>
      <li><a href="#">生活</a><i>(7809) </i></li>
      <li><a href="#">社科</a><i>(876) </i></li>
      <li><a href="#">管理</a><i>(1234) </i></li>
      <li><a href="#">计算机</a><i>(2434) </i></li>
      <li><a href="#">教育</a><i>(234) </i></li>
      <li><a href="#">工具书</a><i>(7665) </i></li>
      <li><a href="#">引进版</a><i>(4557) </i></li>
      <li><a href="#">其他类</a><i>(4543) </i></li>
    </ul>
    <div class="clsBot"><a href="#">简化</a>
      <img src="a2.gif">
    </div>
  </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 #Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 #Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 #Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 #Javascript
JS实现给对象动态添加属性的方法
Jan 05 #Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 #Javascript
JavaScript实现数组降维详解
Jan 05 #Javascript
You might like
php精度计算的问题解析
2019/06/21 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
js取得url地址参数实例
2013/02/22 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
python中pygame模块用法实例
2014/10/09 Python
python实现基本进制转换的方法
2015/07/11 Python
Python入门学习指南分享
2018/04/11 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
社区健康教育实施方案
2014/03/18 职场文书
人代会标语
2014/06/30 职场文书
碧霞祠导游词
2015/02/09 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server