<!DOCTYPE html> <html> <head> <title>jquery</title> <meta charset="utf-8"> <!-- 引入jquery库和bootstrap的css库 --> <script src="static/jquery-3.3.1.min.js"></script> <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css"> <div class="container"> <div id="alertbox" class="alert alert-success" role="alert">这是警告框</div> </div> </head> <body> <!-- ①按钮和表单元素 --> <button id="btn1" class="btn btn-info">按钮</button> <form id="form1" action="http://www.baidu.com/s"> <input type="text" id="search1" name="wd"> <input type="submit" name="提交"> </form> <!-- ②通过按钮提交内容到某段内容id=content中并累加 --> <div class="alert alert-success" id="content"></div> <input type="text" id="input-text" name=""> <button class="btn btn-default" id='submit-btn'>发送</button> <script type="text/javascript"> /* 注意：js代码必须在获取的元素以后加载，否则无法正常获取元素 jquery的语法 $(选择元素).操作方法().操作方法2() 选择元素和我们的css语法一致 操作方法： .show 显示 .hide 隐藏 可以传入一个毫秒值 产生动画 .html() 修改元素标签内的内容 .html() 获取标签内部的值 .html(xxx) 把标签内部的值 设置为xxx .on 绑定事件(时间类型，触发函数) .val 获取或者设置输入框的值 .val() 获取输入框的值 .val(xxx) 把输入框的值 设置为xxx */ // ①jquery实现隐藏3秒，和展示动画效果1秒展示 /*$('#alertbox').hide(3000).show(1000); // 赋值html $('#alertbox').html('heihei'); // 赋值输入框 $('#alertbox').html('username: <input type="text" value="username" />');*/ //触发点击事件 /*$('#btn1').on('click',function(){ $('#alertbox').html('username: <input type="text" value="username" />').hide(2000); // alert('jack') })*/ //通过val赋值 /*$('#btn1').on('click',function(){ $('#search1').val('51reboot'); }) $('#form1').on('submit',function(){ if ($('#search1').val() == "51reboot"){ alert('go'); //return false是终止submit事件 return false; } })*/ //②通过按钮提交内容到某段内容中并累加 $('#submit-btn').on('click', function(){ var oriText = $('#input-text').val() var oriContent = $('#content').html() $('#content').html(oriContent + '<br/>' + oriText) //清除输入框的内容 $('#input-text').val('') }) </script> </body> </html>