-
Selecting Elements:
$(selector): Selects elements based on CSS-style selectors.$('#elementId'): Selects an element by its ID.$('.className'): Selects elements by their class name.
-
Manipulating Elements:
.html(): Gets or sets the HTML content of an element..text(): Gets or sets the text content of an element..val(): Gets or sets the value of form elements like input, select, textarea..addClass(),.removeClass(),.toggleClass(): Adds, removes, or toggles CSS classes on elements.
-
Traversing the DOM:
.find(): Finds descendant elements of the selected elements..parent(),.children(),.siblings(): Traverse up or down the DOM tree..closest(): Finds the first ancestor that matches the selector.
-
Binding Events:
.click(),.dblclick(),.hover(): Binds click, double click, hover events..on(): General method for attaching events..delegate(),.live(): Event delegation for dynamically added elements (deprecated in newer versions).
-
Event Object:
event.preventDefault(): Prevents the default action of an event.event.stopPropagation(): Stops the event from bubbling up the DOM tree.event.target: Returns the element that triggered the event.event.which: Returns which keyboard key or mouse button was pressed.
-
Show/Hide:
.show(),.hide(): Shows or hides elements with optional animation..toggle(): Toggles the visibility of elements.
-
Fading:
.fadeIn(),.fadeOut(): Fades elements in or out..fadeToggle(): Toggles the fade in/out effect.
-
Sliding:
.slideDown(),.slideUp(): Slides elements down or up..slideToggle(): Toggles the sliding effect.
-
$.ajax():
- As mentioned earlier, for making AJAX requests to the server.
-
$.get(), $ .post():- Shortcut methods for making GET and POST requests.
-
JSONP:
-
$.getJSON(): Fetches JSON data using JSONP.
-
-
$.each():
- Iterates over a jQuery object, executing a function for each matched element.
-
$.trim():
- Removes leading and trailing whitespace from a string.
-
$.extend():
- Merges the contents of two or more objects together into the first object.
-
$.parseJSON():
- Parses a well-formed JSON string and returns the resulting JavaScript object.
-
$.noConflict():
- Relinquishes control of the $ variable, allowing other libraries to use it.
-
$.ready():
- Equivalent to
$(document).ready(), executes a function when the DOM is fully loaded.
- Equivalent to
-
Chaining:
- Most jQuery methods return the jQuery object itself, allowing for method chaining.
Here's one example for each of the mentioned jQuery functionalities:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM Manipulation Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv">Hello, World!</div>
<script>
// Changing the content of a div
$(document).ready(function() {
$('#myDiv').text('Hello, OpenAI!');
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Events Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
// Handling a click event
$(document).ready(function() {
$('#myButton').click(function() {
alert('Button clicked!');
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Effects and Animations Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv" style="display:none;">This is a hidden div.</div>
<button id="toggleButton">Toggle Div</button>
<script>
// Toggling a div
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#myDiv').toggle(1000); // Toggle with animation (1 second)
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="fetchButton">Fetch Data</button>
<div id="result"></div>
<script>
// Making an AJAX GET request
$(document).ready(function() {
$('#fetchButton').click(function() {
$.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
$('#result').text(JSON.stringify(data));
});
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Utility Functions Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myList">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
// Iterating over list items
$(document).ready(function() {
var items = '';
$('#myList li').each(function(index) {
items += 'Item ' + (index + 1) + ': ' + $(this).text() + '<br>';
});
$('#myList').html(items);
});
</script>
</body>
</html>