jQuery Selectors – Selecting Elements Easily
What are jQuery Selectors?
jQuery Selectors are used to find and select HTML elements on a webpage. Once selected, you can modify, style, or add effects to these elements.
Think of selectors as shortcuts to picking elements, just like choosing a specific contact from your phone list.
Why Use jQuery Selectors?
✅ Simple and Short Syntax – Easy to write and understand.
✅ CSS-Like Syntax – If you know CSS, you already understand jQuery selectors!
✅ Powerful and Flexible – Allows selecting elements in many different ways.
Basic jQuery Selectors
1. Select by Tag Name
Selects all elements of a specific tag (e.g., all `<p>` tags).
👉 Example: Select all paragraphs and change their color to red.
$(“p”).css(“color”, “red”);
📌 Explanation: This will find all <p> elements on the page and change their text color to red.
2. Select by ID
Selects a specific element using its ID (#id).
👉 Example: Hide a button with the ID myButton.
$(“#myButton”).hide();
📌 Explanation: The #myButton selects the element with id=”myButton” and hides it when the script runs.
3. Select by Class
Selects elements with a specific class (.class).
👉 Example: Change the background color of all elements with the class highlight.
$(“.highlight”).css(“background-color”, “yellow”);
📌Explanation: This targets all elements with class=”highlight” and changes their background color to yellow.
Multiple and Positional Selectors
1. Select Multiple Elements
You can select multiple elements at once by separating them with a comma ,.
👉 Example: Select all <h1> and <p> elements and make them blue.
$(“h1, p”).css(“color”, “blue”);
📌Explanation: This applies the same style to both `<h1>` and `<p>` elements simultaneously.
2. Select First and Last Elements
• :first – Selects the first matching element.
• :last – Selects the last matching element.
👉 Example: Make the first paragraph bold.
$(“p:first”).css(“font-weight”, “bold”);
👉 Example: Underline the last paragraph.
$(“p:last”).css(“text-decoration”, “underline”);
📌 Explanation:
– $(“p:first”) finds the first <p> element and makes it bold.
– $(“p:last”) finds the last <p> element and underlines it.
3. Select Even and Odd Elements
• :even – Selects even-numbered elements (starting from 0).
• :odd – Selects odd-numbered elements.
👉 Example: Change the background color of even table rows.
$(“tr:even”).css(“background-color”, “lightgray”);
👉 Example: Change the text color of odd paragraphs.
$(“p:odd”).css(“color”, “green”);
📌 Explanation:
– tr:even changes the background of even rows in a table.
– p:odd makes odd paragraphs green.
Functions in a Separate File
If your website has multiple pages, it’s a good practice to store jQuery functions in a separate .js file for better organization and easier maintenance.
How to Use an External jQuery File
Step 1: Create an External JavaScript File
Create a new file called my_jquery_functions.js and add your jQuery functions:
👉 my_jquery_functions.js
$(document).ready(function() {
$(“p”).css(“color”, “blue”); // Change paragraph text color to blue
$(“#myButton”).click(function() {
$(this).hide(); // Hide button when clicked
});
});
Step 2: Link the File in Your HTML Page
Add this inside the <head> section of your HTML file:
<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>
📌 Why use an external file?
✔ Keeps your HTML clean.
✔ Makes updating jQuery functions easier.
✔ Helps organize and manage multiple functions.
Practical Example – Applying jQuery Selectors
Let’s create a simple webpage to test different jQuery selectors and external JavaScript files.
HTML File (index.html)
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors Example</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js”></script>
<script src=”my_jquery_functions.js”></script>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<h1>Welcome to jQuery Selectors</h1>
<p class=”highlight”>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id=”myButton”>Click Me</button>
</body>
</html>
External jQuery File (my_jquery_functions.js)
$(document).ready(function() {
$(“p”).css(“color”, “blue”);
$(“#myButton”).click(function() {
$(this).hide();
});
$(“p:first”).css(“font-weight”, “bold”);
$(“ul li”).css(“background-color”, “lightgray”);
});
What Happens Here?
✔ All <p> elements turn blue.
✔ The first paragraph becomes bold.
✔ Clicking the button hides it.
✔ <li> elements inside <ul> get a gray background.
✔ jQuery functions are stored in a separate .js file for better organization.
Conclusion
🎯 jQuery Selectors help find and manipulate HTML elements easily.
🎯 You can select elements by tag, class, ID, or position.
🎯 Using a separate .js file keeps your code clean and organized.
