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."');
});
 
on()和off()
<!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()
上一篇:Codeforces 767E Change-free


下一篇:javascript中执行环境和作用域(js高程)