文档章节

jQuery中的时间和动画

 墨冥
发布于 2018/11/09 20:58
字数 809
阅读 16
收藏 0

1、加载DOM:以浏览器加载文档为例,在页面加载完成后,浏览器会通过JavaScript为DOM事件添加事件,在jQuery红使用$(document).ready()方法;

2、执行时机:jQuery中的$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用;

3、jQuery中的$(document).ready()方法注册的事件,只要DOM完全就绪时就会被调用;

4、避免方法:为onload事件绑定一个处理函数

$(window).load(function() {
    //编写代码
}

5、多次使用:

function one() {
    alert("one");
}
function two() {
    alert("two");
}

$(document).ready(function() {
    one();
})
$(document).ready(function() {
    two();
}

6、简写方式:$(doxument)可以简写成$()。因为当$()没有参数时,默认参数就是“document”;

7、事件绑定:在文档加载完成后,如果打算为元素绑定事件来完成某些操作,可以使用bind()方法来对匹配元素来进行特定事件的绑定;

8、bind()有3个参数:(1)事件类型,可以使自定义名称;(2)可选参数,作为event.data属性值传递给事件对象的额外数据对象;(3)用来绑定的处理函数;

9、基本效果:

HTML代码:
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
      jQuery是一个优秀的JavaScript库。
    </div>
</div>


javascript代码:
$(function() {
    $("#panel h5.head").bind("click", function() {
         $(this).next().show();
    })
})

10、加强效果:

$(function() {
   $("#panel h5.head").bind("click", function() {
       var $content = $(this).next();
       if($content.is(":visible")) {
           $content.hide();
       } else {
            $content.show();
       }
   })
})

11、改变绑定事件的类型:

$(function() {
    $("#panel h5.head").bind("mouseover", function() {
        $(this).next().show();
    }).bind("mouseover", function() {
        $(this).next().hide();
    })
})

12、简写绑定时间:

$(function() {
    $("#panel h5.head").mouseover(function() {
        $(this).next().show();
    }).mouseover(function() {
        $(this).next().hide();
    })
})

13、合成事件:有两个,hover()方法和toggle()方法;

14、hover()方法:

$(function() {
    $("#panel h5.head").hover(function() {
        $(this).next().show();
    }.function() {
        $(this).next().hide();
    })
})

15、toogle方法:

$(function() {
    $("#panel h5.head").toggle(function() {
       $(this).next().show();
    }.function() {
       $(this).next().hide();
    })
});

16、再次加强事件:

$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});

17、事件冒泡:在页面上可以有多个事件,也可以多个元素响应通一个事件:

HTML代码:
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>




JavaScript代码:
$(function() {
	$('span').bind("click", function() {
		var txt = $('#msg').html() + "<p>内层span元素被单击.</p>";
		$('#msg').html(txt);
	})
    $('#content').bind("click", function() {
		var txt = $('#msg').html() + "<p>外层div元素被单击.</p>";
		$('#msg').html(txt);
	})
	$("body").bind("click", function() {
		var txt = $('#msg').html() + "<p>body元素被单击</p>.";
		$('#msg').html(txt);
	});
})

18、事件冒泡引发的问题:本来只想触发最内层元素的click事件,然后这个元素外层的元素也会被触发;

19、触发自定义事件:

为元素绑定一个“myClick”事件:
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>我的自定义事件.</p>");
})


想要触发:
$('#btn').trigger("myClick")

20、hide()方法:为一个元素调用hide()方法,会将该元素的display样式改为"none";

21、当调用show()方法时,就会根据hide()方法记住display属性值来显示元素;

© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 37
码字总数 15038
作品 0
合肥
私信 提问
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.6K
5
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
14 个使用 jQuery 开发的模拟、数字时钟

1. CoolClock in jQuery CoolClock 是一个可定制的 jQuery 模拟时钟,使用 SVG 绘制,提供多种外观选择,同时支持数字时钟。 Read More Demo 2.Analog JQuery clock 在该教程中,通过使用 jQ...

红薯
2011/11/28
12.5K
8
50 个优秀 CSS3 技巧和优美的设计教程

Filter Functionality with CSS3 Thumbnail Proximity Effect with jQuery and CSS3 Fullscreen Background Image Slideshow with CSS3 CSS3 灯箱 Slopy Elements with CSS3 Item Blur Effec......

红薯
2012/01/11
2.5K
0
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
560
1

没有更多内容

加载失败,请刷新页面

加载更多

Oracle学习日志-7(聚合查询)

GROUP BY子句: GROUP BY可以对表进行分割。比如把下面的表按照商品种类进行分割,并列出该商品种类下有多少商品 SQL代码如下 SELECT product_type ,COUNT(*)FROM ProductGROUP BY produc...

白话
4分钟前
0
0
Docker安装mysql8主从结构

准备两台服务器,假设IP地址为 172.31.27.67 主服务器 172.31.27.69 从服务器 因为我用的镜像是docker.io/cytopia/mysql-8.0,所以我们需要先把该镜像给pull下来。 docker pull docker.io/cy...

算法之名
7分钟前
0
0
Springboot集成Ehcache缓存(主要用在登录后做保持会话验证)

EhCache是一个比较成熟的Java缓存框架,最早从hibernate发展而来, 是进程中的缓存系统,它提供了用内存,磁盘文件存储,以及分布式存储方式等多种灵活的cache管理方案,快速简单。 Springbo...

Nonry
9分钟前
0
0
Ajax

1、创建ajax对象 if(window.navigator.userAgent.indexOf('MSIE') > 0){ var xhr = new ActiveXObject('Microsoft.XMLHTTP');}else{ var xhr = new XMLHttpRequest();} 2、get......

lujc
9分钟前
0
0
Flink的基石 : Chandy Lamport Algorithm

Flink处理“流”,对流消息的处理支持三种级别语义分别是“At Most once、At Least once、Exactly once”。 At Most onces:消息最多被处理一次,sender发出消息之后,receiver无论是否处理成...

tantexian
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部