Scribd
Upload
14 views58 pages

1 - Jquery Selectors - 2

jQuery selectors are essential for selecting and manipulating HTML elements based on various criteria such as name, id, classes, and attributes. They start with a dollar sign and parentheses, allowing for a wide range of selection methods including element, class, and id selectors. The document provides numerous examples of how to use these selectors in practical scenarios, demonstrating their functionality in hiding elements and manipulating the DOM.

Uploaded by

Mani Baluchamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views58 pages

1 - Jquery Selectors - 2

jQuery selectors are essential for selecting and manipulating HTML elements based on various criteria such as name, id, classes, and attributes. They start with a dollar sign and parentheses, allowing for a wide range of selection methods including element, class, and id selectors. The document provides numerous examples of how to use these selectors in practical scenarios, demonstrating their functionality in hiding elements and manipulating the DOM.

Uploaded by

Mani Baluchamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 58

jQuery Selectors

jQuery selectors are one of the most important parts of the jQuery library.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and
in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this: $("p")

When a user clicks on a button, all <p> elements will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me to hide paragraphs</button>
</body>
</html>
Selector Example Selects

* $("*") All elements


#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with class="intro"
.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"
element $("p") All <p> elements
el1,el2,el3 $("h1,div,p") All <h1>, <div> and <p> elements

:first $("p:first") The first <p> element


:last $("p:last") The last <p> element
:even $("tr:even") All even <tr> elements
:odd $("tr:odd") All odd <tr> elements

:first-child $("p:first-child") All <p> elements that are the first child of their parent
:first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of their parent
:last-child $("p:last-child") All <p> elements that are the last child of their parent
:last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of their parent
:nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent
:nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the 2nd child of their
parent, counting from the last child
:nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the 2nd <p> element
of their parent
:nth-last-of-type(n) $("p:nth-last-of-type(2)") All <p> elements that are the 2nd <p> element
of their parent, counting from the last child
:only-child $("p:only-child") All <p> elements that are the only child of their parent
:only-of-type $("p:only-of-type") All <p> elements that are the only child, of its type, of
their parent

parent > child $("div > p") All <p> elements that are a direct child of a <div>
element
parent descendant $("div p") All <p> elements that are descendants of a <div> element
element + next $("div + p") The <p> element that are next to each <div> elements
element ~ siblings $("div ~ p") All <p> elements that appear after the <div> element

:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)


:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
:not(selector) $("input:not(:empty)") All input elements that are not empty

:header$(":header") All header elements <h1>, <h2> ...


:animated $(":animated") All animated elements
:focus $(":focus") The element that currently has focus
:contains(text) $(":contains('Hello')")All elements which contains the text "Hello"
:has(selector) $("div:has(p)") All <div> elements that have a <p> element
:empty $(":empty") All elements that are empty
:parent $(":parent") All elements that are a parent of another element
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
:root $(":root") The document's root element
:lang(language) $("p:lang(de)") All <p> elements with a lang attribute value starting
with "de"

[attribute] $("[href]") All elements with a href attribute


[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to
"default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not
equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending
with ".jpg"
[attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to
'Tomorrow', or starting with 'Tomorrow'
followed by a hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting
with "Tom"
[attribute~=value] $("[title~='hello']") All elements with a title attribute value
containing the specific word "hello"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value
containing the word "hello"

:input $(":input") All input elements


:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML
element:

$("#test")
When a user clicks on a button, the element with id="test" will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

Example :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

This is a heading
This is a paragraph.

This is another paragraph.

Click me

When click , this line is hide - <p id="test">This is another paragraph.</p>


The .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

$(".test")

When a user clicks on a button, the elements with class="test" will be hidden:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>


<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

When click the below two lines are hided

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>


Selects all elements

$("*")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("*").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

This is a heading
This is a paragraph.

This is another paragraph.

When click - Hide all

$(this) - Selects the current HTML element

$(this).hide(); - Now here button is hided

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

This is a heading
This is a paragraph.

This is another paragraph.

Wnen click - button hide

("p.intro") - Selects all <p> elements with class="intro"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.intro").hide();
});
});
</script>
</head>
<body>

<h2 class="intro">This is a heading</h2>

<p class="intro">This is a paragraph.</p>


