JQuery快速入门-事件与效果
一、事件
事件绑定的方法有两种:
- 绑定到元素
- 查找元素后绑定事件
方法1:绑定到元素
<body>
<p onclick='func1()'>点击我</p>
</body> <script type="text/javascript">
function func1(){
alert('123'); }
方法2:查找到元素后绑定事件
<body>
<p>点击我</p>
</body> <script type="text/javascript">
$('p').click(function(){
alert('123');
}); </script>
说明:方法2的优点是不用在元素里面进行事件添加,相当于事件和元素分离。
1、浏览器事件
resize()//只要在浏览器窗口的大小改变时,根据不同的浏览器,该消息被追加到<div id="log">一次或多次。
<body>
<p id='log'>点击我</p>
</body> <script type="text/javascript"> $(window).resize(function() {
$('#log').append('<div>Handler for .resize() called.</div>');
}); </script>
2、scroll()//当用户在元素内执行了滚动操作,就会在这个元素上触发scroll
事件。
$('#target').scroll(function() {
$('#log').append('<div>Handler for .scroll() called.</div>');
});
2、文档加载
当DOM准备就绪时,执行的一个函数。
$( document ).ready(function() {
// Handler for .ready() called.
});
$(function() {
// Handler for .ready() called.
});
3、事件绑定
bind(事件名称,函数)和unbind(‘click’,function(){})
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
<!DOCTYPE html>
<html>
<head>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
//定义函数aClick,然div显示,并展示慢慢消失效果。
function aClick() {
$("div").show().fadeOut("slow");
}
//绑定点击函数,针对#theone绑定aClick函数,并把内容改为‘Can Click!’
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
//找到unbind元素并绑定click事件,执行aClick函数,找到#theone元素然后把内容改为‘Does nothing.....’
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
</script> </body>
</html>
4、表单事件
- .blur() //为 "blur" 事件绑定一个处理函数,或者触发元素上的 "blur" 事件
- .change()//"change" 事件绑定一个处理函数,或者触发元素上的 "change" 事件。此事件仅限用于
<input>
元素,<textarea>
和<select>
元素。 - .focus()//"focus" 事件绑定一个处理函数,或者触发元素上的 "focus" 事件。此事件起初适用于有限的元素,比如表单元素(
<input>
,<select>
等)和链接元素(<a href>
)。 - .select()//"select" 事件绑定一个处理函数,或者触发元素上的该事件。此事件只能用在
<input type="text">
和<textarea>
。 - .submit()//"submit" 事件绑定一个处理函数,或者触发元素上的该事件。它只能绑定在
<form>
元素上。以下几种情况会导致表单被提交:用户点击了<input type="submit">
,<input type="image">
, 或者<button type="submit">
,或者当某些表单元素获取焦点时,敲击Enter(回车键),都可以提交。
5、键盘事件
- .keydown()
- .keypress()
- .keyup()
6、鼠标事件
- .click()
- .contextmenu()
- .dblclick()
- .focusin()
- .focusout()
- .hover()
- .mousedown()
- .mouseenter()
- .mouseleave()
- .mousemove()
- .mouseout()
- .mouseover()
- .mouseup()
- .toggle()
7、事件对象
- event.currentTarget
- event.data
- event.isDefaultPrevented()
- event.isImmediatePropagationStopped()
- event.isPropagationStopped()
- event.namespace
- event.pageX
- event.pageY
- event.preventDefault()
- event.relatedTarget
- event.result
- event.stopImmediatePropagation()
- event.stopPropagation()
- event.target
- event.timeStamp
- event.type
- event.which
二、效果
1、基础
- .hide()//隐藏
- .show()//显示
- .toggle()//切换(有就去掉,没有就增加)
2、自定义
- .animate()
- .clearQueue()
- .delay()
- .dequeue()
- jQuery.dequeue()
- .finish()
- jQuery.fx.interval
- jQuery.fx.off
- .queue()
- jQuery.queue()
- .stop()
3、渐变
- .fadeIn()
- .fadeOut()
- .fadeTo()
- .fadeToggle()
4、滑动
- .slideDown()
- .slideToggle()
- .slideUp()
JQuery快速入门-事件与效果的更多相关文章
- day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
- JQuery快速入门
Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...
- jquery快速入门三
事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- JQuery 快速入门一篇通
JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...
- jquery快速入门(二)
jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...
- JQuery快速入门-简介
一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
- jQuery快速入门专题
jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...
- jquery快速入门(一)
一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...
随机推荐
- python基础知识回顾之列表
在python 中,主要的常用数据类型有列表,元组,字典,集合,字符串.对于这些基础知识,应该要能够足够熟练掌握. 如何创建列表: # 创建一个空列表:定义一个变量,然后在等号右边放一个中括号,就创建 ...
- AD域创建用户无法登录
怎么登录都无法登录 解决办法: 创建用户的时候 将用户下次登录时须更改密码的勾去掉 不然需要修改密码才可以登录
- python基础学习23----IO模型(简)
对于一个网络IO(network IO),它会涉及到两个系统对象,一个是调用这个IO的process (or thread),另一个就是系统内核(kernel).当一个read操作发生时,该操作会经历 ...
- pythonGUI编程-tkinter
图形用户界面( G raphical U ser I nterface,GUI)编程 Python2.0级以下的版本叫做Tkinter,Python3.0改名为tkinter tkinter 模块:添 ...
- How to Be Assertive Asking for What You Want Firmly and Fairly
What Is Assertiveness? It's not always easy to identify truly assertive behavior. This is because th ...
- MySQL基础之 视图
视图 视图就是从一个表或多个表导出来的一张虚拟的表.通过这个窗口可以看到系统专门提供的数据,方便用户操作的同时增加了安全性. 视图的特点: 1.视图的列可以来自于不同的表. 2.视图是由实际存在的表创 ...
- HDFS NameNode内存详解
前言 <HDFS NameNode内存全景>中,我们从NameNode内部数据结构的视角,对它的内存全景及几个关键数据结构进行了简单解读,并结合实际场景介绍了NameNode可能遇到的问题 ...
- Windows Phone 8 获取与监听网络连接状态(转)
原文地址:http://www.cnblogs.com/sonic1abc/archive/2013/04/02/2995196.html 现在的只能手机对网络的依赖程度都很高,尤其是新闻.微博.音乐 ...
- October 22nd, 2017 Week 43rd Sunday
Yesterday is not ours to recover, but tomorrwo is ours to win or lose. 我们无法重拾昨天,但我们可以选择赢得或者输掉明天. Eve ...
- linux sqlplus查询数据中文乱码解决方法记录
locale-gen -lang en.US.UTF-8 重启.