一 事件绑定的两种方式
$(‘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的这个入口函数没有函数覆盖现象,文档加载完就可以使用,建议使用次函数
?
jquery事件触发