<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>
$("p:first") - Selects the first <p> element

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

$("ul li:first") - Selects the first <li> element of the first <ul>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first").hide();
});
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<button>Click me</button>

</body>
</html>

$("ul li:first-child") - Selects the first <li> element of every <ul> List 1 & 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ul li:first-child").hide();
});
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>

<button>Click me</button>

</body>
</html>
$("[href]") - Selects all elements with an href attribute

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("[href]").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

</body>
</html>

$("a[target='_blank']")- Selects all <a> elements with a target attribute value


equal to "_blank"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target='_blank']").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>
<button>Click me</button>

</body>
</html>

$("a[target!='_blank']") - Selects all <a> elements with a target attribute value


NOT equal to "_blank"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a[target!='_blank']").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><a href="https://www.w3schools.com/html/" target="_blank">HTML Tutorial</a></p>
<p><a href="https://www.w3schools.com/css/">CSS Tutorial</a></p>

<button>Click me</button>

</body>
</html>

$(":button") - Selects all <button> elements and <input> elements of type="button"

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(":button").hide();
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>

$("tr:even") - Selects all even <tr> elements

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

$("tr:odd") - Selects all odd <tr> elements

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:odd").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>
</body>
</html>

jQuery multiple elements Selector

The element selector can also be used to select multiple elements.

Note: Seperate each element with a comma.

Select all <h2>, <div> and <span> elements:

$("h2, div, span")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2, div, span").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>


<h2>Nice to meet you</h2>

<div>Very nice indeed.</div>

<p>How are you?</p>


<p>I'm fine, <span>thanks.</span></p>

</body>
</html>

The :first selector selects the first element.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:first").css("background-color", "yellow");
});
</script>
</head>
<body>

<p>This is the first paragraph.</p>


<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>

</body>
</html>

first paragraph yellow


This is the first paragraph.

This is the second paragraph.

This is the last paragraph.

jQuery :last Selector

The :last selector selects the last element.

Select the last <p> element:

$("p:last")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last").css("background-color", "yellow");
});
</script>
</head>
<body>

<p>This is the first paragraph.</p>


<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>

</body>
</html>

jQuery :first-child Selector

The :first-child selector selects all elements that are the first child of their parent.
Select every <p> element that is the first child of its parent:

$("p:first-child")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:first-child").css("background-color", "yellow");
});
</script>
</head>
<body>

<p>The first paragraph in body.</p>

<div style="border:1px solid;">


<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>

<p>The last paragraph in body.</p>

</body>
</html>

jQuery :first-of-type Selector

The :first-of-type selector selects all elements that are the first child, of a particular type, of their
parent.

Tip: This is the same as :nth-of-type(1).

Select every <p> element that is the first <p> element of its parent:

$("p:first-of-type")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:first-of-type").css("background-color", "yellow");
});
</script>
</head>
<body>

<p>The first paragraph in body.</p>

<div style="border:1px solid;">


<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<span>This is a span element.</span>
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>

<p>The last paragraph in body.</p>

</body>
</html>

jQuery :last-child Selector

The :last-child selector selects all elements that are the last child of their parent.

Select every <p> element that is the last child of its parent:

$("p:last-child")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last-child").css("background-color", "yellow");
});
</script>
</head>
<body>

<p>The first paragraph in body.</p>

<div style="border:1px solid;">


<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>
<div style="border:1px solid;">
<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>

<p>The last paragraph in body.</p>

</body>
</html>

jQuery :last-of-type Selector

The :last-of-type selector selects all elements that are the last child, of a particular type, of their
parent.

Tip: This is the same as :nth-last-of-type(1).

Select every <p> element that is the last <p> element of its parent:

$("p:last-of-type")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last-of-type").css("background-color", "yellow");
});
</script>
</head>
<body>

<p>The first paragraph in body.</p>

<div style="border:1px solid;">


<p>The first paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<p>The first paragraph in another div.</p>
<p>The last paragraph in another div.</p>
<span>This is a span element.</span>
</div>

<p>The last paragraph in body.</p>

</body>
</html>
jQuery :nth-child() Selector

The :nth-child(n) selector selects all elements that are the nth child, regardless of type, of their
parent.

Tip: Use the :nth-of-type() selector to select all elements that are the nth child, of a particular type,
of their parent.

