摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jqu
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.3.1.js"></script> <style type="text/css"> a{ color: red; width: 100px; height: 100px; display: block; background-color: #ccc; float: left; margin-left: 30px; line-height: 100px; text-align: center; text-decoration: none; border-radius: 50px; } </style> <script type="text/javascript"> function change(tag) { var leng=document.getElementsByTagName(tag).length; for(var i=0;i<leng;i++) { document.getElementsByTagName(tag)[i].style.backgroundColor = 'rgb(' + Math.floor(Math.random()*256)+','+ Math.floor(Math.random()*256)+',' +Math.floor(Math.random()*256)+')' } } $(document).ready(function(){ change('a'); $('a').mouseover(function(){ $bg = $(this).css('backgroundColor'); $(this).css("box-shadow","0px 0px 20px "+$bg); $(this).css("border-radius","20px"); }) $('a').mouseleave(function(){ $bg = $(this).css('backgroundColor'); $(this).css("box-shadow","none"); $(this).css("border-radius","50px"); }) }) </script> </head> <body> <a href="#">a</a> <a href="#">b</a> <a href="#">c</a> <a href="#">d</a> </body> </html>
经过本案例学习发现dom的功能好强大,课外还需要多多练习让dom里的功能运用到得心应手。
批改老师:韦小宝批改时间:2018-12-09 09:11:15
老师总结:写的很不错!总得一个说是jquery很强大!哦不对,应该是js很强大!课后多多了解jquery,你会发现更牛X的东西哦!