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 入门级学习笔记及源码
Jan 22 Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php对数组排序代码分享
2014/02/24 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
破解Session cookie的方法
2006/07/28 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
简单介绍Python中的几种数据类型
2016/01/02 Python
Python编程求质数实例代码
2018/01/31 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
django 模版关闭转义方式
2020/05/14 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
工业设计专业推荐信
2013/10/29 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
自荐信的基本格式
2014/02/22 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
网络技术专业求职信
2014/05/02 职场文书
小学运动会开幕词
2015/01/28 职场文书
大学四年个人总结
2015/03/03 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
php去除deprecated的实例方法
2021/11/17 PHP