JQUERY SELECTOR
- jQuery Selectors are essential for selecting and manipulating HTML elements.
- They are a crucial part of the jQuery library.
- Using jQuery selectors, you can locate or select HTML elements from the DOM based on their ID, classes, attributes, types, and more.
Factory Function $()
All jQuery selectors begin with a dollar sign and parentheses, e.g.,$(). This is known as the factory function.
It uses three fundamental building blocks to select an element within a given document.
1.Tag Name: Selects all elements with a specific tag name in the DOM.
- Example: $('p') selects all <p> elements in the document.
2.Tag ID: Selects an element with a specific ID in the DOM.
- Example: $('#real-id') selects the element with the ID "real-id" in the document.
3.Tag Class: Selects all elements with a specific class in the DOM.
- Example: $('.real-class') selects all elements with the class "real-class" in the document.
Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hover Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("p").hover(function() {
$(this).css("font-weight", "bold");
}, function() {
$(this).css("font-weight", "normal");
});
});
</script>
</head>
<body>
<p>Hover over this first paragraph.</p>
<p>Hover over this second paragraph.</p>
<p>Hover over this third paragraph.</p>
</body>
</html>
How to use Selectors
jQuery selectors can be used individually or combined with other selectors. They are essential at every step of using jQuery, allowing you to precisely select the elements you need from your HTML document.
- Name: Selects all elements that match the specified tag name.
- #ID: Selects a single element that matches the specified ID.
- .Class: Selects all elements that match the specified class.
- Universal (*): Selects all elements within the DOM.
- Multiple Elements (A, B, C): Selects the combined results of all specified selectors A, B, and C.
Different jQuery selectors
General Selectors
- All Elements:$(" * ")
Selects all elements.
- By ID:$("#firstname")
Selects the element with id="firstname".
- By Class:$(".primary")
Selects all elements with class="primary".
- Multiple Classes:$(".primary, .secondary")
Selects all elements with either class="primary" or class="secondary".
- By Element Type:$("p")
Selects all <p> elements.
- Multiple Elements:$("h1, div, p")
Selects all <h1>, <div>, and <p> elements.
Positional Selectors
- First Element:$("p:first")
Selects the first <p> element.
- Last Element:$("p:last")
Selects the last <p> element.
- Even Rows:$("tr:even")
Selects all even <tr> elements.
- Odd Rows:$("tr:odd")
Selects all odd <tr> elements.
- First Child:$("p:first-child")
Selects <p> elements that are the first child of their parent.
- First of Type:$("p:first-of-type")
Selects <p> elements that are the first of their type within their parent.
- Last Child:$("p:last-child")
Selects <p> elements that are the last child of their parent.
- Last of Type:$("p:last-of-type")
Selects <p> elements that are the last of their type within their parent.
- Nth Child:$("p:nth-child(2)")
Selects <p> elements that are the 2nd child of their parent.
- Nth Last Child:$("p:nth-last-child(2)")
Selects <p> elements that are the 2nd child from the end.
- Nth of Type:$("p:nth-of-type(2)")
Selects <p> elements that are the 2nd <p> of their parent.
- Nth Last of Type:$("p:nth-last-of-type(2)")
Selects <p> elements that are the 2nd <p> from the end of their type.
- Only Child:$("p:only-child")
Selects <p> elements that are the only child of their parent.
- Only of Type:$("p:only-of-type")
Selects <p> elements that are the only <p> of their type within their parent.
Hierarchy Selectors
- Direct Child:$("div > p")
Selects <p> elements that are direct children of <div>.
- Descendant:$("div p")
Selects all <p> elements that are descendants of <div>.
- Adjacent Sibling:$("div + p")
Selects the <p> immediately following each <div>.
- General Sibling:$("div ~ p")
Selects all <p> siblings of each <div>.
jQuery UI Selectors
- By Index:$("ul li:eq(3)")
Selects the fourth <li> element (index starts at 0).
- Greater Than Index:$("ul li:gt(3)")
Selects <li> elements with an index greater than 3.
- Less Than Index:$("ul li:lt(3)")
Selects <li> elements with an index less than 3.
Filtering Selectors
- Not Selector:$("input:not(:empty)")
Selects all <input> elements that are not empty.
- Header Elements:$(":header")
Selects all header elements (<h1>, <h2>, etc.).
- Animated Elements:$(":animated")
Selects all elements currently being animated.
- Focused Element:$(":focus")
Selects the element currently in focus.
- Contains Text:$(":contains('Hello')")
Selects elements containing the text "Hello".
- Has Child:$("div:has(p)")
Selects <div> elements that contain <p> elements.
- Empty Elements:$(":empty")
Selects all empty elements.
- Parent Elements:$(":parent")
Selects elements that are parents of other elements.
- Hidden Elements:$("p:hidden")
Selects hidden <p> elements.
- Visible Elements:$("table:visible")
Selects visible <table> elements.
- Root Element:$(":root")
Selects the root element of the document.
- Language Attribute: $("p:lang(de)")
Selects <p> elements with a lang attribute value starting with "de".
Attribute Selectors
- Attribute Presence:$("[href]")
Selects elements with an href attribute.
- Attribute Value:$("[href='default.htm']")
Selects elements with an `href` attribute value of "default.htm".
- Not Equal Value:$("[href!='default.htm']")
Selects elements with an href attribute value not equal to "default.htm".
- Ends With Value:$("[href$='.jpg']")
Selects elements with an href attribute value ending in ".jpg".
- Starts With Value:$("[title^='Tom']")
Selects elements with a title attribute value starting with "Tom".
- Contains Word:$("[title~='hello']")
Selects elements with a title attribute value containing the word "hello".
- Contains Value:$("[title*='hello']")
Selects elements with a title attribute value containing the substring "hello".
Input Selectors
- Any Input:$(":input")
Selects all input elements.
- Text Input:$(":text")
Selects input elements with type="text".
- Password Input:$(":password")
Selects input elements with type="password".
- Radio Input:$(":radio")
Selects input elements with type="radio".
- Checkbox Input:$(":checkbox")
Selects input elements with type="checkbox".
- Submit Button:$(":submit")
Selects input elements with type="submit".
- Reset Button:$(":reset")
Selects input elements with type="reset".
- Button:$(":button")
Selects input elements with type="button".
- Image Input:$(":image")
Selects input elements with type="image".
- File Input:$(":file")
Selects input elements with type="file".
State Selectors
- Enabled:$(":enabled")
Selects all enabled input elements.
- Disabled:$(":disabled")
Selects all disabled input elements.
- Selected:$(":selected")
Selects all selected input elements.
- Checked:$(":checked")
Selects all checked input elements.
