JQuery Advanced
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的更多相关文章
- 4月份本周超过 10 款最新免费 jQuery 插件
分享 <关于我> 分享 [中文纪录片]互联网时代 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...
- Advanced Customization of the jQuery Mobile Buttons | Appcropolis
Advanced Customization of the jQuery Mobile Buttons | Appcropolis Advanced Customization of the jQue ...
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...
- jQuery演示8种不同的图片遮罩层动画效果
效果预览 下载地址 jQuery插件大全 实例代码 <div class="container"> <h1>jQuery图标和文章动画效果</h1&g ...
- 2016年4月最佳的20款 jQuery 插件推荐
这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
- Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 基于Jquery、JqueryUI插件编写
刚开始编写jquery插件的时候,只是从网上找个模板看着写,并不理解.刚刚仔细把官网的API看了下,突然觉得豁然开朗了.马上放假了想着应该整理整理不然忘了又. How to create a Jque ...
随机推荐
- Linux内存管理 (16)内存规整
专题:Linux内存管理专题 关键词:内存规整.页面迁移.pageblock.MIGRATE_TYPES. 内存碎片的产生:伙伴系统以页为单位进行管理,经过大量申请释放,造成大量离散且不连续的页面.这 ...
- python使用redis
版本: python 3.5 redis 3.0.1(redis的安装 pip install redis) 1.连接 import redis r = redis.Redis(host='192.1 ...
- echarts报表显示%+没有0
function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...
- PyQt5基础应用一
一.PyQt5基础 1.1 创建窗口 import sys from PyQt5.QtWidgets import QApplication, QWidget if __name__ == '__ ...
- mybatis 使用缓存策略
mybatis中默认开启缓存 1.mybatis中,默认是开启缓存的,缓存的是一个statement对象. 不同情况下是否会使用缓存 同一个SqlSession对象,重复调用同一个id的<sel ...
- Flask 快速使用 进阶—— (2)
案例:可配置发送信息的系统 假如我们有这样的一个系统,可以发送短息,邮件和微信,后期可能还会增加一些平台,怎么才可以做到快速切换的去使用某种功能呢,在这里我会通过在配置文件中简单的配置就可以实现 在项 ...
- mysql 解压版安装
1.官网下载压缩包 2.解压 3.配置环境变量 添加系统环境变量 MYSQL_HOME 值为解压的主目录,例如 D:\mysql-5.7.25-winx64 修改Path 环境变量,点击编辑 ...
- 四、Attribute
Attribute分两种 Attribute称为特性,语法:特性(Attribute)的名称和值是在方括号内规定的,放置在它所应用的元素之前. 1.ActionFilterAttribute(过滤器) ...
- Python——Pycharm打包exe文件
一.安装pyinstraller pip install PyInstaller 二.打包程序 pyinstaller.py -F -w -i tubiao.ico 文件名.py -F 表 ...
- faster-rcnn原理讲解
文章转自:https://zhuanlan.zhihu.com/p/31426458 经过R-CNN和Fast RCNN的积淀,Ross B. Girshick在2016年提出了新的Faster RC ...