jquery引入插件的步骤（html5零基础入门教程）
&<!DOCTYPE html&>
&<html&>
&<head&>
&<meta charset=&”utf-8&″&>
&<title&>33-jquery移入移出事件&</title&>
&<style type=&”text/css&”&> /*样式开始*/
*{ /*表示 所选取的该元素以及其所属的子元素 */
margin: 0; /*外边距*/
padding: 0; /*内边距*/
}
.father{ /* 选中class叫父亲的p盒子*/
width: 200px; /* 宽：200像素*/
height: 200px; /* 高：200像素*/
background: red; /* 背景：红色*/
}
.son{ /* 选中class叫儿子的p盒子*/
width: 100px; /* 宽：100像素*/
height: 100px; /* 高：100像素*/
background: #0000FF; /* 背景：蓝色*/
}
&</style&>
&<script src=&”
../static/js/jquery-3.6.0.js&”&>&</script&> &<!&–引入jQuery 否则后面的$符号不能用 &–&>
&<script&>
$(function(){ /* jQuery 的入口函数 */
// alert(&‘入口函数&’) /* 入口函数没有错误就会弹出 */
/*
mouseover mouseout 事件， 子元素被移入移出，也会触发父元素的事件
*/
// $(&“.father&”).mouseover(function(){ /*选择class叫父亲的p的鼠标移入事件*/
// alert(&‘鼠标进入了父亲的盒子区域&’) /* 弹出窗口&’鼠标进入了父亲的盒子区域&’*/
// })
// $(&“.father&”).mouseout(function(){ /*选择class叫父亲的p的鼠标移出事件*/
// alert(&‘鼠标移出了父亲的盒子区域&’) /* 弹出窗口&’鼠标移出了父亲的盒子区域&’*/
// })
/*mouseenter mouseleave 事件， 子元素被移入移出，不会触发父元素的事件 */
// $(&“.father&”).mouseenter(function(){ /*选择class叫父亲的p的鼠标移入事件*/
// alert(&‘鼠标进入了父亲的盒子区域&’) /* 弹出窗口&’鼠标进入了父亲的盒子区域&’*/
// })
// $(&“.father&”).mouseleave(function(){ /*选择class叫父亲的p的鼠标移出事件*/
// alert(&‘鼠标移出了父亲的盒子区域&’) /* 弹出窗口&’鼠标移出了父亲的盒子区域&’*/
// })
// $(&“.father&”).hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/
// console.log(&‘鼠标移入了&’) /* 移入后调用*/
// }, function(){
// console.log(&‘鼠标移出了&’) /* 移出后调用*/
// })
$(&“.father&”).hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/
console.log(&‘鼠标移入移出了&’) /*鼠标移入和移出都监听了*/
})
})
&</script&>
&</head&>
&<body&>
&<p class=&”father&”&> &<!&– class叫父亲的p盒子 &–&>
&<p class=&”son&”&> &<!&– class叫儿子的p盒子 &–&>
&</p&>
&</p&>
&</body&>
&</html&>