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.
<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>
checked() matches all elements that are checked.
<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>
disabled() matches all elements that are disabled.
<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>
enabled() matches all elements that are enabled.
<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>
file() matches all input elements of type file.
<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>
Finds all button inputs.
<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>
Finds all inputs of type radio within the first form in the document
<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>
Finds all inputs that are not checked and highlights the next sibling span.
<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>
<div>
<input type="checkbox" name="a" />
<span>A</span>
</div>
<div>
<input type="checkbox" name="b" />
<span>B</span>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<span>C</span>
</div>
</body>
</html>
Finds all inputs that don"t have the name "n"
<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>
Finds all inputs that have an id attribute and whose name attribute ends with man and sets the value.
<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>
Finds all inputs that with a name attribute that contains "a"
<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>
Finds all inputs with an attribute name that ends with "b"
<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>
Finds all inputs with name "ab"
<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>
Finds the button with no siblings in each matched div and modifies look.
<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>
<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div>
<ul>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
<div>
<ul>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
</ul>
</div>
</body>
</html>
Find the very next sibling of each disabled button and change its text "this button is disabled".
<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>
<p>bad or .</p><span>good</span>
</body>
</html>
Get all form children
<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>
Get disabled form fields
<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>
<div>
</div>
</body>
</html>
Get enabled form fields
<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>
<div>
</div>
</body>
</html>
image() matches all input elements of type image.
<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>
input() matches all input, textarea, select and button elements.
<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>
password() matches all input elements of type password.
<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>
radio() matches all input elements of type radio.
<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>
reset() matches all input elements of type reset.
<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>
selected() matches all elements that are selected.
<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>
<div></div>
</body>
</html>
<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>
submit() matches all input elements of type submit.
<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>
text() matches all input elements of type text.
<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>