Filter Selectors

The following table lists the filter selectors

Type	Description
:animated	Selects elements that are animated
:eq()	Selects elements that equal
:even	Selects even elements
:first	Selects the fi rst element
:gt()	Selects elements greater than a value
:header	Selects all elements that are headers, like h1, h2, h3 and so on.
:last	Selects the last element
:lt()	Selects elements less than
:not()	Selects elements that don't equal a value
:odd	Selects the odd elements

Filtering Forms

jQuery contains filters that make it easy to select form elements.

The following table summarizes all of the different form filters.

Filter	Description
:button	Selects all button elements and elements of type button.
:checkbox	Selects all elements of type checkbox.
:checked	Selects all elements that are checked.
:disabled	Selects all elements that are disabled.
:enabled	Selects all elements that are enabled.
:file	Selects all elements of type fi le.
:image	Selects all elements of type image.
:input	Selects all input, text area, select and button elements.
:password	Selects all elements of type password.
:radio	Selects all elements of type radio.
:reset	Selects all elements of type reset.
:selected	Selects all elements that are selected.
:submit	Selects all elements of type submit.
:text	Selects all elements of type text.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var n = $(':input').length; 
                document.writeln(n); 
            });
        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" /> 
            <input type="hidden" /> 
            <input type="password" /> 
            <input type="radio" /> 
            <input type="reset" /> 
            <input type="submit" /> 
            <input type="image" /> 
            <input type="file" /> 
            <input type="checkbox" /> 
            <input type="reset" /> 
            <input type="button" value="hit me"/> 
            <button>Hit me too</button> 
            <select>
                <option>floor 1</option> 
                <option>floor 2</option> 
            </select>
            <textarea></textarea>
        </form> 
    </body> 
</html>

Click to view the demo

The following code shows a few different ways to get all of the elements in the same form.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>
            $(function(){ 
                var n1 = $("input").length; 
                var n2 = $(":input").length; 
                var n3 = $("form > *").length; 
                var n4 = $(":text").length; 
                var n5 = $("input[type='text']").length; 
                document.writeln(n1 + ","+ n2 +","+ n3 + "," + n4 + "," + n5); 
            });
        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" /> 
            <input type="text" /> 
            <input type="text" /> 
        </form> 
    </body> 
</html>

Click to view the demo

Filtering by Visibility

Type	Description
:hidden	Selects all elements that are hidden.
:visible	Selects all elements that are visible.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script>

            $(function(){ 
                var numInv = $(":text:hidden").length; 
                var numVis = $(":text:visible").length; 
                document.writeln(numInv); 
                document.writeln(numVis);
            });

        </script> 
    </head> 
    <body>
        <form name="" method="post"> 
            <input type="text" name="text1" style="display:none;"/> 
            <input type="text" name="text2" style="offsetWidth:0; offsetHeight:0;"/> 
            <input type="text" name="text3" style="display:block;"/> 
        </form> 
    </body> 
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Selector: