A JavaScript library for faster web development
jQuery is a popular, fast, and lightweight Javascript library that makes it easier to manipulate HTML, handle events, create animations, and perform AJAX requests.
jQuery was developed by John Resigi in 2006 and is still widely used in web development, although modern frameworks such as React, Vue and Angular have taken over some of its functionality.
What is jQuery?
jQuery is an open-source library that makes writing JavaScript code easier by:
✅ Simplify DOM manipulation (change HTML content dynamically)
✅ Handle events (click, scroll, keystroke, etc.)
✅ Create animations and effects
✅ Improve AJAX queries (retrieve data without reloading the page)
✅ Make JavaScript cross-browser compatible
How to add jQuery to your project
You can include jQuery on your website via a CDN (Content Delivery Network) or download it locally.
🔹 Include jQuery via a CDN (recommended):
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
🔹 Include jQuery locally (if you downloaded the file):
<script src=”js/jquery.min.js”></script>
Basic syntax in jQuery
jQuery syntax is simple and always begins with $(selector).action(), where:
- $ refers to jQuery.
- selector selects HTML elements.
- action() performs an action on the selected items.
Example – Hide an element by clicking a button:
<button id=”hideBtn”>Skjul tekst</button>
<p id=”text”>This is a text that can be hidden.</p>
<script>
$(document).ready(function(){
$(“#hideBtn”).click(function(){
$(“#text”).hide();
});
});
</script>
jQuery main features
1. DOM-manipulation
With jQuery, you can easily change HTML content and CSS styling dynamically.
Example – Change the text and color of an element:
<p id=”demo”>Change me!</p>
<button id=”changeText”>Click here</button>
<script>
$(document).ready(function(){
$(“#changeText”).click(function(){
$(“#demo”).text(“Text is changed!”).css(“color”, “red”);
});
});
</script>
2. Event Management (Events)
jQuery makes it easy to listen for user interactions like clicks, keystrokes, and mouse movements.
Example – Change background color on hover:
<p id=”hoverMe”>Hover over me!</p>
<script>
$(document).ready(function(){
$(“#hoverMe”).hover(function(){
$(this).css(“background-color”, “yellow”);
}, function(){
$(this).css(“background-color”, “”);
});
});
</script>
3. Animations and effects
jQuery has built-in animations that can be used to hide, show, or animate elements.
Example – Use.fadeOut() to fade out slowly:
<button id=”fadeBtn”>Go away!</button>
<p id=”fadeText”>I will slowly disappear…</p>
<script>
$(document).ready(function(){
$(“#fadeBtn”).click(function(){
$(“#fadeText”).fadeOut(1000);
});
});
</script>
4. AJAX – Retrieve data without reloading the page
jQuery makes it easy to work with AJAX and retrieve data from a server.
Example – Get data from an external file and display it in a div:
<button id=”loadData”>Fetch Data</button>
<div id=”content”></div>
<script>
$(document).ready(function(){
$(“#loadData”).click(function(){
$(“#content”).load(“data.txt”);
});
});
</script>
Advantages and disadvantages of jQuery
Like other technologies, frameworks, and solutions, jQuery also has its advantages and limitations.
Advantages:
✔ Simple syntax – Smaller and cleaner code than regular JavaScript.
✔ Cross-browser compatibility – Works the same on all browsers.
✔ Rapid development – Reduces development time for interactive elements.
✔ Many plugins – Extend functionality with jQuery plugins.
Cons:
❌ Heavy for modern applications – jQuery may be unnecessary in modern SPA frameworks like React or Vue.js.
❌ Performance challenges – jQuery can be slower than pure JavaScript in complex applications.
❌ Deprecated in some cases – Many modern browsers already support the features jQuery offers via vanilla JavaScript.
Will you be using jQuery in 2025?
jQuery is still relevant, but its use is declining, especially in larger web applications. Today, many developers prefer modern JavaScript frameworks such as:
- React.js– Used for interactive user interfaces.
- Vue.js– Lightweight alternative to React with similar functionality.
- Plain JavaScript (Vanilla JS) – Many jQuery functions can now be easily done with pure JavaScript.
👉 When should you use jQuery?
✅ If you are working on an older website with existing jQuery code.
✅ If you want to quickly add simple interactions without using a framework. ✅If you are making a simple landing page or WordPress page, where jQuery is already included.
The future of jQuery
jQuery is still a useful tool, but modern JavaScript frameworks have largely taken over its functionality. If you’re working on a new project, you should consider using JavaScript or a modern framework like React or Vue.
Do you need help with web development, JavaScript optimization or modern frontend frameworks? Contact Click infor professional advice🚀
