jQuery

Details
Category: jQuery

DOM (Document Object Model) manipulation with jQuery allows you to easily interact with and modify HTML elements on a webpage. jQuery simplifies these tasks by providing a convenient and efficient way to select elements and perform various operations on them. To get started, make sure you have included the jQuery library in your HTML file.

 

You can do this by including the following script tag in the <head> section or just before the closing <body> tag

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

Selecting Elements

To manipulate elements, we need to select them first. jQuery offers powerful selectors similar to CSS selectors.

HTML

<div id="example">
  <p>Hello, World!</p>
  <p>How are you today?</p>
</div>

jQuery

// Selecting by tag name
var paragraphs = $('p');

// Selecting by ID
var exampleDiv = $('#example');

// Selecting by class
var someClassElements = $('.some-class');

// Selecting by attribute
var inputElements = $('[type="text"]');

 

Modifying Element Content

You can change the content of HTML elements using jQuery.

HTML

<p id="my-paragraph">This is some text.</p>

jQuery

Details
Category: jQuery

Event handling in jQuery allows you to respond to user interactions with elements on the web page. Below are some examples of event handling using jQuery.

 

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Event Handling Examples</title>
</head>
<body>
  <button id="btnClick">Click Me</button>
  <input type="text" id="textInput">
  <p>Hover over this paragraph.</p>
  <select id="selectOption">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/script.js"></script>
</body>
</html>

 

jQuery (script.js)

Details
Category: jQuery

Here are some examples of selecting elements with jQuery.

 

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Element Selection Examples</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/script.js"></script>
</body>
</html>

 

jQuery (script.js)

Details
Category: jQuery

Using jQuery's $(document).ready() function is a way to ensure that your JavaScript code executes only after the HTML document has been fully loaded. It prevents issues where your code tries to access elements before they are available in the DOM.

Here's an example of how to use $(document).ready()

HTML

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Document Ready Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple example demonstrating the use of jQuery's document ready function.</p>
  <button id="myButton">Click Me</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="/script.js"></script>
</body>
</html>

 

jQuery (script.js)