zoukankan      html  css  js  c++  java
  • 测试JQuery中常用的取值方法 包含(input areatext select checkbox radio )


    <!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>
        <title>无标题页</title>

        <script type="text/javascript" src="../javascript/jquery.js"></script>
        <script type="text/javascript" src="../javascript/jquery_selecter.js"></script><!--未调用-->
        <script type="text/javascript" src="../javascript/jquery_checkbox.js"></script><!--未调用-->

        <script language="javascript" type="text/javascript">
    $(document).ready(function (){
        $('#send_ajax').click(function (){
          var params=$('input').serialize();
          $.ajax({
                url :'ajax_exectue.aspx', 
                type:'post',
                dataType:'html',
                data:params, 
                success:update_page,
                error:update_error
                });
           });
    });
        function update_page (xml) {     
           $("#result").css("display","");
           $("#result").html(xml);
         
        }
    function update_error()
    {
        alert("error!");
    }
    function noShow(){   
       $("#result").css("display","none");
    }
    $(function (){
       $('#test_post').click(function (){
                $.post('ajax_exectue.aspx',
                {username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},
                function (data){
               
                $('#result').html(data);
                });
       });
    });

    $(function(){
        $('#test_Sel').click(function(){
            var va = $("#sel").val();
            $("#sel").attr("value","4");
            alert(va);
        });

    });

    $(function(){
       $('#test_Rad').click(function(){
            var v = $("input[name='as'][checked]").val();
            alert(v);
       });

    });

    $(function(){
        $("#checkedAll").click(function(){
            if($(this).attr("checked") == true)
            {
               $("input[name='chk']").each(function(){$(this).attr("checked",true);});
            }
            else
            {
                $("input[name='chk']").each(function(){$(this).attr("checked",false);});
            }
        });
    });

    $(function(){
        $("#test_Chk").click(function(){var f="";
         //var f = $("input[name='chk']").checkbox().val();
         $("input[name='chk']").each(function(){
            if($(this).attr("checked") == true){if(f){f+=",";}f+=$(this).attr("value");}
         });
          alert(f);
        });
    });

    $(function(){
        $("#test").click(function(){
           alert( $("#aera").val());
        });
    });
        </script>

    </head>
    <body>
        <form id="formtest" action="" method="post">
            <span>输入姓名:</span><input type="text" name="username" id="input1" /><br />
            <span>输入年龄:</span><input type="text" name="age" id="input2" /><br />
            <span>输入性别:</span><input type="text" name="sex" id="input3" /><br />
            <span>输入工作:</span><input type="text" name="job" id="input4" />
            <div id="result" style="background: orange; border: 1px solid red; 200px;
                height: 150px; display: none">
                正在反馈信息……</div><br />
            <select size="1" style=" 100px" id="sel" name="sel">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <input type="radio" name="as" value="0" checked />男
            <input type="radio" name="as" value="1" />女
            <br />
            <div class="components-list">
                <input type="checkbox" name="chk" id="checkbox_name_1" value="1" />复选1<br />
                <input type="checkbox" name="chk" id="checkbox_name_2" value="2" />复选2<br />
                <input type="checkbox" name="chk" id="checkbox_name_3" value="3" />复选3<br />
                <input type="checkbox" name="chk" id="checkbox_name_4" value="4" />复选4<br />
                <input type="checkbox" name="checkedAll" id="checkedAll" />全选/取消全选
            </div>
            <div>
                <textarea id="aera" cols="12" rows="3"></textarea>
            </div>
        </form>
        <button id="send_ajax">提交</button>
        <button id="test_post">Post</button>
        <button id="test_Sel">测试Selector</button>
        <button id="test_Rad">测试Radio</button>
        <button id="test_Chk">测试CheckBox</button>
        <button id="test">测试areatext</button>
    </body>
    </html>

  • 相关阅读:
    python脚本 快速执行mapreduce程序
    ArrayList中contains()的使用方法
    利用jstl标签实现国际化
    device eth0 does not seem to be present, delaying initialization
    java中compareTo和compare方法之比较
    CentOS 7 NAT模式LVS搭建
    CentOS 7 DR模式LVS搭建
    CentOS 7 开机延迟解决办法
    CentOS 7 nginx+tomcat9 session处理方案之session复制
    Jumpserver(跳板机、堡垒机)启动jms Django连接mysql数据库报错
  • 原文地址:https://www.cnblogs.com/snlfq2000/p/1393960.html
Copyright © 2011-2022 走看看