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. leetcode 263. Ugly Number 、264. Ugly Number II 、313. Super Ugly Number 、204. Count Primes

    263. Ugly Number 注意:1.小于等于0都不属于丑数 2.while循环的判断不是num >= 0, 而是能被2 .3.5整除,即能被整除才去除这些数 class Solution ...

  2. C# FileSystemWatcher 并发

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  3. C#中UDP数据的发送､接收

    Visual C# UDP数据的发送､接收包使用的主要类及其用法: 用Visual C# UDP协议的实现,最为常用,也是最为关键的类就是UdpClient,UdpClient位于命名空间System ...

  4. 分治FFT的三种含义

    分治FFT是几个算法的统称.它们之间并无关联. 分治多项式乘法 问题如求\(\prod_{i=1}^na_ix+b\). 若挨个乘复杂度为\(O(n^2\log n)\),可分治做这件事,复杂度为\( ...

  5. 在Ubuntu下运行 apt-get update命令后出现错误:

    在Ubuntu下运行 apt-get update命令后出现错误: The package lists or status file could not be parsed or opened sud ...

  6. 【学习总结】GirlsInAI ML-diary day-15-读/写txt文件

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day15 认识读/写txt文件 路径: 绝对路径:文件在电脑中的位置 相对路径:下面会用到 1-准备 新建一个 pytho ...

  7. java内存模型详解

    对于本篇文章,将从四个概念来介绍:内存模型基础,重排序,顺序一致性和happens-before 1.内存模型基础 在并发编程中,有两个关键问题:线程之间如何通信和如何同步.由此而引出了两种并发模型: ...

  8. CSS3文字、背景与列表

    一.文本相关属性 1.字体 (1)字体设置 在HTML中,字体通过<font face="字体名称">来设置.在CSS中字体通过font-family属性来控制,里面可 ...

  9. [模板] 多项式: 乘法/求逆/分治fft/微积分/ln/exp/幂

    多项式 代码 const int nsz=(int)4e5+50; const ll nmod=998244353,g=3,ginv=332748118ll; //basic math ll qp(l ...

  10. Magento2自定义命令

    命令命名准则 命名指南概述 Magento 2引入了一个新的命令行界面(CLI),使组件开发人员能够插入模块提供的命令. Command name Command name 在命令中,它紧跟在命令的名 ...