JQuery快速入门-事件与效果

时间 2019-12-09

原文原文链接

1、事件

事件绑定的方法有两种：javascript

绑定到元素
查找元素后绑定事件

方法1：绑定到元素html

<body>
    <p onclick='func1()'>点击我</p>
</body>

<script type="text/javascript">
     function func1(){
	    alert('123');
 
     }

方法2:查找到元素后绑定事件java

<body>
<p>点击我</p>
</body>

<script type="text/javascript">
     $('p').click(function(){
	    alert('123');
    });
 
</script>

说明：方法2的优势是不用在元素里面进行事件添加，至关于事件和元素分离。jquery

一、浏览器事件

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>

二、scroll（）//当用户在元素内执行了滚动操做，就会在这个元素上触发scroll事件。app

$('#target').scroll(function() {
 　　 $('#log').append('<div>Handler for .scroll() called.</div>');
});

二、文档加载

当DOM准备就绪时，执行的一个函数。ide

$( document ).ready(function() {

　　// Handler for .ready() called.

 
  }); 
 
  等价于 
 
    $(function() { 
   
     　　// Handler for .ready() called. 
   
    });

三、事件绑定

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>
 
  
　　

四、表单事件

.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（回车键），均可以提交。

五、键盘事件

.keydown()
.keypress()
.keyup()

六、鼠标事件

.click()
.contextmenu()
.dblclick()
.focusin()
.focusout()
.hover()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.toggle()

七、事件对象

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

2、效果

一、基础

.hide()//隐藏
.show()//显示
.toggle()//切换（有就去掉，没有就增长）

二、自定义

.animate()
.clearQueue()
.delay()
.dequeue()
jQuery.dequeue()
.finish()
jQuery.fx.interval
jQuery.fx.off
.queue()
jQuery.queue()
.stop()

三、渐变

.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()

四、滑动

.slideDown()
.slideToggle()
.slideUp()