Select each <p> element that is the third child of its parent:

$("p:nth-child(3)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-child(3)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>This is a heading in body</h1>

<p>The first paragraph in body.</p>


<p>The second paragraph in body (and the 3rd child element in body).</p>

<div style="border:1px solid;">


<span>This is a span element in div</span>
<p>The first paragraph in div.</p>
<p>The second paragraph in another div (and the 3rd child element in this div).</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<p>The first paragraph in another div.</p>
<p>The second paragraph in another div.</p>
<p>The last paragraph in another div (and the 3rd child element in this div).</p>
</div>

<p>The last paragraph in body.</p>

</body>
</html>
jQuery :nth-last-child() Selector

The :nth-last-child(n) selector selects all elements that are the nth child, regardless of type, of their
parent, counting from the last child.

Tip: Use the :nth-last-of-type() selector to select all elements that are the nth child, of a particular
type, of their parent, counting from the last child.

Select each <p> element that is the third child of its parent, counting from the last child:

$("p:nth-last-child(3)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-last-child(3)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>This is a heading in body</h1>

<p>The first paragraph in body.</p>


<p>The second paragraph in body.</p>

<div style="border:1px solid;">


<span>This is a span element in div</span>
<p>The first paragraph in div (and the 3rd child in div, counting from the last child).</p>
<p>The second paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<p>The first paragraph in another div (and the 3rd child in this div, counting from the last
child).</p>
<p>The second paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>

<p>The last paragraph in body.</p>

</body>
</html>

jQuery :nth-of-type() Selector


The :nth-of-type(n) selector selects all elements that are the nth child, of a particular type, of their
parent.

Tip: Use the :nth-child() selector to select all elements that are the nth child, regardless of type, of
their parent.

Select each <p> element that is the third <p> element of its parent:

$("p:nth-of-type(3)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-of-type(3)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>This is a heading in body</h1>


<p>The first paragraph in body.</p>
<p>The second paragraph in body.</p>

<div style="border:1px solid;">


<span>This is a span element in div</span>
<p>The first paragraph in div.</p>
<p>The second paragraph in another div.</p>
<p>The last (third) paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<p>The first paragraph in another div.</p>
<p>The second paragraph in another div.</p>
<p>The last (third) paragraph in another div.</p>
</div>

<p>The last (third) paragraph in body.</p>

</body>
</html>

jQuery :nth-last-of-type() Selector

The :nth-last-of-type(n) selector selects all elements that are the nth child, of a particular type, of
their parent, counting from the last child.

Select each <p> element that is the third <p> element of its parent, counting from the last child:
$("p:nth-last-of-type(3)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-last-of-type(3)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>This is a heading in body</h1>


<p>The first paragraph in body (and the 3rd paragraph in body, counting from the last
child).</p>
<p>The second paragraph in body.</p>

<div style="border:1px solid;">


<span>This is a span element in div</span>
<p>The first paragraph in div (and the 3rd paragraph in div, counting from the last
child).</p>
<p>The second paragraph in div.</p>
<p>The last paragraph in div.</p>
</div><br>

<div style="border:1px solid;">


<p>The first paragraph in another div (and the 3rd paragraph, counting from the last
child).</p>
<p>The second paragraph in another div.</p>
<p>The last paragraph in another div.</p>
</div>

<p>The last paragraph in body.</p>

</body>
</html>

jQuery :only-child Selector

The :only-child selector selects every element that is the only child of its parent.

Select each <p> element that is the only child of its parent:

$("p:only-child")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:only-child").css("background-color", "yellow");
});
</script>
</head>
<body>

<div style="border:1px solid;">


<p>The first child.</p>
<p>The last child.</p>
</div><br>

<div style="border:1px solid;">


<p>The only child.</p>
</div><br>

<div style="border:1px solid;">


<span>The first child.</span>
<p>The last child.</p>
</div><br>

</body>
</html>

jQuery :only-of-type Selector

The :only-of-type selector selects every element that is the only child of its type, of its parent.

Select each <p> element that is the only <p> element of its parent:

$("p:only-of-type")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:only-of-type").css("background-color", "yellow");
});
</script>
</head>
<body>

<div style="border:1px solid;">


