一 事件绑定的两种方式
$(\'xx\').click(function(){
})
$(\'xx\').on(\'click\',function(){
})
二 常用事件
1.click() 点击事件
$(\'.d1\').click(function () {
$(this).css({\'background-color\':\'black\'});
});
2.focus() 聚焦事件
$(\'#username\').focus(function () {
$(\'.d1\').css({\'background-color\':\'green\'});
});
3.blur() 失去焦点事件
$(\'#username\').blur(function () {
$(\'.d1\').css({\'background-color\':\'pink\'});
});
4.change() 区域内容发生改变
$(\'select\').change(function () {
$(\'.d1\').toggleClass(\'cc\');
});
5.hover() 是对mouseenter()事件和mouseout()事件的封装
//鼠标悬浮发生的事件,有两步是对mouseenter和mouseout的封装 里边有两个匿名函数
// $(\'.d1\').hover(function () {
// $(this).css({\'background-color\':\'blue\'});
// },
// function(){
// $(this).css({\'background-color\':\'yellow\'});
//
// })
6.mouseover() 鼠标悬浮等同于hover事件
//mouseover 和 mouseenter事件的区别是 mouseover事件 如果标签有子标签,那么移入到
子标签时会连续触发, mouseenter事件不管有没有子标签只触发一次,表示鼠标进入这个对象
//鼠标进入
// $(\'.d2\').mouseenter(function () {
// console.log(\'亚太应绿了\')
// });
//鼠标悬浮
$(\'.d2\').mouseover(function () {
console.log(\'绿了\');
7. window之keydown()事件
8.window之keyup()事件
$(window).keyup(function (e) {
console.log(e.keyCode);
})
9.input事件 必须用on的绑定事件
针对百度搜索引擎
三 事件冒泡
//事件冒泡是指多个事件会一直往父级标签触发
$(\'#d1\').click(function () {
alert(\'父级标签\')
});
// $(\'#d2\').click(function () {
// alert(\'子级标签\');
// //消除事件冒泡方式一
// return false;
//
// });
$(\'#d2\').click(function (e) {
alert(\'自己标签\');
e.stopPropagation();
})
四 事件委托 必须用on的绑定方式
五 页面载入
方式一 DOM对象window操作
script 统一放在最下面
window.onload = function(){}
// window.onload = function () {
// $(\'.c1\').click(function(){
// $(this).css({\'background-color\':\'blue\'});
// })
// }
方式二 jquery对象操作
1.$(document).ready(function(){})
2. $(function(){})
$(function () {
$(\'.c1\').click(function () {
$(this).css({\'background-color\':\'black\'});
})
})
区别
1.window.onload()函数有覆盖现象,必须等待图片资源加载完成后才能够调用
2.jquery的这个入口函数没有函数覆盖现象,文档加载完就可以使用,建议使用次函数