1.Jquery Utility

<1> Type & Function & setTimeOut

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../../jquery/jquery-3.2.1.min.js"></script>

</head>

<body>

<h1>Type test Functions demo</h1>

<div id="output"></div>

<script type="text/javascript">

    function addText() {

        $('#output').append('HelloWorld<br>');

    }

    function callAnotherFunction(times, delay, func) {

        var otimes = $.isNumeric(times)? times:3;

        var odelay = $.isNumeric(delay)? delay:300;

        if(!$.isFunction(func)){

            return false;

        }

        var i = 0;

        (function loopIt() {

            i++;

            func();

            if(i<times){

                setTimeout(loopIt,delay);

            }

        })();

    }

    $(document).ready(function () {

        callAnotherFunction(3,300,addText);

    })

</script>

</body>

</html>

N,多折叠板子

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="cp_01.css">

</head>

<body>

<div class="collapse-body">

    <div class="clk-dialog">

        <h1>Collapse 01</h1>

        <p>Hello this is my all text here .button margin,padding,border should 0,

            必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>

    </div>

    <div class="clk-dialog">

        <h1>Collapse 02</h1>

        <p>Hello this is my all text here .button margin,padding,border should 0,

            必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>

    </div>

    <div class="clk-dialog">

        <h1>Collapse 03</h1>

        <p>Hello this is my all text here .button margin,padding,border should 0,

            必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>

    </div>

    <div class="clk-dialog">

        <h1>Collapse 04</h1>

        <p>Hello this is my all text here .button margin,padding,border should 0,

            必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>

    </div>

</div>

<script src="cp_01.js"></script>

</body>

</html>

css:

body{

    background-color: #222222;

}

.collapse-body{

    /*position: relative;

    margin: auto;*/

    border: 1px solid #699;

    /*vertical-align: middle;*/

}

.clk-dialog{

    display: block;

    font-family: Consolas;

    color: white;

}

.clk-dialog h1{

    background: darkorange;

    border: 1px solid #222222;

    padding:;

    margin:;

    text-align: center;

}

.clk-dialog p{

    margin:;;

    padding:;

    border-bottom: 1px solid darkcyan;

}

js:

$(document).ready(function () {

    var dialog = $('.clk-dialog');

    var h1 = $('div.clk-dialog h1');

    var text = $('div.clk-dialog p');

    /*

    $(h1).click(function () {

        $(text).slideToggle(500);

    });*/

    $(dialog).each(function () {

        console.log($(this));

        var jq_h1 = $(this).children("h1");

        var jq_p  = $(this).children("p");

        $(jq_h1).click(function () {

            $(jq_p).slideToggle(500);

        })

    })

});

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. 洛谷 P1049 装箱问题

    \[传送门在这呢!!\] 题目描述 有一个箱子容量为\(V\)(正整数,\(0 \le V \le 20000\)),同时有\(n\)个物品(\(0<n \le 30\),每个物品有一个体积(正 ...

  2. TestNG安装及使用

    安装:https://www.cnblogs.com/xusweeter/p/6559196.html使用:https://www.cnblogs.com/liwu/p/5113936.html 作用 ...

  3. Golang 入门系列（二）学习Go语言需要注意的坑

    上一章节我们已经了解了 Go 环境的配置,不了解的,请查看前面的文章 https://www.cnblogs.com/zhangweizhong/p/9459945.html,本章节我们将学习 Go ...

  4. iOS开发基础篇-手写控件

    一.手写控件的步骤 1)使用相应的控件类创建控件对象: 2)设置该控件的各种属性: 3)添加空间到视图中: 4)如果是 UIButton 等控件,还需考虑控件的单击事件等: 二.添加 UIButton ...

  5. 虽然不抱希望但也愿.Net和Java之争暂得平息

    我在刚开始学编程的时候就经常来博客园,当时博客园基本是.Net的天下,从那时开始.Net和Java哪个好就一直在打,这些年没怎么看博客园了,回来发现到了今天居然还在争论,让我不由得想来分析一下这个问题 ...

  6. 一人撸PaaS之“应用”

    [什么是“应用”] 应用,如果按名词理解就是类似于可以使用的功能,比如一个App应用.事实上,一个应用包含了大量的交互功能以丰富我们的日常学习和生活. 我们这里的应用指的是一系列功能的集合,可以理解为 ...

  7. threejs 初识

    用于展示3D动效,就是 跟拍电影一样,需要有3大模块:scene,camera,renderer. scene:场景,用于放置用到的模型. camera:摄像机,拍电影似的,得有个摄像机. rende ...

  8. java list map set array 转换

    1.list转set Set set = new HashSet(new ArrayList()); 2.set转list List list = new ArrayList(new HashSet( ...

  9. linux python2.x 升级python3.x

    Linux下python升级步骤  Python2 ->Python3 多数情况下,系统自动的Python版本是2.x 或者yum直接安装的也是2.x 但是,现在多数情况下建议使用3.x 那么如 ...

  10. vue.js实战——方法设置默认参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...