<p>The first paragraph.</p>
<p>The last paragraph.</p>
</div><br>

<div style="border:1px solid;">


<p>The only paragraph.</p>
</div><br>

<div style="border:1px solid;">


<span>This is a span element.</span>
<p>The only paragraph.</p>
</div><br>

</body>
</html>

jQuery parent > child Selector

The ("parent > child") selector selects all elements that are a direct child of the specified element.

Select all <span> elements that are a direct child of a <div> element:

$("div > span")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div > span").css("background-color", "yellow");
});
</script>
</head>
<body>

<h2>What will $("div > span") select?</h2>

<h4>This div element has two direct child elements, p and span:</h4>

<div style="border:1px solid black;padding:10px;">


<p>This is a paragraph.</p>
<span>This is a text inside a span.</span>
</div>

<h4>This div element has one direct child element, p:</h4>

<div style="border:1px solid black;padding:10px;">


<p>This is a paragraph. <span>This is a span element, inside the paragraph.</span></p>
</div>

</body>
</html>
jQuery parent descendant Selector

The ("parent descendant") selector selects all elements that are descendants of a specified element.

A descendant of an element could be a child, grandchild, great-grandchild, etc, of that element.

Select all <span> elements that are descendants of a <div> element:

$("div span")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div span").css("background-color", "yellow");
});
</script>
</head>
<body>

<h2>What will $("div span") select?</h2>

<h4>This div element has two descendants, p and span:</h4>


<div style="border:1px solid black;padding:10px;">
<p>This is a paragraph.</p>
<span>This is a text inside a span.</span>
</div>

<h4>This div element has also two descendants, p and span:</h4>


<div style="border:1px solid black;padding:10px;">
<p>This is a paragraph. <span>This is a span element, inside the paragraph.</span></p>
</div>

</body>
</html>

jQuery element + next Selector

The ("element + next") selector selects the "next" element of the specified "element".
The "next" element must be placed right after the specified "element" to be selected.

Example: If you have two <p> elements right after a <div> element, this syntax:

$("div + p") - will only select the first <p> element,


because it is the next element of the <div> element (the other <p> element will be ignored)

Example: If you have an <h2> element right after a <div> element, and then a <p> element, this
syntax:
$("div + p") - will not select the <p> element,
because the next element of the <div> element is the <h2> element

Note: Both of the specified elements must share the same parent.

Select the <p> element that are next to each <div> element:

$("div + p")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div + p").css("background-color", "yellow");
});
</script>
</head>
<body>

<h2>What will $("div + p") select?</h2>

<div style="border:1px solid black;padding:10px;">This is a div element.</div>


<p>This p element is next to a div element.</p>
<p>This is another p element.</p>

<div style="border:1px solid black;padding:10px;">


<p>This is a p element inside a div element.</p>
</div>

<h2>This is a heading next to a div element.</h2>


<p>This is a p element (This p element will not be selected, because the h2 element above is the
"next" element of the div element).</p>

</body>
</html>

jQuery element ~ siblings Selector

The ("element ~ siblings") selector selects sibling elements that appear after the specified
"element".

Note: Both of the specified elements must share the same parent.

Select all <p> elements that are siblings and appear after the <div> element:

$("div ~ p")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div ~ p").css("background-color", "yellow");
});
</script>
</head>
<body>

<h2>What will $("div ~ p") select?</h2>

<p>This is a p element (will not be selected).</p>


<div style="border:1px solid black;padding:10px;">This is a div element.
</div>
<p>This is a p element.</p>
<p>This is another p element.</p>

<div style="border:1px solid black;padding:10px;">


<p>This is a p element inside a div element (will not be selected).</p></div>

<h2>This is a heading</h2>
<p>This is a p element.</p>

</body>
</html>

jQuery :eq() Selector

The :eq() selector selects an element with a specific index number.

The index numbers start at 0, so the first element will have the index number 0 (not 1).

This is mostly used together with another selector to select a specifically indexed element in a group
(like in the example above).

Select the second <p> element:

$("p:eq(1)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:eq(1)").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

<p>Who is your favourite:</p>


<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery :gt() Selector

The :gt() selector selects elements with an index number higher than a specified number.

The index numbers start at 0.

This is mostly used together with another selector to select the last elements in a group (like in the
example above).

