1. 新行网首页
  2. 投稿

jquery引入插件的步骤（html5零基础入门教程）

• 投稿 • 阅读 22

jquery引入插件的步骤（html5零基础入门教程）

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>33-jquery移入移出事件</title>

<style type=”text/css”> /*样式开始*/

*{ /*表示 所选取的该元素以及其所属的子元素 */

margin: 0; /*外边距*/

padding: 0; /*内边距*/

}

.father{ /* 选中class叫父亲的div盒子*/

width: 200px; /* 宽：200像素*/

height: 200px; /* 高：200像素*/

background: red; /* 背景：红色*/

}

.son{ /* 选中class叫儿子的div盒子*/

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叫父亲的div的鼠标移入事件*/

// alert(‘鼠标进入了父亲的盒子区域’) /* 弹出窗口’鼠标进入了父亲的盒子区域’*/

// })

jquery引入插件的步骤（html5零基础入门教程）

// $(“.father”).mouseout(function(){ /*选择class叫父亲的div的鼠标移出事件*/

// alert(‘鼠标移出了父亲的盒子区域’) /* 弹出窗口’鼠标移出了父亲的盒子区域’*/

// })

jquery引入插件的步骤（html5零基础入门教程）

/*mouseenter mouseleave 事件， 子元素被移入移出，不会触发父元素的事件 */

// $(“.father”).mouseenter(function(){ /*选择class叫父亲的div的鼠标移入事件*/

// alert(‘鼠标进入了父亲的盒子区域’) /* 弹出窗口’鼠标进入了父亲的盒子区域’*/

// })

// $(“.father”).mouseleave(function(){ /*选择class叫父亲的div的鼠标移出事件*/

// alert(‘鼠标移出了父亲的盒子区域’) /* 弹出窗口’鼠标移出了父亲的盒子区域’*/

// })

// $(“.father”).hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/

// console.log(‘鼠标移入了’) /* 移入后调用*/

// }, function(){

// console.log(‘鼠标移出了’) /* 移出后调用*/

// })

$(“.father”).hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/

console.log(‘鼠标移入移出了’) /*鼠标移入和移出都监听了*/

})

})

</script>

</head>

<body>

<div class=”father”> <!– class叫父亲的div盒子 –>

<div class=”son”> <!– class叫儿子的div盒子 –>

</div>

</div>

</body>

</html>

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/10846.html

赞 (0)
上一篇 2024年11月5日 15:42:15
下一篇 2024年11月5日 16:02:38

相关推荐