jQuery表单过滤选择器

    xiaoxiao2025-05-26  10

    <!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>
    转载请注明原文地址: https://ju.6miu.com/read-1299298.html
    最新回复(0)