学习过程中遇到一些前端样式与js互动的效果,在这里记录一下。供以后使用。
1,bootstrap按钮下拉菜单,点击选项改变按钮的显示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 默认的分页</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group dropup" style="float:left; width:30px; margin-left: 10px;margin-top: 200px">
<button type="button" id="btn1" class="btn btn-default dropdown-toggle" data-toggle="dropdown">10
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width:50px" id="ul1">
<li onclick="changeShowNum('20')"><a>20</a></li>
<li onclick="changeShowNum(30)"><a>30</a></li>
<li onclick="changeShowNum(40)"><a>40</a></li>
<li onclick="changeShowNum(50)"><a>50</a></li>
</ul>
</div>
<script>
function changeShowNum(num) { //改变每页的显示数
$("#btn1").text(num+ ' ');
$("#btn1").append("<span class=\"caret\"></span>");
}
</script>
</body>
</html>
$(“#btn1”).text(“123”) : 将id为btn1的显示内容修改为123。
向id为btn1的标签中添加新的标签元素。
2,使用jQuery改变form表单的action值后再提交无法修改提交的url
例如:原始的表单如下
<form id="form_id" action="example.do">
</form>
使用(form_id).attr("action", "example.do?a=1&b=2")。改变了action然后再使用(forn_id).submit()提交表单时,服务器接收到的url还是example.do。并不会有参数。原因是:在表单中没有a、b两个变量。
3,注册时用户名为空时提示框样式
当用户名文本框为空时,在文本框右侧弹出“用户名不能为空”的提示。当鼠标聚焦在用户名输入框时,销毁提示内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 100px 50px 10px;" >
<input type="text" id="username" name="username" data-trigger="hover" data-toggle="popover" data-placement="right" data-content="" class="form-control input-lg" placeholder="用户名">
<button type="button" id="btn" onclick="regsiter()" class="btn btn-warning" >
注册
</button>
</div>
<script>
function regsiter() {
if($("#username").val() == '') {
$("#username").attr("data-content", "用户名不能为空");
$("#username").popover('show');
}
}
$(document).ready(function() {
$("#username").focus(function() {
$("#username").popover('destroy');
})
})
</script>
</body>
</html>