jQuery tutorial 10 - form element selector

Whether submitting or transferring data, the role of form elements in dynamic interactive pages is very important. jQuery adds a form selector, which makes it very convenient to get a certain type of form element.

Specific method description of form selector:

Be careful:

In addition to 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 property filters. For example:

   $(':password') == $('[type=password]');

Code example:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Child element filter selector</title>
    <style> 
        input{
            display: block;
            margin: 10px;
            padding:10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>Child element filter selector</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 type"/>
            <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">
        //Find all input, textarea, select, and button elements
        //: the input selector basically selects all form controls
        $(':input').css("border", "1px groove red"); 
    </script>

    <script type="text/javascript">
        //Match input elements of type text in all input elements
        $('input:text').css("background", "#A2CD5A");
    </script>

    <script type="text/javascript">
        //Match input elements of type password in all input elements
        $('input:password').css("background", "yellow");
    </script>

    <script type="text/javascript">
        //Match radio buttons in all input elements and check
        $('input:radio').attr('checked','true');
    </script>

    <script type="text/javascript">
        //Match the check buttons in all input elements and select
        $('input:checkbox').attr('checked','true'); 
    </script>

    <script type="text/javascript">
        //Match submitted buttons in all input elements, change the background color
        $('input:submit').css("background", "#C6E2FF");
    </script>

    <script type="text/javascript">
        //Match elements of image type in all input elements, modify background color
        $('input:image').css("background", "#F4A460");
    </script>

    <script type="text/javascript">
        //Match all input elements with button type
        $('input:button').css("background", "red");
    </script>

    <script type="text/javascript">
        //Match all input elements with type file
        $('input:file').css("background", "#CD1076");
    </script>

</body>
</html>

Keywords: Javascript JQuery

Added by mottwsc on Tue, 31 Mar 2020 12:47:04 +0300

Programming VIP

jQuery tutorial 10 - form element selector

Popular Keywords