Basic jQuery Syntax and Selectors: Navigating the DOM Like a Pro

Beginner

🧱 DOM Manipulation with jQuery

jQuery simplifies DOM manipulation using a concise syntax:

$(selector).action()
  • The $ function is shorthand for jQuery()

🔍 Common Selectors

  • $('p') → Targets all <p> tags
  • $('#id') → Targets element with a specific ID
  • $('.class') → Targets elements with a specific class

✏️ Example: Change Paragraph Text

$(document).ready(function(){
  $('p').text('New paragraph content');
});

✅ This code waits until the DOM is fully loaded, ensuring elements are accessible before manipulation.

🎯 Advanced Selection

jQuery selectors can be combined and refined for precise targeting:

  • $('div > p.highlight') → Paragraphs with class highlight directly inside <div>
  • $('ul li:first') → First <li> in a list

Using jQuery's selector engine, developers can easily and efficiently manipulate document elements with minimal code.