jQuery中事件和动画的摘要分享

1.加载DOM。

1.1 .窗口事件。

Window.onload=function(){}.计时：在所有其他资源都被加载后，执行。

$ (function () {}).只需等待标签完成，然后就可以执行了。

区别：前者只能解析HTML页面中的最后一个，后者为n。

window . onload()=function(){ } $(function(){ $(' Li '))。bind('click ')，function () { $(this)。css('背景'，'红色')；});});$(function () { $('div '))。bind('click ')，function () { $(this)。css('背景'，'红色')；});});第一部分-事件。

2.鼠标事件。

2.1常见鼠标事件的处理方法。

Click() : Click事件，触发或绑定函数到指定元素的click事件。

mouseover():将函数触发或绑定到指定元素的mouseover事件。

Mouseout():触发或绑定函数到指定元素的mouseout的事件。

经典光棒效果：

$(function () { $('input '))。单击(function () { $('li '))。mouseover(function () { $(this))。css('背景'，'绿色')；}).mouse out(function(){//this . style . background=' '；this . style . CSS text=' background : '；});});});3.键盘事件。

3.1键盘事件的常用方法。

Keydown():当一个键被按下时，触发或绑定一个函数到一个指定元素的Keydown事件。

当释放键时，Keyup():将函数触发或绑定到指定元素的Keyup事件。

生成可打印字符时，Keypress():将函数触发或绑定到指定元素。

$(function () { $('p input '))。keyup(function () { $('#events '))。追加(' key up ')；}).keydown(function () { $('#events '))。追加(' keydown ')；}).keypress(function () { $('#events '))。追加('按键')；});$(文档)。keydown(函数(事件){if(事件。键码==' 13 '){//按回车键提醒('您确定要提交吗？')?);} });});4.形成事件。

4.1常见形式事件的方法。

Focus() :获取焦点，触发函数或将函数绑定到指定元素的焦点事件。

模糊():模糊失去焦点、触发或绑定功能到指定元素的事件。

$(function () {//添加$ ('input ')的边框样式。focus (function () {$ (this))。将class ('myclass ')添加到文本框中；}).blur(函数(){ $(this))。remove class(' my CLaSS ')；});});5.绑定事件和移除事件。

5.1绑定事件。

语法：

绑定(类型，[数据]，fn)，其中不需要数据。

Type:事件类型主要包括模糊、聚焦、点击、鼠标退出等基本事件。也可以是用户定义的事件。

Fn :用于绑定的处理程序。

$(function () {//将click事件绑定到li并修改样式$ ('Li ')。bind ('click ')，function () {$ (this)。CSS('背景'，'红色')；});});5.2同时绑定多个事件。

$(function () { $('li '))。bind({ mouse over : function(){ $(this))。css('背景'，'粉色')；}，mouseout:函数(){ $(this)。css('背景'，'灰色')；} });});5.3删除事件，同时删除多个事件。

解除绑定([type]，[fn])与绑定事件正好相反。如果该方法没有参数，则意味着移除所有事件。

解除绑定如果您想删除多个，只需在两个之间添加一个空格。

$(function () { $('li '))。解除绑定(“点击”)；$('li ')。解除绑定(“mouse over mouse out”)；});5.4其他一些绑定和移除方法。

1.live()解除绑定()

2.on()方法off()仅在jquery版之后。

3.delegate() undelegate()

6.复合事件。

6.1悬停()方法。

语法：

悬停(进入、离开)；该方法相当于mouseover和mouseout事件的组合。

$('li ')。悬停(function() { $('li '))。css('背景'，'灰色')；}，function() { $('li ')。css('背景'，'绿色')；});6.2 toggle()方法。

语法：

切换(fn1、fn2、……、fnN)；该方法用于模拟鼠标连续点击事件，单次鼠标点击后执行fn，从开始按顺序执行。tolgge()使用的隐藏字段属于。

显示，它不占据浏览器中的位置，并且具有与它相同的可见性。

$(“body”)。toggle(function () { $('li '))。css('背景'，'灰色')；}，function () { $('li ')。css('背景'，'绿色')；}，function () { $('li ')。css('背景'，'蓝色')；});我们来看第二部分——动画。

1.控制元素的显示和隐藏。

语法：

$(选择)。show([speed]，[callback])；

与show()方法相对的是hide()方法，它可以控制元素隐藏。

语法：

$(选择)。隐藏([速度]，[回调])；除了控制元素的隐藏，还可以定义隐藏元素时的效果，比如隐藏速度。

请注意，在大多数情况下，hide()方法和show()方法总是一起使用。

2.控制元素透明度。

2.1控制元素淡入。

语法：

$(选择)。fadeIn([速度]，[回调])；

与show()方法相对的是fadeOut()方法，可以控制元素的淡入淡出。

3.更改元素高度。

3.1方法slideUp()和slideDown()。

SlideDown()将从上到下扩展元素，但slideUp()方法正好相反，元素将从下到上缩短，直到隐藏。

$(function () { $('#btnshow '))。单击(function () { $('img '))。show(1000)；});$('#btnhide ')。单击(function () { $('img '))。隐藏(1000)；});});$(function () { $('#btnin '))。单击(function () { $('img '))。fade in(5000)；});$('#btnout ')。单击(function () { $('img '))。fade out(5000)；});});$(function () { $('#btnup '))。单击(function () { $('img '))。slide up(5000)；});$('#btndown ')。单击(function () { $('img '))。下滑(5000)；});});4.4.animate()方法用于自定义动画。

当我们需要对动画有更多的控制时，使用animate()方法可以更加灵活，因为它可以替代所有其他方法。

$ (function () {$ ('[type=button]')。bind ('click '，function(){//两个特效并行执行，不加入队列：$ ('div ')。动画({'font-size' :' 50px'}，3000)。animate({ 'width': '300px' }，{ queue: false，duration : 3000 })；});});4.1 animate()方法取代了一些其他方法。

//替换show()方法//$('img ')。show(1000)；$('img ')。动画({height:'show '，width:'show '，opacity: ' show ' }，1000)；//替换fadeIn()方法$('img ')。fade in(5000)；$('img ')。动画({ opacity: ' show ' }，5000)；//替换slideDown()方法$('img ')。下滑(5000)；$('img ')。动画({ height: 'show' }，5000)；这些动画是animate()方法的简短形式，内置了特定的样式。这些特定的样式值可以是“显示”、“隐藏”、“切换”，也可以自定义。

$(“div”)。单击(function() { $(this))。下一个()。toggle()；$(这个)。下一个()。fadeTo(600，0.2)；$(这个)。下一个()。fade toggle()；$(这个)。下一个()。slide Toggle()；});

这个jQuery中事件和动画的总结和分享是边肖和你分享的所有内容。希望能给大家一个参考，多支持我们。