<!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>
浙公网安备 33010602011771号