Tip: Use the :lt selector to select elements index numbers lesser than the specified number.

Select all <tr> elements after the 4 first:

$("tr:gt(3)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:gt(3)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

</body>
</html>
jQuery :lt() Selector

The :lt() selector selects elements with an index number less than a specified number.

The index numbers start at 0.

This is mostly used together with another selector to select the first elements in a group (like in the
example above).

Tip: Use the :gt selector to select elements index numbers greater than the specified number.

Select the 4 first <tr> elements:

$("tr:lt(4)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:lt(4)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

jQuery :not() Selector

The :not() selector selects all elements except the specified element.

This is mostly used together with another selector to select everything except the specified element
in a group (like in the example above).

Select all <p> elements except those with class="intro":

$("p:not(.intro)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:not(.intro)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>

<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery :header Selector

The :header selector selects all header elements (<h1> to <h6>).

Select all header elements (h1 to h6):

$(":header")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":header").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>
<h2>My Fantastic Homepage</h2>
<h3>It's amazing!</h3>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
<p>Who is your favourite:</p>

<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery :animated Selector

The :animated selector selects all elements that are currently animated.

Select any element that is currently animated:

$(":animated")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function aniDiv(){
$("div:eq(0)").animate({width: "50%"}, "slow");
$("div:eq(0)").animate({width: "100%"}, "slow", aniDiv);
}
aniDiv();
$(".btn1").click(function(){
$(":animated").css("background-color", "red");
});
});
</script>
</head>
<body>

<button class="btn1">Change color of the animated element</button>

<div style="background:blue;">Div 1</div>


<div style="background:green;">Div 2</div>
<div style="background:yellow;">Div 3</div>

</body>
</html>

jQuery :focus Selector

The :focus selector selects the element that currently has focus.
Tip: This selector is often used with a tag name or another selector, if not, this selector will be the
same as ("*:focus").

Select the element that currently has focus:

$(":focus")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus();
$(":focus").css("background-color", "yellow");
});
</script>
</head>
<body>

<input type="text" />

</body>
</html>

jQuery :contains() Selector

The :contains() selector selects elements containing the specified string.

The string can be contained directly in the element as text, or in a child element.

Select all <p> elements containing "is":

$("p:contains(is)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:contains(is)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:


<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery :has() Selector

The :has() selector selects all elements that have one or more elements inside of them, that matches
the specified selector.

Tip: To select an element that have multiple elements inside of it, use comma

Select all <p> elements that have a <span> element inside of them:

$("p:has(span)")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:has(span)").css("border", "solid red");
});
</script>
</head>
<body>

<p><span>This is a span element inside a p element.</span></p>


<p>This is a p element with no span element.</p>

</body>
</html>

jQuery :empty Selector

The :empty selector selects empty elements.

An empty element is an element without child elements or text.

Select all empty elements:


$(":empty")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":empty").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th></th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td></td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td></td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

jQuery :parent Selector

The :parent selector selects all elements that are the parent of another element, including text nodes.

Select all <td> elements with children, including text:

$("td:parent")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("td:parent").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
<th>Company</th>
<th></th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td></td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td></td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td></td>
<td>Austria</td>
</tr>
<tr>
<td></td>
<td></td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

<p>Try to write something in a td element that is empty. It will now be selected.</p>

</body>
</html>

jQuery :hidden Selector


The :hidden selector selects hidden elements.

Hidden elements are elements that are:

Set to display:none
Form elements with type="hidden"
Width and height set to 0
A hidden parent element (this also hides child elements)

Note: This selector will not work on elements with visibility:hidden.

Show hidden <p> elements:

$("p:hidden").show();

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:hidden").show(3500);
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p style="display:none;">This is a hidden paragraph that is slowly shown.</p>

</body>
</html>

jQuery :visible Selector

The :visible selector selects every element that is currently visible.

Visible elements are elements that are not:

Set to display:none
Form elements with type="hidden"
Width and height set to 0
A hidden parent element (this also hides child elements)

Select all visible <p> elements:

$("p:visible")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:visible").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a pargraph.</p>
<p>This is another paragraph.</p>
<p style="display:none">This is a hidden paragraph.</p>

</body>
</html>

jQuery :root Selector

