jQuery form selector

Whether it is submitting or transmitting data, the role of form elements in dynamic interactive pages is very important. A form selector has been specially added to jQuery, which makes it extremely convenient to obtain a certain type of form element.

Specific method description of the form selector:

Note:

Except for the input filter selector, almost every form category filter corresponds to the type value of an input element. Most form category filters can be replaced with attribute filters. For example, $(':password') == $('[type=password]')

If you want to get the number of form elements in the form, the code is as follows:

$("#form1  :input").length;        //注意与$("#form1   input")的区别

If you want to get the number of form elements in the form The number of single-line text boxes, the code is as follows:

$("#form1   :text").length;

If you want to get the number of password boxes in the form, the code is as follows:

$("#form1   :password").length;

Similarly, the operation of other form selectors is similar to this

Get all <p> elements in the page, and add an onclick event to each <p> element, for example:

$("p").click(function({
            //doing somethingr（操作）
})

Get the element with the id tb, Then look for the tbody tag below it, and then look for the tr element with an even index value under tbody to change its background color (css("property", "value"); used to set the style of the jQuery object). For example:

$('#tb tbody tr:even').css("backgroundColor","#888");

First use the attribute selector, then use the form object attribute to filter, and finally get the jQuery object Length, for example:

$('#btn').click(function(){
                  var   length=$("input[name='check']:checked").length;
                  alert("选中的个数为："+length);
})

Clear all input type="text" text box content: $("input:text").val("");

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> input{ display: block; margin: 10px; padding:10px; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style> input{ display: block; margin: 10px; padding:10px; } </style> </head> <body> <h2>子元素筛选选择器</h2> <h3>input、text、password、radio、checkbox</h3> <h3>submit、image、reset、button、file</h3> <div class="left first-div"> <form> <input type="text" value="text类型"/> <input type="password" value="password"/> <input type="radio"/> <input type="checkbox"/> <input type="submit" /> <input type="image" /> <input type="reset" /> <input type="button" value="Button" /> <input type="file" /> </form> </div> <script type="text/javascript"> //查找所有 input, textarea, select 和 button 元素 //:input 选择器基本上选择所有表单控件 $(':input').css("border", "1px groove red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为text的input元素 $('input:text').css("background", "#A2CD5A"); </script> <script type="text/javascript"> //匹配所有input元素中类型为password的input元素 $('input:password').css("background", "yellow"); </script> <script type="text/javascript"> //匹配所有input元素中的单选按钮,并选中 $('input:radio').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的复选按钮,并选中 $('input:checkbox').attr('checked','true'); </script> <script type="text/javascript"> //匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit').css("background", "#C6E2FF"); </script> <script type="text/javascript"> //匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image').css("background", "#F4A460"); </script> <script type="text/javascript"> //匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red"); </script> <script type="text/javascript"> //匹配所有input元素中类型为file的元素 $('input:file').css("background", "#CD1076"); </script> </body> </html>

submit Reset Code

Automatic operation

jQuery form selector

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]