标签：title html ready loaded 匿名 事件 span 引擎 atom
$(‘xx‘).click(function(){
})
$(‘xx‘).on(‘click‘,function(){
})
$(‘.d1‘).click(function () {
$(this).css({‘background-color‘:‘black‘});
});
$(‘#username‘).focus(function () {
$(‘.d1‘).css({‘background-color‘:‘green‘});
});
$(‘#username‘).blur(function () {
$(‘.d1‘).css({‘background-color‘:‘pink‘});
});
$(‘select‘).change(function () {
$(‘.d1‘).toggleClass(‘cc‘);
});
//鼠标悬浮发生的事件,有两步是对mouseenter和mouseout的封装 里边有两个匿名函数
// $(‘.d1‘).hover(function () {
// $(this).css({‘background-color‘:‘blue‘});
// },
// function(){
// $(this).css({‘background-color‘:‘yellow‘});
//
// })
//mouseover 和 mouseenter事件的区别是 mouseover事件 如果标签有子标签,那么移入到
子标签时会连续触发, mouseenter事件不管有没有子标签只触发一次,表示鼠标进入这个对象
//鼠标进入
// $(‘.d2‘).mouseenter(function () {
// console.log(‘亚太应绿了‘)
// });
?
//鼠标悬浮
$(‘.d2‘).mouseover(function () {
console.log(‘绿了‘);
// function函数的 e/event参数 表示的是事件 keydown/keyup keycode表示的是属性
按键值
$(window).keydown(function (e) {
// console.log(e.keyCode);
if (e.keyCode === 37){
$(‘.d1‘).css({‘background-color‘:‘orange‘});
} else if (e.keyCode === 39){
$(‘.d1‘).css({‘background-color‘:‘green‘});
}else {
$(‘.d1‘).css({‘background-color‘:‘black‘});
?
}
});
$(window).keyup(function (e) {
console.log(e.keyCode);
})
针对百度搜索引擎
//input事件监听输入内容 必须用on触发事件 propertychange 用来兼容ie浏览器的
$(‘#username‘).on(‘input propertychange‘,function(){
console.log($(this).val());
})
//事件冒泡是指多个事件会一直往父级标签触发
$(‘#d1‘).click(function () {
alert(‘父级标签‘)
});
// $(‘#d2‘).click(function () {
// alert(‘子级标签‘);
// //消除事件冒泡方式一
// return false;
//
// });
$(‘#d2‘).click(function (e) {
alert(‘自己标签‘);
e.stopPropagation();
})
//事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,将未来添加进来的某些子标签
自动绑定上事件
//将点击事件委托给父级了,但是$(this)还是当前的点击对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<div class="c1">
<input type="button" value="解压小按钮">
<button class="c2">点击就送</button>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
$(‘:button‘).click(
function () {
alert(‘周雅婷跟我笑,哈哈哈哈哈‘);
var a = $(this).clone(true);
$(‘div‘).append(a);
}
);
$(‘.c1‘).on(‘click‘,‘.c2‘,function () {
alert(‘臭屁在‘);
var a = document.createElement(‘button‘);
$(a).text(‘点击就送‘);
console.log($(this)) //还是我们点击的这个对象
$(a).addClass(‘c2‘);
$(‘div‘).append(a);
})
</script>
</body>
</html>
script 统一放在最下面
window.onload = function(){}
// window.onload = function () {
// $(‘.c1‘).click(function(){
// $(this).css({‘background-color‘:‘blue‘});
// })
// }
1.$(document).ready(function(){})
2. $(function(){})
$(function () {
$(‘.c1‘).click(function () {
$(this).css({‘background-color‘:‘black‘});
})
})
1.window.onload()函数有覆盖现象,必须等待图片资源加载完成后才能够调用
2.jquery的这个入口函数没有函数覆盖现象,文档加载完就可以使用,建议使用次函数
?
标签：title html ready loaded 匿名 事件 span 引擎 atom
原文地址：https://www.cnblogs.com/learn-record/p/14615685.html
