jQuery练习5——val()练习_$("#scenefiveform).val()-CSDN博客

本文链接：https://blog.csdn.net/cckevincyh/article/details/53164089

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>XXX</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }

            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>
     <!--引入jquery的js库-->
    </head>
    <body>
         <input type="text" value="用户邮箱/手机号/用户名"  id="b1"/><br>
         <input type="password" value=""  id="b2"/><br>
         <input type="button" value="登陆"  id="b3"/>

         <br>   
    </body>
<script language="JavaScript">
    $("#b3").click(function(){
        //defaultValue是DOM对象的属性
        alert($("#b1")[0].defaultValue);
    });

    $("#b1").focus(function(){
        $("#b1").val("");
    });


    $("#b1").blur(function(){
        $("#b1").val($("#b1")[0].defaultValue);
    });


</script>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    </head>
    <body>
        <input type="button" value="使单选下拉框的'2号'被选中"/><br>
        <input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
        <input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
        <input type="button" value="使单选框的'单选2'被选中"/><br>
        <input type="button" value="打印已经被选中的值"><br>
        <br/>

        <select id="one">
          <option>1号</option>
          <option>2号</option>
          <option>3号</option>
        </select>

        <select id="many" multiple="multiple" style="height:120px;">
          <option selected="selected">1号</option>
          <option>2号</option>
          <option>3号</option>
          <option>4号</option>
          <option>5号</option>
          <option selected="selected">6号</option>
        </select>

        <br/>
        <br/>

        <input type="checkbox" name="c" value="check1"/> 复选1
        <input type="checkbox" name="c" value="check2"/> 复选2
        <input type="checkbox" name="c" value="check3"/> 复选3
        <input type="checkbox" name="c" value="check4"/> 复选4
        <br/>
        <input type="radio" name="r" value="radio1"/> 单选1
        <input type="radio" name="r"  value="radio2"/> 单选2
        <input type="radio" name="r"  value="radio3"/> 单选3
    </body>
<script language="JavaScript">      

        //<input type="button" value="使单选下拉框的'2号'被选中"/><br>
        $("input[type=button]:eq(0)").click(function(){
            /*
             * <select id="one">
                  <option>1号</option>
                  <option>2号</option>
                  <option>3号</option>
                </select>
             */
            //方法一：普通方法
            //$("#one option:eq(1)").attr("selected","selected");

            //方法二
            $("#one").val("2号");

        });

        //<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
        $("input[type=button]:eq(1)").click(function(){
            /*
             * <select id="many" multiple="multiple" style="height:120px;">
                  <option selected="selected">1号</option>
                  <option>2号</option>
                  <option>3号</option>
                  <option>4号</option>
                  <option>5号</option>
                  <option selected="selected">6号</option>
                </select>
             */
            //方法一：普通方法
//          $("#many option").each(function(index,domEle){
//              $(domEle).attr("selected",null);
//              if(index==1||index==4){
//                  $(domEle).attr("selected","selected");
//              }
//          });

            //方法二
            $("#many").val(["2号","5号"]);
        });




        //<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>
        $("input[type=button]:eq(2)").click(function(){
            /*
             * <input type="checkbox" name="c" value="check1"/> 复选1
                <input type="checkbox" name="c" value="check2"/> 复选2
                <input type="checkbox" name="c" value="check3"/> 复选3
                <input type="checkbox" name="c" value="check4"/> 复选4
             */
            //方法一：普通方法
//          $("input[type=checkbox]").each(function(index,domEle){
//              if(index==1||index==3){
//                  $(domEle).attr("checked","checked");
//              }
//          });

            //方法二：利用val()方法为多选框赋值，传入的参数是多选框的value属性的值
            $("input[type=checkbox]").val(["check2","check4"]);


        });

        //<input type="button" value="使单选框的'单选2'被选中"/><br>
        $("input[type=button]:eq(3)").click(function(){
            /*
             * <input type="radio" name="r" value="radio1"/> 单选1
                <input type="radio" name="r"  value="radio2"/> 单选2
                <input type="radio" name="r"  value="radio3"/> 单选3
             */
            //方法一：普通方法
//          $("input[type=radio]").each(function(index,domEle){
//              if(index==1){
//                  $(domEle).attr("checked","checked");
//              }
//          });

//          $("input[type=radio]:eq(1)").attr("checked","checked");

            //方法二
            //利用val()方法为多选框和单选框赋值的时候，无论赋值是多个还是一个，都需要利用"[]"包裹起来
            $("input[type=radio]").val(["radio2"]);

        });

        //<input type="button" value="打印已经被选中的值"><br>
    $("input[type=button]:eq(4)").click(function(){
                $("select option:selected").each(function(index,domEle){
                    alert($(domEle).text());
                });

                //多个属性过滤选择器使用时，是交集，不是并集
    //          $("input[type=checkbox][type=radio]")

                $("input:checked").each(function(index,domEle){
                    alert($(domEle).val());
                });

            });


</script>

</html>

这里写图片描述