jQuery is a popular JavaScript library that simplifies DOM manipulation, event handling, animations, and more. This guide explains how to include jQuery in your project and utilize its features.
You can include the jQuery library via a CDN (Content Delivery Network). This is a fast and easy method.
Add the following <script> tag to your <head> or before the closing <body> tag:
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>Download the jQuery library from the official website: https://jquery.com/download/.
Add the file to your project (e.g., in a js folder) and include it as follows:
<script src="js/jquery-3.6.4.min.js"></script>If you're using Webpack, you can install jQuery as a module:
Run the following command in the terminal:
npm install jqueryUse the following import statement in script.js or any other file:
import $ from 'jquery';<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<div class="list">
<button id="btn" class="list-item">First</button>
<button class="list-item">Second</button>
<button class="list-item">Third!</button>
<button class="list-item">Fourth</button>
<button class="list-item">Fifth</button>
</div>
<div class="wrapper">
<img src="https://cdn.pixabay.com/photo/2018/02/13/23/41/nature-3151869_960_720.jpg" alt="1" class="image">
<img src="https://cdn.pixabay.com/photo/2018/03/06/03/56/cyclist-3202481_960_720.jpg" alt="2" class="image">
</div>
<script src="dist/bundle.js"></script>
</body>
</html>File script.js:
import $ from 'jquery';
$(document).ready(function() {
// Add the 'active' class when hovering over the first list item
$('.list-item:first').hover(function() {
$(this).toggleClass('active');
});
// Toggle visibility of even images when clicking the third list item
$('.list-item:eq(2)').on('click', function() {
$('.image:even').fadeToggle('slow');
});
// Animate odd images when clicking the fifth list item
$('.list-item:eq(4)').on('click', function () {
$('.image:odd').animate({
opacity: 'toggle',
height: 'toggle'
}, 2000);
});
});-
Hover Effect on the First List Item: When hovering over the button labeled "First," it toggles the
activeclass. -
Toggle Visibility of Even Images: Clicking on the "Third!" button toggles the visibility of even images with a
fadeToggleeffect. -
Animate Odd Images: Clicking on the "Fifth" button animates odd images by toggling their opacity and height.
File webpack.config.js:
'use strict';
let path = require('path');
module.exports = {
mode: 'production',
entry: './script.js',
output: {
filename: 'bundle.js'
},
watch: true,
devtool: "source-map",
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', {
debug: true,
corejs: 3,
useBuiltIns: "usage"
}]]
}
}
}
]
}
};-
Install Dependencies:
npm install
-
Build the Project:
npx webpack
-
Run in Development Mode:
npm run start
- Official jQuery Website: https://jquery.com/
- Webpack Documentation: https://webpack.js.org/