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. .NET IL实现对象深拷贝

    对于深拷贝,通常的方法是将对象进行序列化,然后再反序化成为另一个对象.例如在stackoverflow上有这样的解决办法:https://stackoverflow.com/questions/785 ...

  2. 三种方法实现Hadoop(MapReduce)全局排序(1)

    我们可能会有些需求要求MapReduce的输出全局有序,这里说的有序是指Key全局有序.但是我们知道,MapReduce默认只是保证同一个分区内的Key是有序的,但是不保证全局有序.基于此,本文提供三 ...

  3. MariaDB第三章：数据库设计与备份--小白博客

    数据库设计 1．第一范式(确保每列保持原子性) 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库表满足了第一范式. 2．第二范式(确保表中的每列都和主键相关) 第 ...

  4. CodeForces Round #545 Div.2

    A. Sushi for Two 代码: #include <bits/stdc++.h> using namespace std; ; ; int a[maxn], vis[maxn]; ...

  5. oracle：TNS:监听程序无法分发客户机连接

    挂上vpn的时候,PL/SQL连接到oracle的时候,显示ORA-12518:监听程序无法分发客户机连接.如下图: 一.[问题描述] 最近,在系统高峰期的时候,会提示如上的错误,致使无法连接到服务器 ...

  6. Shell命令-系统信息及显示之uname、hostname

    文件及内容处理 - uname.hostname 1. uname:显示系统信息 uname命令的功能说明 uname 命令用于显示系统信息.uname 可显示电脑以及操作系统的相关信息 uname命 ...

  7. React Native——react-navigation的使用

    在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...

  8. SignarL服务器端发送消息给客户端的几种情况

    一.所有连接的客户端 Clients.All.addContosoChatMessageToPage(name, message); 二.只发送给呼叫的客户端(即触发者) Clients.Caller ...

  9. Day049--jQuery的文档操作和事件介绍

    今日内容 DOM操作(CRUD) js中DOM document.createElement('p') appendChild() insertBefore() removeChild() 创建元素 ...

  10. 浏览器开发者工具----F12 功能介绍

    笔者技巧: 看了些其它回答,有些是用来扒图片的,有些是写爬虫的(这个不要看Elements,因为浏览器会对一些不符合规范的标签做补全或者其它处理,最好是Ctrl+U). 图片的话就不要看Network ...