JQuery Selector
From w3cyberlearnings
Select Element
All elements TRY-IT
Assign text's color to blue for all elements.
<html>
<head>
<title>Select ALL</title>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("*").css('color','blue');
});
</script>
</head>
<body>
<div>GOod</div>
<span>Bad</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</body>
</html>
Assign class TRY-IT
All elements with class myblue assign the text color to blue.
<html>
<head>
<title>All Element with Class</title>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.myblue').css('color','blue');
});
</script>
</head>
<body>
<div class="myblue">GOod</div>
<span class="myblue">Bad</span>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</body>
</html>
Assign based on the id TRY-IT
$('#id').css('color','blue');
<div id="id">Something</div>
HTML ElementsTRY-IT
$('p').css('color','blue');
$('div').css('color','red');
<p>All blue</p>
<div>All Red</div>
The first element TRY-IT
// <div>My First</div> is blue color
$('div:first').css('color','blue');
<div>My First</div>
<p>My second</p>
<div>Second Div</div>
<div>Third Div</div>
The last element TRY-IT
// <p>Fourth</p>
$('p:last').css('color','blue');
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Fourth</p>
Even and Odd elements
This can be applied to HTML TABLE Element in order to assign a different css or class to make the table rows have a different color or background.
All even elements TRY-IT
- Even: one, Three, Five, Seven, and Nine.
$('p:even').css('color','blue');
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<p>Six</p>
<p>Seven</p>
<p>Eight</p>
<p>Nine</p>
All odd elements TRY-IT
- Odd: Two, Four, Six, Eight
$('p:odd').css('color','red');
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<p>Six</p>
<p>Seven</p>
<p>Eight</p>
<p>Nine</p>
List elements
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> </ul>
eq(Index) TRY-IT
- Index start from 0
- Three is blue
$('ul li:eq(2)').css('color','blue');
lt(Number) TRY-IT
- List all element that less than index 2 (Index 0=One, and Index 1=Two)
- List: one and two.
$('ul li:lt(2)').css('color','blue');
gt(Number) TRY-IT
- List all UL elements that greater than index 5
- List: seven, eight, and nine.
$('ul li:gt(5)').css('color','red');
not() TRY-IT
- Display all elements that does not contain the class=last
$('ul li:not(.last)').css('color','red');
<ul>
<li class="last">One</li>
<li class="last">Two</li>
<li class="last">Three</li>
<li class="last">Four</li>
<li class="first">Five</li> <!-- display --->
<li class="last">Six</li>
<li class="last">Seven</li>
<li class="last">Eight</li>
<li class="last">Nine</li>
</ul>
All header elements TRY-IT
- Assign color to red and font-size to 28px for all HTML header elements.
$(':header').css({'color':'red','font-size':'28'});
<h3>My favorite Fish</h3>
<ul>
<li>Cat Fish</li>
<li>Head-snake fish</li>
</ul>
<h4>My favorite color</h4>
<p>Blue</p>
<p>Black</p>
Hide and Show elements TRY-IT
- When click on Show button: Blue show and Black Hide.
- When click on Hide button: Black Show and Blue Hide.
<html>
<head>
<title>Show And Hide</title>
<script
type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('p#blue').hide();
$('p#black').show();
$('#myshow').click(function(){
$('p#blue').show();
$('p#black').hide();
});
$('#myhide').click(function(){
$('p#blue').hide();
$('p#black').show();
});
});
</script>
</head>
<body>
<button id="myshow">Show</button>
<button id="myhide">Hide</button>
<p id="blue">Blue</p>
<p id="black">Black</p>
</body>
</html>
All elements contains text TRY-IT
- Select all element contains a specific text.
- In this example, selected all the DIV element contains the text "is".
<html>
<head>
<title>Contains</title>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div:contains("is")').css('color','blue');
});
</script>
</head>
<body>
<div>God is great!</div>
<div>he goes to USA!</div>
<div>Nothing is important!</div>
</body>
</html>
All element with empty child TRY-IT
- Select all empty element.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Profile List</title>
<script
type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(':empty').css('background-color','blue');
});
</script>
</head>
<body>
<table>
<tr>
<td>Name</td>
<td></td> <!-- empty -->
<td>Salary</td>
</tr>
<tr>
<td>Bob</td>
<td>Houston,Tx</td>
<td>382k</td>
</tr>
<tr>
<td>Jing</td>
<td>Thailand</td>
<td></td><!-- empty -->
</tr>
<tr>
<td></td><!-- empty -->
<td>Canada</td>
<td></td><!-- empty -->
</tr>
</table>
</body>
</html>
Related Links
String and Selector
