Jquery | 基础 | 使用 jQuery 表单过滤选择器
Posted 如有一味绝境，非历十方生死
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery | 基础 | 使用 jQuery 表单过滤选择器相关的知识，希望对你有一定的参考价值。
<!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> 使用 jQuery 表单过滤选择器 </title> <script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> body { font-size: 12px; text-align: center } form { width: 241px } textarea, select, input, span { display: none } .btn { border: #666 1px solid; padding: 2px; width: 60px; filter: progid:DXImageTransform.Microsoft. Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8); } .txt { border: #666 1px solid; padding: 3px } .img { padding: 2px; border: solid 1px #ccc } .div { border: solid 1px #ccc; background-color: #eee; padding: 5px } </style> <script type="text/javascript"> $(function () { //重置页面 $("#btn0").click(function () { window.location.reload(); }) // 显示 Input 类型元素的总数量 $("#btn1").click(function () { $("#form1 div").html(" 表单共找出 Input 类型元素 :" + $("#form1 :input").length); $("#form1 div").addClass("div"); }) // 显示所有文本框对象 $("#btn2").click(function () { $("#form1 :text").show(3000); }) // 显示所有密码框对象 $("#btn3").click(function () { $("#form1 :password").show(3000); }) // 显示所有单选按钮对象 $("#btn4").click(function () { $("#form1 :radio").show(3000); $("#form1 #Span1").show(3000); }) // 显示所有复选框对象 $("#btn5").click(function () { $("#form1 :checkbox").show(3000); $("#form1 #Span2").show(3000); }) $("#btn6").click(function () { // 显示所有提交按钮对象 $("#form1 :submit").show(3000); }) $("#btn7").click(function () { // 显示所有图片域对象 $("#form1 :image").show(3000); }) $("#btn8").click(function () { // 显示所有重置按钮对象 $("#form1 :reset").show(3000); }) $("#btn9").click(function () { // 显示所有按钮对象 $("#form1 :button").show(3000); }) $("#btn10").click(function () { // 显示所有文件域对象 $("#form1 :file").show(3000); }) }) </script> </head> <body> <form id="form1"> <textarea class="txt"> TextArea</textarea> <select> <option value="0"> Item 0</option> </select> <input type="text" value="Text" class="txt" /> <input type="password" value="PassWord" class="txt" /> <input type="radio" /><span id="Span1"> Radio</span> <input type="checkbox" /> <span id="Span2"> CheckBox</span> <input type="submit" value="Submit" class="btn" /> <input type="image" title="Image" src="Images/logo.gif" class="img" /> <input type="reset" value="Reset" class="btn" /> <input type="button" value="Button" class="btn" /> <input type="file" title="File" class="txt" /> <div id="divShow"></div> </form> <button id="btn0">重置</button> <br/> <button id="btn1">显示 Input 类型元素的总数量<button> <br/> <button id="btn2">显示所有文本框对象</button> <br/> <button id="btn3">显示所有密码框对象</button> <br/> <button id="btn4">显示所有单选按钮对象</button> <br/> <button id="btn5">显示所有复选框对象</button> <br/> <button id="btn6">显示所有提交按钮对象<button> <br/> <button id="btn7">显示所有图片域对象</button> <br/> <button id="btn8">显示所有重置按钮对象</button> <br/> <button id="btn9">显示所有按钮对象</button> <br/> <button id="btn10">显示所有文件域对象 </button> <br/> </body> </html>
以上是关于Jquery | 基础 | 使用 jQuery 表单过滤选择器的主要内容，如果未能解决你的问题，请参考以下文章