事件
事件绑定方式
<script src="jquery.js"></script><script> //方式1 // $('#d1').click(function () { // $(this).css({'background-color':'green'}); // }); //方式2 $('#d1').on('click',function () { $(this).css({'background-color':'green'}); })</script>
常用事件
click 左键点击事件 //获取光标触发的事件 $('[type="text"]').focus(function () { $('.c1').css({'background-color':'black'}); }); //失去光标(焦点)触发的事件 $('[type="text"]').blur(function () { $('.c1').css({'background-color':'purple'}); }); //域内容发生改变时触发的事件 $('select').change(function () { $('.c1').toggleClass('cc'); }); //鼠标悬浮触发的事件 $('.c1').hover( 第一步:鼠标放上去 function () { $(this).css({'background-color':'blue'}); }, 第二步,鼠标移走 function () { $(this).css({'background-color':'yellow'}); } ) // 鼠标悬浮 等同于hover事件 // 鼠标进入 $('.c1').mouseenter(function () { $(this).css({'background-color':'blue'}); }); // 鼠标移出 $('.c1').mouseout(function () { $(this).css({'background-color':'yellow'}); }); $('.c2').mouseenter(function () { console.log('得港绿了'); }); // 鼠标悬浮事件 $('.c2').mouseover(function () { console.log('得港绿了'); }); // mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象//键盘按下触发的事件 e\event事件对象 $(window).keydown(function (e) { // console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件 if (e.keyCode === 37){ $('.c1').css({'background-color':'red'}); }else if(e.keyCode === 39){ $('.c1').css({'background-color':'green'}); } else { $('.c1').css({'background-color':'black'}); } }) // 键盘抬起触发的事件 $(window).keyup(function (e) { console.log(e.keyCode); }) input事件: 22期百度:<input type="text" id="search"> <script src="jquery.js"></script> <script> $('#search').on('input',function () { console.log($(this).val()); }) </script>
事件冒泡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ background-color: red; height: 200px; } #d2{ background-color: green; height: 100px; width: 100px; } </style></head><body><div id="d1"> <div id="d2"></div></div><script src="jquery.js"></script><script> $('#d1').click(function () { alert('父级标签'); }); $('#d2').click(function () { alert('子级标签'); }); </script></body></html>
阻止后续事件发生
$('#d1').click(function () { alert('父级标签'); }); $('#d2').click(function (e) { alert('子级标签'); return false; // e.stopPropagation(); });
事件委托
//事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="d1"> <button class="c1">爱的魔力转圈圈</button></div><script src="jquery.js"></script><script> $('.c1').on('click',function () { alert('得港被雪飞调教了,大壮很难受!'); var btn = document.createElement('button'); $(btn).text('爱的魔力转圈圈'); $(btn).addClass('c1'); console.log(btn); //添加到div标签里面的后面 $('#d1').append(btn); }); #将'button' 选择器选中的标签的点击事件委托给了$('#d1'); $('#d1').on('click','button',function () { alert('得港被雪飞调教了,大壮很难受!'); var btn = document.createElement('button'); $(btn).text('爱的魔力转圈圈'); $(btn).addClass('c1'); console.log(btn); console.log($(this)) //还是我们点击的那个button按钮 //添加到div标签里面的后面 $('#d1').append(btn); });</script></body></html>
页面载入和window.onload
1. jquery文件要在使用jquery的代码之前引入2. js代码最好都放到body标签下面或者里面的最下面来写3.window.onload window.onload = function () { $('.c1').click(function () { $(this).css({'background-color':'green'}); }) }4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){}); 页面载入与window.onload的区别 1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用 2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数） 示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容 // window.onload 有覆盖现象,会被后面的window.onload给重新赋值 window.onload = function () { $('.c1').click(function () { $(this).css({'background-color':'green'}); }) } $(function () { $('.c1').click(function () { $(this).css({'background-color':'green'}); }) }); </script> <script src="xx.js"></script> <style> .c1{ background-color: red; height: 200px; width: 200px; } </style></head><body><div class="c1"></div><img src="" alt=""></body></html>
经验首页