jQuery-ban selectorok segítenek minket abban, hogy kiválogassunk a html dokumentumunkból bizonyos tulajdonságoknak megfelelő elemeket. Például egy táblázat minden 2. sorát szinezzük pirosra:
Basic filters
Egyszerű szűrők, pl: $("tr:first") a táblázat első sora.
Content filters
Az elem tartalmára vonatkozó szűrők, pl: $("td:empty") a táűblázat üres celláit válogatja ki.
Child filters
Az elem gyerekeire vonatkozó szűrő, pl: $("div span:first-child") a div első span típusú gyereke.
Visibility filters
Az elem láthatóságára vonatkozó szűrők: :hidden a rejtett, :visibla a látható elemeket válogatja ki.
Attribute
Egy elemet az egyik atribútuma alapján választhatunk ki.
Például színezzük pirosra a newsletter nevű elem után álló szöveget:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="radio" name="newsletter" />
<span>1. chackbox</span>
</div>
<div>
<input type="radio" name="newsletters" />
<span>2. chackbox</span>
</div>
<div>
<input type="radio" name="accept" />
<span>3. chackbox</span>
</div>
<script>$("input[name='newsletter']").next().css("background-color", "red");</script>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="radio" name="newsletter" />
<span>1. chackbox</span>
</div>
<div>
<input type="radio" name="newsletters" />
<span>2. chackbox</span>
</div>
<div>
<input type="radio" name="accept" />
<span>3. chackbox</span>
</div>
<script>$("input[name='newsletter']").next().css("background-color", "red");</script>
</body>
</html>
Form
Egy form elemeire típusuk alapján hivatkozhatunk
Például színezzük pirosra a radio gombok utáni szöveget:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="radio" name="newsletter" />
<span>1. chackbox</span>
</div>
<div>
<input type="radio" name="newsletters" />
<span>2. chackbox</span>
</div>
<div>
<input type="radio" name="accept" />
<span>3. chackbox</span>
</div>
<script>$(":radio").next().css({background:"red"});</script>
</body>
</html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="radio" name="newsletter" />
<span>1. chackbox</span>
</div>
<div>
<input type="radio" name="newsletters" />
<span>2. chackbox</span>
</div>
<div>
<input type="radio" name="accept" />
<span>3. chackbox</span>
</div>
<script>$(":radio").next().css({background:"red"});</script>
</body>
</html>
Hierarchy
Az elemek közötti leszármazotti kapcsolatot felhasználva hivatkozhatunk rájuk.
Például keretezzük be a topnav nevű ul elem li egyerekeit:
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<script>$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>
<html>
<head>
<style>
body { font-size:14px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<script>$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>