📚 Mastering jQuery DOM Traversal, Plugins, and Best Practices
🔷 Part 1: Traversing the DOM in jQuery
DOM Traversal means moving through elements — like from parent to child, or finding specific items inside another element. jQuery makes it very easy.
🔹 1. parent()
Use: To find the immediate parent of a selected element.
✅ Example 1:
htmlCopyEdit<div class="card">
<p class="info">Click me!</p>
</div>
javascriptCopyEdit$(".info").click(function() {
$(this).parent().css("border", "2px solid blue");
});
🧠 Clicking on the <p> will highlight its parent <div>.
✅ Example 2:
htmlCopyEdit<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
</ul>
javascriptCopyEdit$("span").hover(function(){
$(this).parent().css("background-color", "lightyellow");
});
🧠 Highlights the <li> when the user hovers over the <span>.
🔹 2. children()
Use: To find direct children of an element.
✅ Example 1:
htmlCopyEdit<div id="menu">
<button>Home</button>
<button>About</button>
</div>
javascriptCopyEdit$("#menu").children().css("margin", "10px");
🧠 Adds margin to all direct child buttons of #menu.
✅ Example 2:
htmlCopyEdit<div class="box">
<p>Text 1</p>
<div><p>Nested Text</p></div>
</div>
javascriptCopyEdit$(".box").children("p").css("color", "red");
🧠 Only the first <p> will turn red, not the nested one.
🔹 3. siblings()
Use: To select all siblings of an element (elements with the same parent).
✅ Example 1:
htmlCopyEdit<ul>
<li>Apple</li>
<li class="selected">Banana</li>
<li>Cherry</li>
</ul>
javascriptCopyEdit$(".selected").siblings().css("opacity", "0.5");
🧠 All items except Banana will become faded.
✅ Example 2:
htmlCopyEdit<div class="row">
<span>A</span>
<span class="active">B</span>
<span>C</span>
</div>
javascriptCopyEdit$(".active").siblings().hide();
🧠 Only B will be visible; A and C will be hidden.
🔹 4. find()
Use: To search for descendant elements (children, grandchildren, etc.)
✅ Example 1:
htmlCopyEdit<div id="section">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
javascriptCopyEdit$("#section").find("li").css("color", "green");
🧠 Changes color of all list items inside #section.
✅ Example 2:
htmlCopyEdit<div class="container">
<div class="card">
<p class="title">Product</p>
</div>
</div>
javascriptCopyEdit$(".container").find(".title").text("Updated Product");
🧠 Finds the .title text deep inside the .container.
🔸 Filtering and Chaining Selectors
jQuery allows chaining multiple methods to write clean code.
✅ Example:
javascriptCopyEdit$(".list").find("li").eq(1).css("font-weight", "bold");
🧠 Finds the second list item and makes it bold.
✅ Another Example:
javascriptCopyEdit$("#form").children("input").first().focus();
🧠 Focuses the first input field inside the form.
🔷 Part 2: jQuery Plugins
💡 What are Plugins?
A jQuery plugin is a pre-written piece of code that adds extra functionality, like image sliders, date pickers, or modals.
🔹 How to Use a jQuery Plugin
Include jQuery
Include Plugin JS/CSS files
Initialize the plugin in JavaScript
✅ Example: Using a Date Picker
htmlCopyEdit<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>
<input type="text" id="myDate">
</body>
htmlCopyEdit<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function() {
$("#myDate").datepicker();
});
</script>
🧠 Now the input field shows a calendar popup when clicked.
🔹 Popular jQuery Plugins
| Plugin Type | Use Case |
| Owl Carousel | Responsive sliders |
| jQuery UI | Datepickers, tooltips, modals |
| Select2 | Stylish dropdowns with search |
| DataTables | Interactive tables |
🔷 Part 3: Best Practices for Writing Efficient jQuery
✅ Tips for Good Performance:
Use caching:
javascriptCopyEditvar btn = $("#submitBtn"); btn.click(...);Minimize DOM access: Don’t select the same element multiple times.
Use event delegation:
javascriptCopyEdit$(document).on("click", ".dynamic-btn", function(){ alert("Clicked!"); });Chain methods instead of repeating:
javascriptCopyEdit$("#box").css("color", "red").slideDown().fadeIn();Avoid
document.readyinside loops or events.
🔚 Final Real-Life Example: Interactive FAQ Section
✅ HTML
htmlCopyEdit<div class="container mt-4">
<h3>FAQs</h3>
<div class="faq">
<p class="question">What is jQuery?</p>
<div class="answer">jQuery is a JavaScript library.</div>
</div>
<div class="faq">
<p class="question">What is AJAX?</p>
<div class="answer">AJAX allows data to be loaded without page refresh.</div>
</div>
</div>
✅ CSS
htmlCopyEdit<style>
.answer { display: none; color: gray; }
.question { cursor: pointer; font-weight: bold; }
</style>
✅ jQuery
javascriptCopyEdit$(document).ready(function() {
$(".question").click(function() {
// Collapse all other answers
$(this).parent().siblings().find(".answer").slideUp();
// Toggle current answer
$(this).next(".answer").slideToggle();
});
});
🧠 Clicking on a question shows the answer and hides others — using parent(), siblings(), and find() in action!
🎯 Summary
| jQuery Feature | Real Use Case |
parent() | Target a parent container on click |
children() | Style only direct inner elements |
siblings() | Show/hide other items in a group |
find() | Deep search for nested elements |
| Plugins | Add features like sliders or pickers |
| Best Practices | Keep your jQuery fast and clean |
Let me know if you want article on any other topics as well .