Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jquery基础</title> <style> .hello,p{ width: 200px; height: 200px; background-color: aqua; text-align: center; line-height: 200px; margin-bottom: 10px; } textarea{ width: 400px; height: 200px; border-radius: 8px; resize: none; outline: none; padding: 5px; } </style> <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> --> <script src="js/jq_3.3.1_mi.js"></script> <script> $(function(){ // $('.but').click(function(){ // $('.hello').css('display','none') // }) // $('#but').click(function(){ // $('.hello').show(1000) // }) // 类型选择器 // $(':button').click(function(){ // $('.hello').css('background','blue') // }) $('button.int').click(function(){ $('.hello').text('我不好') }) // 鼠标移入 $('p').mouseover(function(){ $(this).text('你又不认识').css('background','yellow') }) // 鼠标移出 $('p').mouseleave(function(){ $(this).text('再见').css('background','aqua') }) // * 选择所有元素 $('input').click(function(){ $('*').hide() }) $('textarea').focus(function(){ $(this).css('border','1px solid red') }) }) </script> </head> <body> <div class="hello"> 你好啊 </div> <button class="but">点我隐藏</button> <button id="but">点我显示</button> <button class="int">点我惊喜</button> <p>你是谁</p> <form> <textarea></textarea> </form> <input type="button" value="清空"> </body> </html>
点击 "运行实例" 按钮查看在线实例