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 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
requireJS使用指南
Apr 27 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
提升页面加载速度的插件InstantClick
Sep 12 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
JS三级联动代码格式实例详解
Dec 30 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制作静态网站的模板框架(一)
2006/10/09 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python设置检查点简单实现代码
2014/07/01 Python
Python类的专用方法实例分析
2015/01/09 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Django权限设置及验证方式
2020/05/13 Python
Python 操作 MySQL数据库
2020/09/18 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
致裁判员加油稿
2014/02/08 职场文书
物业保安员岗位职责
2014/03/14 职场文书
瘦西湖导游词
2015/02/03 职场文书
车辆管理制度范本
2015/08/05 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python