10. JQuery
JQuery
- jQuery is a fast, small, and feature-rich JavaScript library.
- It simplifies various tasks such as DOM manipulation, event handling, animation, and AJAX interactions.
- jQuery is a lightweight, "write less, do more", JavaScript library.
- The purpose of jQuery is to make it much easier to use JavaScript on your website.
- jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
link : JQuery
1. Getting Started:
Include jQuery:
You can include jQuery in your HTML file by adding the following script tag in the `<head>` section:
//Path
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Or you can download the jQuery library from the official website and host it locally.
2. Basic Syntax:
Document Ready:
To ensure your code runs after the DOM is fully loaded, use the `$(document).ready()` function or the shorthand `$(function() { })`:
Syntax :
$(document).ready(function() {
// jQuery code goes here
});
Selectors:
jQuery uses CSS-style selectors to target HTML elements. Examples:
// Select by element name
$("p")
// Select by class
$(".myClass")
// Select by ID
$("#myId")
```
3. DOM Manipulation:
1) Get/Set Content:
// Get text content
var text = $("p").text();
// Set text content
$("p").text("New text content");
2) Get/Set HTML:
// Get HTML content
var html = $("div").html();
// Set HTML content
$("div").html("<p>New HTML content</p>");
3)Attribute Manipulation:
// Get attribute value
var src = $("img").attr("src");
// Set attribute value
$("img").attr("alt", "New image description");
4) CSS Manipulation:
// Add a CSS class
$("div").addClass("newClass");
// Remove a CSS class
$("div").removeClass("oldClass");
// Toggle a CSS class
$("div").toggleClass("active");
4. Event Handling:
1) Click Event:
$("button").click(function() {
// Code to run on button click
});
2) Hover Event:
$("p").hover(
function() {
// Code to run on mouseenter
},
function() {
// Code to run on mouseleave
}
);
5. Effects and Animations:
1) Hide/Show:
// Hide element
$("#myElement").hide();
// Show element
$("#myElement").show();
2) Fade:
// Fade out
$("#myElement").fadeOut();
// Fade in
$("#myElement").fadeIn();
3) Slide:
// Slide up
$("#myElement").slideUp();
// Slide down
$("#myElement").slideDown();
6. AJAX:
Load Data:
// Load content from a file
$("#result").load("content.html");
- $.ajax():
$.ajax({
url: "example.com/data",
method: "GET",
dataType: "json",
success: function(data) {
// Code to handle successful response
},
error: function(xhr, status, error) {
// Code to handle errors
}
});
AJAX
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
What is AJAX?
- AJAX = Asynchronous JavaScript and XML.
- In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.
- Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs.
What About jQuery and AJAX?
jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!
jQuery load() Method
- The jQuery load() method is a simple, but powerful AJAX method.
- The load() method loads data from a server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);
- The required URL parameter specifies the URL you wish to load.
- The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
- The optional callback parameter is the name of a function to be executed after the load() method is completed.
AJAX get() and post() Methods
- The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request.
- HTTP Request: GET vs. POST
- Two commonly used methods for a request-response between a client and server are: GET and POST.
GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource
- GET is basically used for just getting (retrieving) some data from the server. Note: The GET method may return cached data.
- POST can also be used to get some data from the server. However, the POST method NEVER caches data, and is often used to send data along with the request.
jQuery $.get() Method
- The $.get() method requests data from the server with an HTTP GET request.
Syntax:
$.get(URL,callback);
- The required URL parameter specifies the URL you wish to request.
- The optional callback parameter is the name of a function to be executed if the request succeeds.
jQuery $.post() Method
- The $.post() method requests data from the server using an HTTP POST request.
Syntax:
$.post(URL,data,callback);
- The required URL parameter specifies the URL you wish to request.
- The optional data parameter specifies some data to send along with the request.
- The optional callback parameter is the name of a function to be executed if the request succeeds.
Comments
Post a Comment