表单操作

单行文本框/密码输入框/文本域的案例

获得焦点与失去焦点事件（带有默认值）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
    font:normal 12px/17px Arial;
}
div{
    padding:2px;
} 
input, textarea { 
     width: 12em; 
     border: 1px solid #888;
}
.focus { 
     border: 1px solid #f00; /* 边框变蓝 */
     background: #fcc; /* 背景变成粉红色 */
} 
</style>
<!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
    <form action="" method="post" id="regForm">
        <div>
            <label  for="username">用户名:</label>
            <input id="username" type="text" value="用户名" />
        </div>
        <div>
            <label for="password">密码:</label>
            <input id="password" type="password" value="密码" />
        </div>
    </form>
</body>
</html>

实现代码

<script type="text/javascript">
    $(function(){
        //:input获取表单中所有的input textarea select button
        $(":input").focus(function(){
            //获取焦点后添加样式
            $(this).addClass("focus");
            //文本框中的内容是默认值就清空
            if($(this).val() == this.defaultValue){
                $(this).val('');
            }
        }).blur(function(){
            $(this).removeClass("focus");
            //文本框中的内容为空就设置成默认值
            if($(this).val()==''){
                $(this).val(this.defaultValue);
            }    
        });
    })
</script>

复选框案例

全选与全不选，反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <!--   引入jQuery -->
 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>

<form method="post" action="">
   你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
    <input type="button" id="reverse" value="反  选"/> 
</form>

</body>
</html>

实现代码

 <script type="text/javascript">
$(function(){
    //全选与反选
    $("#CheckedAll").click(function(){
        $("[name=items]:checkbox").attr("checked",this.checked);
    });
    //复选框的联动
    $("[name=items]:chekcbox").click(function(){
        var $temps = $("[name=items]:chekcbox");
        $("#CheckedAll").attr("checked",$temps.length==$temps.filter(":checked").length);
    });
    //反选
    $("#reverse").click(function(){
        var $tmps = $("[name=items]:checkbox");
        $tmps.each(function(i,e){
            this.checked=!this.checked;
        });
        $("#CheckedAll").attr("checked",$tmps.length==$tmps.filter(":checked").length);
    });

});
 </script>

 下拉选框案例

左右两个下拉选，选中添加给对方或者双击添加给对方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span { 
    display:block; 
    margin:2px 2px;
    padding:4px 10px; 
    background:#898989;
    cursor:pointer;
    font-size:12px;
    color:white;
}
</style>
<!--   引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
        </select>
        <div>
            <span id="add" >选中添加到右边&gt;&gt;</span>
            <span id="add_all" >全部添加到右边&gt;&gt;</span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove">&lt;&lt;选中删除到左边</span>
            <span id="remove_all">&lt;&lt;全部删除到左边</span>
        </div>
    </div>
</body>
</html>

实现代码

<script type="text/javascript">
$(function(){
    //左边的下拉选框选中的添加到右边下拉选框中
    $("#add").click(function(){
        $("#select1 option:selected").appendTo("#select2");
    });
    //左边的下拉选框中的所有选项添加到右边下拉选框中
    $("#add_all").click(function(){
        $("#select1 option").appendTo("#select2");
    });
    //左边双击的选项添加到右边
    $("#select1").dblclick(function(){
        $("option:selected",this).appendTo("#select2");
    });
});
</script>

 

posted @ 2018-09-29 11:18  程序员008  阅读(156)  评论(0)    收藏  举报