The :root selector selects the document's root element.

In HTML, the root element is always the <html> element.

Set the background color for the HTML document to yellow:

$(":root").css("background-color", "yellow");

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":root").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>This is a heading</h1>

</body>
</html>
jQuery [attribute] Selector

The [attribute] selector selects each element with the specified attribute.

Select every element with an id attribute:

$("[id]")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("[id]").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:


<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery [attribute=value] Selector

The [attribute=value] selector selects each element with the specified attribute and value.

Select every element containing an id attribute with the value "choose":

$("[id=choose]")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("[id=choose]").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:


<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery [attribute!=value] Selector

The [attribute!=value] selector selects each element that does NOT have the specified attribute and
value.

Elements with the selected attribute, but with a different value, will be selected.

Select all <p> elements NOT containing a class attribute with the value "intro":

$("p[class!='intro']")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p[class!='intro']").css("background-color", "yellow");
});
</script>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p class="intro">My name is Donald.</p>


<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

Who is your favourite:


<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>

</body>
</html>

jQuery [attribute$=value] Selector

The [attribute$=value] selector selects each element with a specific attribute, with a value ending in
a specific string.

Select all <a> elements with a href attribute that ends with ".org":

$("a[href$='.org']")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a[href$='.org']").css("background-color", "yellow");});
</script>
</head>
<body>

<a href="https://www.w3schools.com">w3schools.com</a><br>
<a href="http://www.google.com">Google.com</a><br>
<a href="http://www.wikipedia.org">wikipedia.org</a>

</body>
</html>

jQuery [attribute|=value] Selector

The [attribute|=value] selector selects each element with a specified attribute, with a value equal to
a specified string (like "en") or starting with that string followed by a hyphen (like "en-us").

Tip: This selector is often used to handle language attributes.


Select all <p> elements with a title attribute that starts with the value "Tomorrow":

$("p[title|='Tomorrow']")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p[title|='Tomorrow']").css("background-color", "yellow");});
</script>
</head>
<body>

<p title="Tomorrow">This is a paragraph.</p>


<p title="tomorrow">This is a paragraph.</p>
<p title="Tom">This is a paragraph.</p>
<p title="See You Tomorrow">This is a paragraph.</p>
<p title="Tomorrow-the day after today">This is a paragraph.</p>

<p>This selector selects all elements with a title attribute value equal to 'Tomorrow', or starting with
'Tomorrow' followed by a hyphen.</p>

</body>
</html>

jQuery [attribute^=value] Selector

The [attribute^=value] selector selects each element with a specific attribute, with a value beginning
in a specific string.

Select all <input> elements with a name attribute that starts with "nation":

$("input[name^='nation']")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name^='nation']").css("background-color", "yellow");});
</script>
</head>
<body>

<input name="nationality" type="text" value="Chinese">


<input name="nation" type="text" value="English">
<input name="country" type="text" value="Germany">
<input name="anothernation" type="text" value="Norwegian">

<p>This selector selects all input fields with the attribute name that starts with 'nation'.</p>

</body>
</html>

jQuery [attribute~=value] Selector

The [attribute~=value] selector selects each element with a specific attribute, with a value
containing a specific string.

Tip: The string can contain whitespace.

Select all <input> elements with a name attribute that contains the specific word "nation":

$("input[name~='nation']")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name~='nation']").css("background-color", "yellow");});
</script>
</head>
<body>

<input name="nationality" type="text" value="Chinese">


<input name="nation" type="text" value="English">
<input name="country" type="text" value="Germany">
<input name="anothernation" type="text" value="Norwegian">

<p>This selector selects all input fields with the attribute name that contains the specific string
'nation'.</p>
<p><b>Note</b>: It will only select the attribute name that contains the specific string "nation",
and not the attribute name that starts, includes or ends with "nation" (like "nationality", "xnationx"
or "anothernation").

</body>
</html>

jQuery [attribute*=value] Selector

The [attribute*=value] selector selects each element with a specific attribute, with a value
containing a string.
Select all <input> elements with a name attribute that contains the word "nation":

$("input[name*='nation']")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input[name*='nation']").css("background-color", "yellow");
});
</script>
</head>
<body>

<input name="nationality" type="text" value="Chinese">


