1.Jquery Utility

<1> Type & Function & setTimeOut

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="../../jquery/jquery-3.2.1.min.js"></script>
  7. </head>
  8. <body>
  9.  
  10. <h1>Type test Functions demo</h1>
  11. <div id="output"></div>
  12.  
  13. <script type="text/javascript">
  14. function addText() {
  15. $('#output').append('HelloWorld<br>');
  16. }
  17.  
  18. function callAnotherFunction(times, delay, func) {
  19. var otimes = $.isNumeric(times)? times:3;
  20. var odelay = $.isNumeric(delay)? delay:300;
  21. if(!$.isFunction(func)){
  22. return false;
  23. }
  24.  
  25. var i = 0;
  26. (function loopIt() {
  27. i++;
  28. func();
  29. if(i<times){
  30. setTimeout(loopIt,delay);
  31. }
  32. })();
  33. }
  34.  
  35. $(document).ready(function () {
  36. callAnotherFunction(3,300,addText);
  37. })
  38.  
  39. </script>
  40. </body>
  41. </html>

N,多折叠板子

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script src="../jquery-3.2.1.min.js"></script>
  7. <link rel="stylesheet" href="cp_01.css">
  8. </head>
  9. <body>
  10.  
  11. <div class="collapse-body">
  12. <div class="clk-dialog">
  13. <h1>Collapse 01</h1>
  14. <p>Hello this is my all text here .button margin,padding,border should 0,
  15. 必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>
  16. </div>
  17.  
  18. <div class="clk-dialog">
  19. <h1>Collapse 02</h1>
  20. <p>Hello this is my all text here .button margin,padding,border should 0,
  21. 必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>
  22. </div>
  23.  
  24. <div class="clk-dialog">
  25. <h1>Collapse 03</h1>
  26. <p>Hello this is my all text here .button margin,padding,border should 0,
  27. 必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>
  28. </div>
  29.  
  30. <div class="clk-dialog">
  31. <h1>Collapse 04</h1>
  32. <p>Hello this is my all text here .button margin,padding,border should 0,
  33. 必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>
  34. </div>
  35. </div>
  36.  
  37. <script src="cp_01.js"></script>
  38. </body>
  39. </html>

css:

  1. body{
  2. background-color: #222222;
  3. }
  4.  
  5. .collapse-body{
  6. /*position: relative;
  7. margin: auto;*/
  8. border: 1px solid #699;
  9. /*vertical-align: middle;*/
  10.  
  11. }
  12.  
  13. .clk-dialog{
  14. display: block;
  15. font-family: Consolas;
  16. color: white;
  17.  
  18. }
  19.  
  20. .clk-dialog h1{
  21. background: darkorange;
  22. border: 1px solid #222222;
  23. padding:;
  24. margin:;
  25. text-align: center;
  26.  
  27. }
  28. .clk-dialog p{
  29. margin:;;
  30. padding:;
  31. border-bottom: 1px solid darkcyan;
  32. }

js:

  1. $(document).ready(function () {
  2. var dialog = $('.clk-dialog');
  3. var h1 = $('div.clk-dialog h1');
  4. var text = $('div.clk-dialog p');
  5.  
  6. /*
  7. $(h1).click(function () {
  8. $(text).slideToggle(500);
  9. });*/
  10.  
  11. $(dialog).each(function () {
  12. console.log($(this));
  13. var jq_h1 = $(this).children("h1");
  14. var jq_p = $(this).children("p");
  15. $(jq_h1).click(function () {
  16. $(jq_p).slideToggle(500);
  17. })
  18. })
  19. });

JQuery Advanced的更多相关文章

  1. 4月份本周超过 10 款最新免费 jQuery 插件

    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...

  2. Advanced Customization of the jQuery Mobile Buttons | Appcropolis

    Advanced Customization of the jQuery Mobile Buttons | Appcropolis Advanced Customization of the jQue ...

  3. JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...

  4. jQuery演示8种不同的图片遮罩层动画效果

    效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...

  5. 2016年4月最佳的20款 jQuery 插件推荐

    这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...

  6. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  8. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  9. 基于Jquery、JqueryUI插件编写

    刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又. How to create a Jque ...

随机推荐

  1. Linux内存管理 (16)内存规整

    专题:Linux内存管理专题 关键词:内存规整.页面迁移.pageblock.MIGRATE_TYPES. 内存碎片的产生:伙伴系统以页为单位进行管理,经过大量申请释放,造成大量离散且不连续的页面.这 ...

  2. python使用redis

    版本: python 3.5 redis 3.0.1(redis的安装 pip install redis) 1.连接 import redis r = redis.Redis(host='192.1 ...

  3. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  4. PyQt5基础应用一

    一.PyQt5基础   1.1 创建窗口 import sys from PyQt5.QtWidgets import QApplication, QWidget if __name__ == '__ ...

  5. mybatis 使用缓存策略

    mybatis中默认开启缓存 1.mybatis中,默认是开启缓存的,缓存的是一个statement对象. 不同情况下是否会使用缓存 同一个SqlSession对象,重复调用同一个id的<sel ...

  6. Flask 快速使用 进阶—— (2)

    案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...

  7. mysql 解压版安装

    1.官网下载压缩包 2.解压 3.配置环境变量 添加系统环境变量  MYSQL_HOME 值为解压的主目录,例如     D:\mysql-5.7.25-winx64 修改Path 环境变量,点击编辑 ...

  8. 四、Attribute

    Attribute分两种 Attribute称为特性,语法:特性(Attribute)的名称和值是在方括号内规定的,放置在它所应用的元素之前. 1.ActionFilterAttribute(过滤器) ...

  9. Python——Pycharm打包exe文件

    一.安装pyinstraller    pip install  PyInstaller 二.打包程序   pyinstaller.py -F -w -i tubiao.ico 文件名.py -F 表 ...

  10. faster-rcnn原理讲解

    文章转自:https://zhuanlan.zhihu.com/p/31426458 经过R-CNN和Fast RCNN的积淀,Ross B. Girshick在2016年提出了新的Faster RC ...