第二部分进入Jquery的事件请看下面效果。
代码如图所示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.6.js"></script> <style> *{ background-image: linear-gradient(0deg, bisque, whitesmoke); font-size: 25px; text-shadow: 1px 1px 1px pink; font-weight: bolder; border: lavender 1px; } .top{ height: auto; width: 100%; margin-left: 0; background-color: paleturquoise; /* position: fixed;*/ top: 2px; margin-bottom: 6%; } .top.li{ width: auto; list-style-type: none; white-space: nowrap; overflow: hidden; margin-left: 6%; padding: 0px; } .top li a{ display: block; color: #FF0000; background-color: whitesmoke; text-align: center; font-size: 18px; padding: 4px; overflow: hidden; text-decoration: none; } #panel,#flip { padding:5px; text-align:center; border-radius: 9%; background-color: paleturquoise; border:solid 3px #c3c3c3; font-size: 16px; } #panel { padding:50px; display:none; font-size: 29px; color:black; } .qw{ text-align: center; } </style> <title>主界面</title> </head> <body> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); $(document).click(function () { $("#panel").css("font-size","26px"); alert("欢迎来到Hellow World see you 程序员") }) }); </script> <h1 style="text-align: center">主界面运行窗口</h1> <div id="flip">点我，显示或隐藏面板。</div> <div id="panel"> Jquery事件总结 </div> <hr> <div class="top"> <center> <ol> <li><a href="jquery事件对象.html">jquery事件对象</a></li> <li><a href="动画一.html">动画一</a></li> <li><a href="复合事件1%20(1).html">复合事件1%20(1</a></li> <li><a href="复合事件1%20(2).html">复合事件1%20(2)</a></li> <li><a href="委托事件.html"></a>委托事件</li> <li><a href="绑定事件2.html"></a>绑定事件2</li> <li><a href="绑定事件on1%20(1).html">绑定事件on1%20(1)</a></li> <li><a href="绑定事件on1%20(2).html">绑定事件on1%20(2)</a></li> <li><a href="绑定事件on1%20(3).html">绑定事件on1%20(3)</a></li> <li><a href="自发事件.html">自发事件</a></li> <li><a href="表单事件.html">表单事件</a></li> <li><a href="解绑事件.html">解绑事件</a>解绑事件</li> <li><a href="解绑事件二.html"></a>解绑事件二</li> <li><a href="键盘的按下抬出事件.html">键盘的按下抬出事件</a></li> <li><a href="鼠标事件一.html"></a>鼠标事件一</li> <li><a href="鼠标单机一.html"></a>鼠标单机一</li> <li><a href="鼠标的移入移出事件.html">鼠标的移入移出事件</a></li> </ol> </center> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery事件对象</title> <style> #one{ height: 400px; width: 400px; font-size: 30px; } </style> <script src="../jquery-3.6.js"></script> </head> <body> <div id="one" class="one" style="height: 500px;width: 600px;background: red;margin: auto"> <input type="button" value="我是按钮" id="btn" style="height: 50px;width: 100px;padding: 2px"> <a href="https://www.baidu.com">百度以下</a> </div> <script> $(function () { $('div').on('click',function (e) { console.log(e); console.log('坐标值'+e.screenX+':'+e.screenY); console.log('坐标值'+e.clientX+':'+e.clientY); alert("div单机了") }); $('btn').on('click',function () { alert("事件被单机了"); e.stopPropagation(); e.preventDefault();//阻止null return false; }); $(document).on(('keydown',function (e) { console.log(e.keyCode); console.log('div'); })) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../jquery-3.6.js"></script> <title>jquery效果一</title> </head> <script type="text/javascript"> $(document).ready(function() { $(".btn1").click(function(){ $("#box").animate({height:"500px"}); }); $(".btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <h1>animate函数</h1> <button class="btn1">下</button> <button class="btn2">上</button> <hr> <p><button id="start">下左上右</button><button id="stop">Stop Animation</button></p> <div id="box1" style="background:green;height:100px;width:100px;position:relative"> </div> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box1").animate({height:200},"slow"); $("#box1").animate({width:500},"slow"); $("#box1").queue(function () { $(this).css("background-color","yellow"); $(this).dequeue(); }); $("#box1").animate({height:100},"slow"); $("#box1").animate({width:100},"slow"); }); $("#stop").click(function(){ $("#box1").clearQueue(); }); }); </script> <hr> <script type="text/javascript"> $(document).ready(function(){ $(".btn3").click(function(){ $("p").fadeOut() }); $(".btn4").click(function(){ $("p").fadeIn(); }); }); </script> <p>no pains no gainx</p> <button class="btn3">Hide</button> <button class="btn4">Show</button> <hr> <script type="text/javascript"> $(document).ready(function(){ $(".btn5").click(function(){ $("h1").fadeTo(100,0.4); }); }); </script> <h1>This is a paragraph.</h1> <button class="btn5">FadeTo</button> <hr> <strong>This is a paragraph.</strong> <button class="btn6">Hide</button> <button class="btn7">Show</button> <script type="text/javascript"> $(document).ready(function(){ $(".btn6").click(function(){ $("p").slideUp(1000); }); $(".btn7").click(function(){ $("p").slideDown(1000); }); }); </script> <br> <article> <script type="text/javascript"> $(document).ready(function(){ $(".btn8").click(function(){ $("h1").toggle(); }); }); </script> <h1 style="color: #00BFFF">This is a paragraph.</h1> <button class="btn8">Toggle</button> </article> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合事件</title> <script src="jquery-3.6.js"></script> <!--<script src="jquery-1.4.2.min.js"></script>--> <style> div { width: 100px; height: 100px; background-color: #000; margin: 10px 0; } .active { background-color: pink; } </style> </head> <body> <div></div> <input type="button" value="我是按钮" id="btn"> <p>一会显示一会隐藏</p> <script> $(function () { // 1.复合事件hover() 相当于mouseover与mouseout事件的组合 // $('div').hover(function () { // $(this).addClass('active'); // }, function () { // $(this).removeClass('active'); // }); // $('div').hover(function () { // $(this).toggleClass('active'); // }); // 2.复合事件toggle() 模拟鼠标连续click事件 不需要绑定click事件 // $('div').toggle(function () { // $(this).css('background-color', 'red'); // }, function () { // $(this).css('background-color', 'green'); // }, function () { // $(this).css('background-color', 'blue'); // }); // 3.toggleClass()可以对样式进行切换 $('#btn').on('click', function () { // $('p').toggleClass('active'); // 切换样式 $('p').toggle(); // 显示隐藏 }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合事件hover()</title> <script src="jquery-3.6.js"></script> <script> $(function () { // $('.nav>li').hover(function () { // $(this).children('ul').show(); // }, function () { // $(this).children('ul').hide(); // }); $('.nav>li').hover(function () { $(this).children('ul').toggle(); }); }); </script> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: #000; } .nav { margin: 100px 300px; } .nav > li { float: left; } .nav a { display: block; /*padding: 20px;*/ width: 100px; height: 60px; line-height: 60px;; text-align: center; } .nav > li > a:hover { background-color: pink; border: 1px solid pink; } .nav ul li { border: 1px solid khaki; border-top: none; } .nav ul li:hover { background-color: rgba(255, 192, 203, 0.5); } .nav ul { display: none; } /*.nav li:hover ul {*/ /*display: block;*/ /*}*/ </style> </head> <body> <ul class="nav"> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <script src="../jquery-3.6.js"></script> <meta charset="UTF-8"> <style> *{ margin: 0px; padding: 0px; float: left; } li{ border-radius: 50%; height: 200px; width: 200px; border: solid 5px green; display: block; line-height: 200px; text-align: center; } </style> <title>委托事件</title> </head> <body> <ul> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> <strong><li>on()我是委托事件哦</li></strong> </ul> <script> $(function () { /*只有ul绑定了事件*/ $('ul').on('click','li',function () { $('ul').css('background-color','cyan'); alert('鼠标的移入移出事件哦'); }); /*委托事件的写法*/ $('ul li').on('click','li',function () { $(this).css('background-color','green'); }); $('ul li').mouseover(function () { $(this).css('background-color','pink'); }); $('ul li').mouseleave(function () { $(this).css('background-color','yellow'); }); var li=$('<li>我是创建的元素</li>'); $('ul').append(li); }); </script> <hr> <script> </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ padding: 0px; margin: 0px; float: left; } div{ height: 200px; width: 200px; border: solid 5px red; background: black; } .two{ background: white; } </style> <title>绑定事件二</title> <script src="../jquery-3.6.js"></script> </head> <body> <input type="button" value="按钮1" id="btn"> <br> <div class="one"></div> <span style=""> 我是span标签</span> <script> $(function () { $('div').on('click',function () { /* alert('我是点击事情')*/ }); $('#btn').click(function () { alert("创建div"); var $divnew =$('<div class="two"></div>'); $('body').append($divnew) }); $('body').on('click','div span',function () { console.log('我是单机事件哦哦') }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>on()绑定事件</title> <script src="jquery-3.6.js"></script> </head> <body> <ul> <li>on()委托事件 支持动态注册</li> <li>on()委托事件 支持动态注册</li> <li>on()委托事件 支持动态注册</li> <li>on()委托事件 支持动态注册</li> <li>on()委托事件 支持动态注册</li> </ul> <ol> </ol> <script> $(function () { // on可以实现事件委派 // $('li').click() 隐式迭代 给每个li都绑定了点击事件 // 只给ul绑定了事件 触发的对象是li $('ul').on('click', 'li', function () { alert('li被点击了'); }); // on()可以给动态创建的元素绑定事件 $('ol li').click(function () { alert(11); }); // $('ol').on('click', 'li', function () { // alert(12); // }); // 动态创建新元素ol li var $li = $('<li style="color: red">我是新创建的元素</li>'); $('ol').append($li); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>on绑定事件</title> <script src="jquery-3.6.js"></script> <style> div { width: 100px; height: 100px; background-color: #000; } .current { background-color: pink; } </style> </head> <body> <div> </div> <script> $(function () { // 1.on绑定单个事件 // $('div').on('click', function () { // $(this).css('background-color', 'red'); // }); // // // 2.on绑定多个事件处理程序 // $('div').on({ // click: function () { // $(this).css('background-color', 'red'); // }, // mouseenter: function () { // $(this).css('background-color', 'green'); // }, // mouseleave: function () { // $(this).css('background-color', 'blue'); // } // }); // 3.单个事件注册 鼠标移入添加类 鼠标移出删除类 // $('div').mouseenter(function () { // $(this).addClass('current'); // }); // // $('div').mouseleave(function () { // $(this).removeClass('current'); // }); // on可以绑定1个或者多个事件处理程序 如果事件处理程序相同 多个事件空格分开 $('div').on('mouseenter mouseleave', function () { $(this).toggleClass('current'); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动触发事件</title> <script src="jQuery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div></div> <input type="text"> <script> $(function () { // on绑定点击事件 $('div').on('click', function () { alert('11'); }); // 自动触发事件 // 写法1 元素.事件 // $('div').click(); // 写法2 元素.trigger('事件') // $('div').trigger('click'); //写法3 元素.triggerHandler('事件') // $('div').triggerHandler('click'); // 文本框的默认行为 获得焦点 光标会闪烁 $('input').focus(function () { $(this).val('请输入文字'); }); // 写法1.会触发元素的默认行为 // $('input').focus(); // 写法2.会触发元素的默认行为 // $('input').trigger('focus'); // 写法3.不会触发元素的默认行为 $('input').triggerHandler('focus'); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单事件</title> <script src="../jquery-3.6.js"></script> </head> <body> <p><input type="text"></p> <p><input type="password"></p> <script> /*获取焦点*/ $('input').focus(function () { $(this).css('background-color', 'pink'); /*失去焦点*/ $('input').blur(function () { $(this).css('background-color', 'red'); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解绑事件</title> <style> div{ height: 200px; width: 200px; background: #9198e5; } </style> <script src="../jquery-3.6.js"></script> </head> <body> <div></div> <ul> <li>解绑事件哦一</li> <li>解绑事件哦一</li> <li>解绑事件哦一</li> <li>解绑事件哦一</li> <li>解绑事件哦一</li> </ul> <script> $(function () { $('div').on('click', function () { $(this).css('background-color', 'red'); }); $('div').mouseover(function () { $(this).css('background-color', 'pink'); }) $('div').mouseleave(function () { $(this).css('background-color', 'yellow'); }); /*解绑事件*/ /* $('div').off();/!*移除所有事件*!/*/ $('div').off('mouseleave'); /*事件委托*/ $('ul').on('click','li',function () { alert("被单机了") }); /*移除委托事件*/ /* $(ul).off('click','li');*/ /*一次事件*/ $('div').one('click',function () { console.log('div以被单机了'); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>off()解绑事件</title> <script src="jquery-3.6.js"></script> <style> div { width: 100px; height: 100px; background-color:bisque; } </style> </head> <body> <div></div> <ul> <li>off解绑事件</li> <li>off解绑事件</li> <li>off解绑事件</li> <li>off解绑事件</li> <li>off解绑事件</li> </ul> <script> $(function () { //1.on 绑定多个事件 /$('div').on({ // click: function () { // console.log('div被点击了'); // }, // mouseenter: function () { // console.log('鼠标进入了'); // }, // mouseleave: function () { // console.log('鼠标离开了'); // } // }); // 2.on 事件委派 $('ul').on('click', 'li', function () { console.log('li被点击了'); }); // 3.off()解绑 // $('div').off(); // 移除div身上所有的事件 // $('div').off('click'); // 移除div身上的点击事件 $('div').off('click mouseenter'); // 移除div身上的点击和鼠标进入事件 事件用空格隔开 $('ul').off('click', 'li'); // 移除事件委派 // 4.one()只能触发一次 $('div').one('click', function () { console.log('div被点击了'); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>off()解绑事件</title> <script src="jquery-3.6.js"></script> <style> div { width: 100px; height: 100px; background-color:bisque; } </style> </head> <body> <div></div> <ul> <li>off解绑事件</li> <li>off解绑事件</li> <li>off解绑事件</li> <li>off解绑事件</li> <li>off解绑事件</li> </ul> <script> $(function () { //1.on 绑定多个事件 /$('div').on({ // click: function () { // console.log('div被点击了'); // }, // mouseenter: function () { // console.log('鼠标进入了'); // }, // mouseleave: function () { // console.log('鼠标离开了'); // } // }); // 2.on 事件委派 $('ul').on('click', 'li', function () { console.log('li被点击了'); }); // 3.off()解绑 // $('div').off(); // 移除div身上所有的事件 // $('div').off('click'); // 移除div身上的点击事件 $('div').off('click mouseenter'); // 移除div身上的点击和鼠标进入事件 事件用空格隔开 $('ul').off('click', 'li'); // 移除事件委派 // 4.one()只能触发一次 $('div').one('click', function () { console.log('div被点击了'); }); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--导入jquery文件--> <style> *{ padding: 0px; margin: 0px; } div{ font-size: 20px; height: 200px; width: 150px; background: gold; float: left; padding: 2px; margin: 2px; border-right: #0099FF; display: block; } article{ height:831px; width: 475px; margin: auto 10px; border: 100px; border-right: red 5px; border-left: #ffb3c4; border-top: #00FF99; border-bottom: #0099FF; } article1{ margin: auto 10px; border: 100px; border-right: red 5px; border-left: #ffb3c4; border-top: #00FF99; border-bottom: #0099FF; float: contour; } #wer{ height: 200px; width: 200px; } </style> <script src="../jquery-3.6.js"></script> <title>综合实践案例</title> </head> <body> <article> <div>盒子一</div> <div>盒子二</div> <div>盒子三</div> <div>盒子四</div> <div>盒子A一</div> <div>盒子A二</div> <div>盒子A三</div> <div>盒子A四</div> <div>盒子B一</div> <div>盒子B二</div> <div>盒子B三</div> <div>盒子B四</div> <input type=" " value="text"> <input type="button" value="提交"> <input type="color" value="red"> <input type="password"> <input type="range"> <input type="url"> <input type="tel"> <input type="search"> <input type="email"> <input type="month"> <input type="time"> <input type="checkbox"> <input type="file"> <input type="week"> <script> /* /!*鼠标移入变yellow*!/ $(function () { $('div').mouseenter(function () { $('div').css('background', "yellow"); }); /*鼠标移入变red*/ $(function () { $('div').mouseover(function () { $('div').css('background', "red"); }); /*移出变pink*/ $(function () { $('div').mouseleave(function () { $('div').css('background', "pink"); }); $('div').click(function () { $('div').css('background', "green"); }) /* /!*鼠标移出变绿*!/ $(function () { $('div').mouseout(function () { $('div').css('background', "#00A40C"); });*/ /*点击变yellow*/ /* $(function () { $('div').mouseup(function () { $('div').css('background', "red"); }); })*/ /* })*/ /* })*/ }) }); </script> </article> <hr> <article1> 用户名：<input type="text" value=""><br> 密码：<input type="password" value=""> <script src="../cctv/jquery-3.6.js"></script> <script> $(function () { $(document).click(function () { $('input').css('background-color','red'); $('input').keydown(function () { $(this).css('background-color','pink'); }); $('input').keyup(function () { $(this).css('background-color','yellow'); }); $(document).keydown(function () { $(this).css('background-color','yellow'); if (e.keyCode=='13') { alert("提交吗") } }); }) }) </script> </article1> <article2 style="float:right;"> <p><input type="text"></p> <p><input type="password"></p> <script> /*获取焦点*/ $('input').focus(function () { $(this).css('background-color', 'pink'); /*失去焦点*/ $('input').blur(function () { $(this).css('background-color', 'red'); }) }); </script> </article2> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mouseenter mouseover 区别</title> <script src="jquery-3.6.js"></script> <script> $(function () { // mouseover 鼠标进入被选元素以及任意子元素时都会被触发 // $('.nav>li').mouseover(function () { // var i = 0; // $(this).children('ul').show(); // i++; // console.log(i); // }); // mouseenter 鼠标进入被选元素的时候会被触发 进入子元素时不会被触发 // 以后有鼠标移入/移出事件 就用mouseenter/mouseleave $('.nav>li').mouseenter(function () { var i = 0; $(this).children('ul').show(); i++; console.log(i); }); // 鼠标移出 $('.nav>li').mouseleave(function () { $(this).children('ul').hide(); }); }); </script> <style> * { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; color: #000; } .nav { margin: 100px 300px; } .nav > li { float: left; } .nav a { display: block; /*padding: 20px;*/ width: 100px; height: 60px; line-height: 60px;; text-align: center; } .nav > li > a:hover { background-color: pink; border: 1px solid pink; } .nav ul li { border: 1px solid pink; border-top: none; } .nav ul li:hover { background-color: rgba(255, 192, 203, 0.5); } .nav ul { display: none; } /*.nav li:hover ul {*/ /*display: block;*/ /*}*/ </style> </head> <body> <ul class="nav"> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <a href="">一级菜单</a> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../jquery-3.6.js"></script> <script> /* /!*鼠标移入变yellow*!/ $(function () { $('div').mouseenter(function () { $('div').css('background', "yellow"); }); /*鼠标移入变red*/ $(function () { $('div').mouseover(function () { $('div').css('background', "red"); }); /*移出变pink*/ $(function () { $('div').mouseleave(function () { $('div').css('background', "pink"); }); $('div').click(function () { $('div').css('background', "green"); }) /* /!*鼠标移出变绿*!/ $(function () { $('div').mouseout(function () { $('div').css('background', "#00A40C"); });*/ /*/!*点击变yellow*!/ $(function () { $('div').mouseup(function () { $('div').css('background', "yellow"); });*/ /* })*/ /* })*/ }) }); </script> <style> div{ width: 200px; height: 200px; color: #ffb3c4; } </style> <title>鼠标单机事件一</title> </head> <body> <div></div> <p id="p1">hellow word</p> <script> </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框</title> <style> *{ padding: 0px; width: 0px; border: 0px; float: left; } div { float: left; line-height: 100px; text-align: center; font-size: 30px; font-weight: bold; height: 200px; width: 200px; color: #ffb3c4; /* background:green;*/ background-color: #00BFFF; border-radius: 50%; display: block; /*border: 20px inset;*/ } .A{ float: left; border: 10px solid; /* overflow: auto;*/ float: left; } . B{ border: 10px ridge; overflow: revert; } .C{ border: 10px dashed; overflow: hidden; float: left; } .D{ border: 10px ridge; border: 10px outset; overflow: initial; float: left; } .E{ border: 10px groove; border: 10px dotted; overflow: fragments; float: left; } .F{ border: 10px double; overflow: fragments; float: left; } </style> </head> <script src="../jquery-3.6.js"></script> <body> <div class="A">box1</div> <div class="B">box2</div> <div class="C">box3</div> <div class="D">box4</div> <div class="E">box4</div> <div class="F">box5</div> <script> /!*鼠标移入变yellow*!/ $(function () { $('div').mouseenter(function () { $('div').css('background', "yellow"); }); /*鼠标移入变red*/ /* $(function () { $('div').mouseover(function () { $('div').css('background', "red"); });*/ /*移出变pink*/ $(function () { $('div').mouseleave(function () { $('div').css('background', "pink"); }); $('div').click(function () { $('div').css('background', "green"); }) //!*鼠标移出变绿*!/ $(function () { $('div').mouseout(function () { $('div').css('background', "red"); }) }) /* $(function () { $('div').mouseup(function () { $('div').css('background', "yellow"); });*/ /* })*/ /* })*/ }) }); </script> </body> </html>