<input name="nation" type="text" value="English">
<input name="country" type="text" value="Germany">
<input name="anothernation" type="text" value="Norwegian">

<p>This selector selects all input fields with the attribute name that contains the string 'nation'.</p>

</body>
</html>

jQuery :input Selector

The :input selector selects form elements.


This selector also works with the button element.

Select all input elements:

$(":input")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":input").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

jQuery :text Selector

The :text selector selects input elements with type=text.

Select <input> elements with type="text":

$(":text")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":text").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

jQuery :password Selector

The :password selector selects input elements with type=password.

Select <input> elements with type="password":

$(":password")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":password").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

jQuery :radio Selector

The :radio selector selects input elements with type=radio.

Select all <input> elements with type="radio":

$(":radio")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":radio").wrap("<span style='background-color:red'>");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Male:<input type="radio" name="sex" value="m"><br>
Female<input type="radio" name="sex" value="f"><br>
<input type="submit">
</form>

<p>Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does
not support background color on radiobuttons.</p>

</body>
</html>

jQuery :checkbox Selector

The :checkbox selector selects input elements with type=checkbox.

Select all <input> elements with type="checkbox":

$(":checkbox")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":checkbox").wrap("<span style='background-color:red'>");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
I have a car: <input type="checkbox" name="vehicle" value="Car"><br>
I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br>
<input type="submit">
</form>

<p>Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does
not support background color on checkboxes.</p>

</body>
</html>

jQuery :submit Selector

The :submit selector selects button and input elements with type=submit.

If a button element has no defined type, most browsers will use it as a button with type=submit.
Tip: Using input:submit as a selector will not select the button element.

Select <input> and <button> elements with type="submit":

$(":submit")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":submit").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

jQuery :reset Selector


The :reset selector selects button and input elements with type=reset.

Tip: Using input:reset as a selector will not select the button element.

Select <input> and <button> elements with type="reset":

$(":reset")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":reset").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>

</body>
</html>

jQuery :button Selector

The :button selector selects button elements, and input elements with type=button.

Tip: Using input:button as a selector will not select the button element.

Select <button> elements and <input> elements with type="button":

$(":button")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":button").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
<button type="button">Useless Button</button>
<input type="button" value="Another useless button"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit"><br>
</form>

</body>
</html>
jQuery :image Selector

The :image selector selects input elements with type=image.

Select <input> elements with type="image":

$(":image")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":image").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Password: <input type="password" name="password"><br>
Compatible: <input type="image" src="compatible_ie.gif" width="31" height="30">
</form>

</body>
</html>

jQuery :file Selector

The :file selector selects input elements with type=file.

Select <input> elements with type="file":

$(":file")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":file").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
File: <input type="file" name="myfile">
</form>

</body>
</html>

jQuery :enabled Selector

The :enabled selector selects all enabled form elements.

Select all the enabled form elements:

$(":enabled")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":enabled").css("background-color","red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
ID:<input type="text" name="id" disabled="disabled">

Age:
<select disabled="disabled">
<option>20-30</option>
<option>30-50</option>
<option>50+</option>
</select>
<input type="submit">
</form>

</body>
</html>
jQuery :disabled Selector

The :disabled selector selects all disabled form elements.

Select all the disabled form elements:

$(":disabled")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":disabled").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
ID:<input type="text" name="id" disabled="disabled">

Age:
<select disabled="disabled">
<option>20-30</option>
<option>30-50</option>
<option>50+</option>
</select>
<input type="submit">
</form>

</body>
</html>

jQuery :selected Selector

The :selected selector selects option elements that are pre-selected.

Note: This selector will not work on checkboxes or radio buttons. Use the :checked selector instead.

Select the pre-selected item(s) in a drop-down list:

$(":selected")
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":selected").css("background-color", "red");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
Car:
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</form>

</body>
</html>

jQuery :checked Selector

The :checked selector selects all checked checkboxes or radio buttons.

Select all checked elements (checkboxes or radio buttons):

$(":checked")

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(":checked").wrap("<span style='background-color:red'>");
});
</script>
</head>
<body>

<form action="">
Name: <input type="text" name="user"><br>
I have a bike: <input type="checkbox" name="vehicle" value="Bike"><br>
I have a car: <input type="checkbox" name="vehicle" value="Car"
checked="checked"><br>
I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"><br>
<input type="submit">
</form>

