JavaScript Tutorial/jQuery/Selector Form
Содержание
- 1 checkbox() matches all input elements of type checkbox.
- 2 checked() matches all elements that are checked.
- 3 disabled() matches all elements that are disabled.
- 4 enabled() matches all elements that are enabled.
- 5 file() matches all input elements of type file.
- 6 Finds all button inputs.
- 7 Finds all inputs of type radio within the first form in the document
- 8 Finds all inputs that are not checked and highlights the next sibling span.
- 9 Finds all inputs that don"t have the name "n"
- 10 Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.
- 11 Finds all inputs that with a name attribute that contains "a"
- 12 Finds all inputs with an attribute name that ends with "b"
- 13 Finds all inputs with name "ab"
- 14 Finds the button with no siblings in each matched div and modifies look.
- 15 Find the very next sibling of each disabled button and change its text "this button is disabled".
- 16 Get all form children
- 17 Get disabled form fields
- 18 Get enabled form fields
- 19 image() matches all input elements of type image.
- 20 input() matches all input, textarea, select and button elements.
- 21 password() matches all input elements of type password.
- 22 radio() matches all input elements of type radio.
- 23 reset() matches all input elements of type reset.
- 24 selected() matches all elements that are selected.
- 25 Shows all hidden divs and counts hidden inputs.
- 26 submit() matches all input elements of type submit.
- 27 text() matches all input elements of type text.
checkbox() matches all input elements of type checkbox.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":checkbox").length); }); </script> </head> <body> <body> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </body>
</html></source>
checked() matches all elements that are checked.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("input:checked").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
disabled() matches all elements that are disabled.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("input:disabled").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button" disabled="disabled"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
enabled() matches all elements that are enabled.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("input:enabled").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button" disabled="disabled"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
file() matches all input elements of type file.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":file").length); }); </script> </head> <body> <body> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </body>
</html></source>
Finds all button inputs.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":button").css({background:"yellow", border:"3px red solid"}); }); </script> </head> <body> <body> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </body>
</html></source>
Finds all inputs of type radio within the first form in the document
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> .changeP { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ alert($("input:radio", document.forms[0]).length); }); </script> </head> <body> <form> <input type="radio" value="Option"> </form> </body>
</html></source>
Finds all inputs that are not checked and highlights the next sibling span.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input:not(:checked) + span").css("background-color", "yellow"); }); </script> </head> <body> <body>
<input type="checkbox" name="a" />
A
<input type="checkbox" name="b" />
B
<input type="checkbox" name="c" checked="checked" />
C
</body>
</html></source>
Finds all inputs that don"t have the name "n"
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name!="n"]").val(" not n"); }); </script> </head> <body> <body> <input type="text" name="newsletter" value="Hot Fuzz" /> </body>
</html></source>
Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[id][name$="m"]").val("asdf"); }); </script> </head> <body> <body> <input id="a" name="m" />
</body>
</html></source>
Finds all inputs that with a name attribute that contains "a"
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name*="a"]").val("a"); }); </script> </head> <body> <body> <input name="a" />
</body>
</html></source>
Finds all inputs with an attribute name that ends with "b"
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name$="b"]").val("a"); }); </script> </head> <body> <body> <input name="ab" />
</body>
</html></source>
Finds all inputs with name "ab"
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name="ab"]").val("ab"); }); </script> </head> <body> <body> <input name="ab" />
</body>
</html></source>
Finds the button with no siblings in each matched div and modifies look.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div ul:only-child").text("only has ul").css("border", "2px blue solid"); }); </script> </head> <body> <body>
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
</body>
</html></source>
Find the very next sibling of each disabled button and change its text "this button is disabled".
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").next().text("asdf"); }); </script> </head> <body> <body>
bad or .
good</body>
</html></source>
Get all form children
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("form > *").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
Get disabled form fields
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input:disabled").val("data"); }); </script> </head> <body> <form> <input name="email" disabled="disabled" /> </form>
</body>
</html></source>
Get enabled form fields
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input:enabled").val("data"); }); </script> </head> <body> <form> <input name="email" disabled="disabled" /> <input name="id" /> </form>
</body>
</html></source>
image() matches all input elements of type image.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":image").length); }); </script> </head> <body> <body> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </body>
</html></source>
input() matches all input, textarea, select and button elements.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":input").length); }); </script> </head> <body> <body> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </body>
</html></source>
password() matches all input elements of type password.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":password").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
radio() matches all input elements of type radio.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":radio").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
reset() matches all input elements of type reset.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":reset").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
selected() matches all elements that are selected.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div").text(str); }) .trigger("change"); }); </script> </head> <body> <body> <select name="garden" multiple="multiple"> <option>A</option> <option selected="selected">B</option> <option>C</option> <option selected="selected">D</option> <option>E</option> <option>F</option> </select>
</body>
</html></source>
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":hidden").length); $(":hidden").show(3000); }); </script> </head> <body> <body> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </body>
</html></source>
submit() matches all input elements of type submit.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":submit").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>
text() matches all input elements of type text.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($(":text").length); }); </script> </head> <body> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox">asdf</input> <input type="checkbox" /> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option<option/></select> <textarea></textarea> <button>Button</button> </form> </body>
</html></source>