常见js相应样式

来源：互联网发布：linux如何开启ping 编辑：程序博客网时间：2024/04/27 19:09

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

阅读全文

0 0