<p>Note: We use jQuerys .wrap method to highlight the selected elements, because Firefox does
not support background color on checkboxes.</p>

</body>
</html>

Selector Example Selects


* $("*") All elements
#id $("#lastname") The element with id="lastname"
.class $(".intro") All elements with class="intro"
.class,.class $(".intro,.demo") All elements with the class "intro" or "demo"
element $("p") All <p> elements
el1,el2,el3 $("h1,div,p") All <h1>, <div> and <p> elements

:first $("p:first") The first <p> element


:last $("p:last") The last <p> element
:even $("tr:even") All even <tr> elements
:odd $("tr:odd") All odd <tr> elements

:first-child $("p:first-child") All <p> elements that are the first child of their parent
All <p> elements that are the first <p> element of their
:first-of-type $("p:first-of-type")
parent
:last-child $("p:last-child") All <p> elements that are the last child of their parent
All <p> elements that are the last <p> element of their
:last-of-type $("p:last-of-type")
parent
:nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent
$("p:nth-last- All <p> elements that are the 2nd child of their parent,
:nth-last-child(n)
child(2)") counting from the last child
All <p> elements that are the 2nd <p> element of their
:nth-of-type(n) $("p:nth-of-type(2)")
parent
$("p:nth-last-of- All <p> elements that are the 2nd <p> element of their
:nth-last-of-type(n)
type(2)") parent, counting from the last child
:only-child $("p:only-child") All <p> elements that are the only child of their parent
All <p> elements that are the only child, of its type, of
:only-of-type $("p:only-of-type")
their parent

parent > child $("div > p") All <p> elements that are a direct child of a <div> element
parent descendant $("div p") All <p> elements that are descendants of a <div> element
element + next $("div + p") The <p> element that are next to each <div> elements
element ~ siblings $("div ~ p") All <p> elements that appear after the <div> element
:eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0)
:gt(no) $("ul li:gt(3)") List elements with an index greater than 3
:lt(no) $("ul li:lt(3)") List elements with an index less than 3
$
:not(selector) All input elements that are not empty
("input:not(:empty)")

:header $(":header") All header elements <h1>, <h2> ...


:animated $(":animated") All animated elements
:focus $(":focus") The element that currently has focus
$
:contains(text) All elements which contains the text "Hello"
(":contains('Hello')")
:has(selector) $("div:has(p)") All <div> elements that have a <p> element
:empty $(":empty") All elements that are empty
:parent $(":parent") All elements that are a parent of another element
:hidden $("p:hidden") All hidden <p> elements
:visible $("table:visible") All visible tables
:root $(":root") The document's root element
All <p> elements with a lang attribute value starting with
:lang(language) $("p:lang(de)")
"de"

[attribute] $("[href]") All elements with a href attribute


$
All elements with a href attribute value equal to
[attribute=value] ("[href='default.htm']
"default.htm"
")
$("[href! All elements with a href attribute value not equal to
[attribute!=value]
='default.htm']") "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"
All elements with a title attribute value equal to
$("[title|
[attribute|=value] 'Tomorrow', or starting with 'Tomorrow' followed by a
='Tomorrow']")
hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
All elements with a title attribute value containing the
[attribute~=value] $("[title~='hello']")
specific word "hello"
All elements with a title attribute value containing the
[attribute*=value] $("[title*='hello']")
word "hello"

:input $(":input") All input elements


:text $(":text") All input elements with type="text"
:password $(":password") All input elements with type="password"
:radio $(":radio") All input elements with type="radio"
:checkbox $(":checkbox") All input elements with type="checkbox"
:submit $(":submit") All input elements with type="submit"
:reset $(":reset") All input elements with type="reset"
:button $(":button") All input elements with type="button"
:image $(":image") All input elements with type="image"
:file $(":file") All input elements with type="file"
:enabled $(":enabled") All enabled input elements
:disabled $(":disabled") All disabled input elements
:selected $(":selected") All selected input elements
:checked $(":checked") All checked input elements
Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to
maintain, you can put your jQuery functions in a separate .js file.

The functions are added directly into the <head> section. However, sometimes it is
preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):

Example

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

You might also like