jQuery表单过滤选择器

来源：互联网发布：c语言strncpy 编辑：程序博客网时间：2024/05/23 01:20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>表单过滤选择器</title>    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>    <style type="text/css">    body{    font-family: "Microsoft YaHei"    }    .cGreen{background-color: #4CA902}    .cPink{background-color: #ED4A9F}    .cBlue{background-color: #0092E7}    .cCyan{background-color: #01A6A2}    .cYellow{background-color: #DCA112}    .cRed{background-color: #B7103B}    .cPurple{background-color: #792F7C}    .cBlack{background-color: #110F10}    .hide{display: none;}    </style>    <script type="text/javascript">        $(document).ready(function(){    $("#btn1").click(function(){    console.log($(":input"));    console.log($(":input").length);        //$(":input").val("测试");    });    $("#btn2").click(function(){    console.log($(":text").length);    });    $("#btn3").click(function(){    console.log($(":password"));    });    $("#btn4").click(function(){    console.log($(":radio"));        });    $("#btn5").click(function(){    console.log($(":checkbox"));    });    $("#btn6").click(function(){    console.log($(":submit"));    });    $("#btn7").click(function(){    console.log($(":image"));    });    $("#btn8").click(function(){    console.log($(":reset"));    });    $("#btn9").click(function(){    console.log($(":button"));    });    $("#btn10").click(function(){    console.log($(":file"));    });    $("#btn11").click(function(){    //:hidden选取隐藏input元素，将隐藏div的文本显示出来    console.log( $("input:hidden").val() );    $("div:hidden").show();  // 显示div    });    });    </script>  </head>    <body>    <input type="text" name="text1" value="单行文本输入框">    <input type="password" value="密码输入框">    <textarea rows="3" cols="10">多行文本输入区域textarea</textarea>    <select>    <option>软件工程</option>    <option>编译原理</option>    <option>数据库原理</option>    </select>    <select multiple="multiple">    <option>软件工程</option>    <option>编译原理</option>    <option>数据库原理</option>    </select>    <br><br>    <input type="radio" name="country" value="chn">中国    <input type="radio" name="country" value="usa">美国          <input type="checkbox" name="language" value="Java">Java    <input type="checkbox" name="language" value="IOS">IOS    <input type="checkbox" name="language" value="Android">Android    <br><br>    <input type="submit" value="提交按钮">    <input type="image" src="logo.png">---    <img alt="图片" src="logo.png">    <input type="reset" value="重置按钮">    <input type="file" name="file">    <button>button按钮</button>    <input type="hidden" name="hideInput" value="you found it">    <div style="display:none">隐藏div</div>    <br><br>    <hr>    <input type="button" id="btn1" value=":input选取所有input元素">    <input type="button" id="btn2" value=":text选取单行文本框">    <input type="button" id="btn3" value=":password选取密码框">    <input type="button" id="btn4" value=":radio选取单选radio元素">    <input type="button" id="btn5" value=":checkbox选取复选checkbox元素">    <input type="button" id="btn6" value=":submit选取提交按钮submit元素">    <input type="button" id="btn7" value=":image选取图片image元素">    <input type="button" id="btn8" value=":reset选取重置按钮reset元素">    <input type="button" id="btn9" value=":button选取按钮元素">    <input type="button" id="btn10" value=":file选取文件元素">    <input type="button" id="btn11" value=":hidden选取隐藏input元素，将隐藏div的文本显示出来">  </body></html>
0 0