http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FSelector
JavaScript Tutorial/jQuery/Selector - История изменений
2026-04-04T21:14:08Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector&diff=9697&oldid=prev
Admin: 1 версия
2010-05-26T08:25:20Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector&diff=9696&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:57Z
<p></p>
<p><b>Новая страница</b></p><div>== Adds class to all divs that have a paragraph inside of them.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("div:has(p)").css("color","red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><p>Hello in a paragraph</p></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Ancestor descendant==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("form input").css("border", "2px solid red");<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<form><br />
<label>Child:</label><br />
<input name="name" /><br />
<fieldset><br />
<label>Grandchild:</label><br />
<input name="newsletter" /><br />
</fieldset><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Assign query result to variable==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var input = $("form input:text");<br />
$("div").text("For this type jQuery found " + input.length + ".");<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<form><br />
<input type="text" /><br />
</form><br />
<div></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Contains another tag==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").remove(":contains("Hello")");<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<p class="hello">Hello</p><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Contains(text) matches elements which contain the given text.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
<br />
$("tr:contains("F")").css("background-color", "#bbbbff");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><td>First</td></tr><br />
<tr><td>Middle</td></tr><br />
<tr><td>Last</td></tr><br />
</table><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Count hidden tags==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<style><br />
.test{ border: 1px solid red; }<br />
</style><br />
<br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div:hidden").show(3000);<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<span></span><br />
<div></div><br />
<div style="display:none;">Hider!</div><br />
<div></div><br />
<div class="starthidden">Hider!</div><br />
<div></div><br />
<form><br />
<input type="hidden" /><br />
<input type="hidden" /><br />
<input type="hidden" /><br />
</form><br />
<span></span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Doest it contain==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").one("click", function () {<br />
if ($(this).is(":contains("asdf")")) {<br />
$("p").text("It"s the asdf div.");<br />
}else{<br />
$("p").text("It"s NOT the asdf div.");<br />
}<br />
$("p").hide().slideDown("slow");<br />
<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
Press each to see the text.<br />
<div>asdf</div><br />
<div>sdf</div><br />
<div>df</div><br />
<div>sdf</div><br />
<div>asdf</div><br />
<div>asdf</div><br />
<p></p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== empty() matches all elements that have no children (including text nodes).==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
<br />
$("td:empty").text("Was empty!").css("background", "red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<table><br />
<tr><td>First</td></tr><br />
<tr><td></td></tr><br />
<tr><td></td></tr><br />
</table><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Find all elements is to set the "context" to document.body==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(document).ready(function(){<br />
$("*", document.body).css("border","1px solid red");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="notMe">div </div><br />
<div class="myClass">div</div><br />
<span class="myClass myOtherClass">span</span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Find all elements within the "context" (document.body)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("*", document.body).css("border","3px solid red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>A div</div><br />
<button>0</button><br />
<button>1</button><br />
<button>2</button><br />
<button>3</button><br />
<span></span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Finds every element (including head, body, etc).==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("*").css("border","3px solid red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>A div</div><br />
<button>0</button><br />
<button>1</button><br />
<button>2</button><br />
<button>3</button><br />
<span></span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Find tag from just added HTML==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var newText = $("p").text().split(" ").join("</div> <div>");<br />
$("p").html(newText).find("div").hover(<br />
function () { $(this).addClass("y"); },<br />
function () { $(this).removeClass("y"); });<br />
});<br />
</script><br />
<style><br />
.y { background:yellow; }<br />
</style><br />
</head><br />
<body><br />
<body><br />
<p>a ab abc</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Find the parent element of each paragraph with a class "selected".==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").parent(".selected").css("background", "yellow");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><p>Hello</p></div><br />
<div class="selected"><p>Hello Again</p></div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== header() matches all elements that are headers, like h1, h2, h3 and so on.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(":header").css({ background:"#CCC", color:"blue" });<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<h1>Header 1</h1><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== hidden() matches all elements that are hidden, or input elements of type "hidden".==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
alert($(":hidden").length);<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<input type="button" value="Input Button"/><br />
<br />
<input type="checkbox">asdf</input><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" /><br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" /><br />
<input type="reset" /><br />
<input type="submit" /><br />
<input type="text" /><br />
<br />
<select><option>Option<option/></select><br />
<textarea></textarea><br />
<button>Button</button><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Hides all paragraphs then the link on click.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").hide();<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p class="myClass">p</p><br />
<span class="myClass">span class="myClass"</span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== HTML contains==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var newText = $("p").text().split(" ").join("</div> <div>");<br />
$("p").html(newText).find(":contains("a")")<br />
.css({"font-style":"italic"});<br />
});<br />
</script><br />
<style><br />
.y { background:yellow; }<br />
</style><br />
</head><br />
<body><br />
<body><br />
<p>a ab abc</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== jQuery custom filter selectors==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
Selector Description<br />
:animated Selects animated elements. <br />
:button Selects button (input[type=submit], input[type=reset],input[type=button], or button).<br />
:checkbox Selects check box elements (input[type=checkbox]).<br />
:checked Selects check checked boxes or radio buttons.<br />
:contains(foo) Selects only elements containing the text foo.<br />
:disabled Selects disabled form elements.<br />
:enabled Selects enabled form elements.<br />
:file Selects file elements (input[type=file]).<br />
:header Selects headers elements; for example: <h1> through <h6> elements.<br />
:hidden Selects hidden elements.<br />
:image Selects form images (input[type=image]).<br />
:input Selects form elements (input, select, textarea, button).<br />
:not(filter) Negates the specified filter.<br />
:parent Selects elements that have children (including text), but not empty elements.<br />
:password Selects password elements (input[type=password]).<br />
:radio Selects radio elements (input[type=radio]).<br />
:reset Selects reset buttons (input[type=reset] or button[type=reset]).<br />
:selected Selects option elements that are selected.<br />
:submit Selects submit buttons (button[type=submit] or input[type=submit]).<br />
:text Selects text elements (input[type=text]).<br />
:visible Selects elements that are visible.</source><br />
<br />
<br />
<br />
== Make all visible divs turn yellow on click.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div:visible").click(function () {<br />
$(this).css("background", "yellow");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<span></span><br />
<div style="display:none;">Hider!</div><br />
<div>click me</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches all elements==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(document).ready(function(){<br />
$("*").css("background","red");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="notMe">div </div><br />
<div class="myClass">div</div><br />
<span class="myClass myOtherClass">span</span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches all elements that are headers, like h1, h2, h3 and so on==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$(":header").css({ background:"#CCC", color:"blue" });<br />
});<br />
</script><br />
</head><br />
<body><br />
<h1>Header 1</h1><br />
<p>Contents 1</p><br />
<h2>Header 2</h2><br />
<p>Contents 2</p><br />
<br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches all elements that have no children (including text nodes)==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("td:empty").text("Was empty").css("background", "rgb(255,220,200)");<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<table><br />
<tr><td>data</td><td></td></tr><br />
<tr><td>data</td><td></td></tr><br />
<tr><td>data</td><td></td></tr><br />
</table><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches all elements with the given name.htm==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<style type="text/css"><br />
.changeP { font-weight: bold; color:red;}<br />
</style><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").css("border","1px solid red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="myID">0</div><br />
<div id="myID1">1</div><br />
<div id="myID2">2</div><br />
<span>SPAN</span><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches all input elements of type text.htm==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
var input = $("form input:text").css({background:"yellow"});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<form><br />
<input type="text" /><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Matches elements which contain the given text==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div:contains("J")").css("text-decoration", "underline");<br />
});<br />
</script><br />
<style><br />
div { background:yellow; width:80px; height:80px; margin:5px; float:left; }<br />
<br />
</style><br />
</head><br />
<body><br />
<div>Java</div><br />
<div>C#</div><br />
<div>JavaScript</div><br />
<div>CSS</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Methods to obtain new wrapped set based on relationships==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
Method Description<br />
children() Returns all unique children.<br />
contents() Returns contents of the elements.<br />
next() Returns all unique next siblings.<br />
nextAll() Returns all the following siblings.<br />
parent() Returns unique direct parents.<br />
parents() Returns unique ancestors. <br />
prev() Returns all unique previous siblings.<br />
prevAll() Returns all the previous siblings of the wrapped elements.<br />
siblings() Returns all unique siblings of the wrapped elements.</source><br />
<br />
<br />
<br />
== not(selector) filters out all elements matching the given selector.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("input:not(:checked) + span").css("background-color", "yellow");<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div><br />
<input type="checkbox" name="a" /><br />
<br />
<span>A</span><br />
</div><br />
<div><br />
<input type="checkbox" name="b" /><br />
<span>B</span><br />
</div><br />
<div><br />
<input type="checkbox" name="c" checked="checked" /><br />
<br />
<span>C</span><br />
</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Removes all elements that match "div p.selected" from the total set of all paragraphs.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
$("p").not($("div p.selected"))</source><br />
<br />
<br />
<br />
== Select more than one==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div,span,p.myClass").css("border","3px solid red");<br />
});<br />
</script><br />
</head><br />
<body><br />
<div>div</div><br />
<p class="myClass">p</p><br />
<p class="notMe">p</p><br />
<span>span</span><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Show hidden div tags==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div:hidden").show(3000);<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<span></span><br />
<div style="display:none;">Hider!</div><br />
<div></div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== visible() matches all elements that are visible.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div:visible").click(function () {<br />
$(this).css("background", "yellow");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<span></span><br />
<div style="display:none;">Hider!</div><br />
<div>click me</div><br />
<br />
</body><br />
</html></source></div>