常见js相应样式

最新推荐文章于 2022-06-28 15:41:40 发布

TYOUKAI_

最新推荐文章于 2022-06-28 15:41:40 发布

阅读量407

点赞数

分类专栏：前端文章标签： bootstrap 前端 js

本文链接：https://blog.csdn.net/TYOUKAI_/article/details/78282696

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习过程中遇到一些前端样式与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>