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. Settings > Editor > Live Templates 中自定义快速输入

    Settings > Editor > Live Templates 中自定义快速输入

  2. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  3. iview 无法缓存的问题

  4. css实现多行文本溢出显示省略号(…)

    WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...

  5. NOIP2000提高组复赛C 单词接龙

    题目链接:https://ac.nowcoder.com/acm/contest/248/C 题目大意: 略 分析: 注意点:1.前缀和后缀的公共部分应该选最短的.2.如果两个字符串前缀和后缀的公共部 ...

  6. CodeForces 91B Queue

    题目链接:http://codeforces.com/contest/91/problem/B 题目大意: 有n头大象排队买票,第i头大象的年龄为ai,如果有比他年轻的大象排在他前面,这头大象就会非常 ...

  7. SpringCloud学习笔记：声明式调用Feign（4）

    1. Feign简介 Feign采用声明式API接口的风格,将Java HTTP客户端绑定到它的内部. Feign的首要目标是简化Java HTTP客户端调用过程. 2.Feign客户端示例 Feig ...

  8. python之异常处理和re模块补充

    一.re模块的补充 1.从一个字符串中获取要匹配的内容 findall:返回一个列表 2.search ***** 验证用户输入内容 '^正则规则$':返回一个对象,用group()取值 3.matc ...

  9. Oracle 查看链接数、创建索引等的DDL语句

    select count(*),machine from v$session group by machine 今天打算将一个数据库的索引在另一个测试库上重新创建一遍,研究了一下. set pages ...

  10. Mysql双主热备+LVS+Keepalived高可用部署实施手册

    MySQL复制能够保证数据的冗余的同时可以做读写分离来分担系统压力,如果是主主复制还可以很好的避免主节点的单点故障.然而MySQL主主复制存在一些问题无法满足我们的实际需要:未提供统一访问入口来实现负 ...