Scribd
Upload
58 views

Unit-2 - JQuary Practical

The document discusses jQuery, which is a JavaScript library that simplifies HTML document manipulation and AJAX interactions. It allows selecting elements and performing actions with simple syntax, and includes features like event handling, animations, and AJAX functionality. Examples are provided to demonstrate reading text, CSV, and XML files using jQuery.

Uploaded by

jlo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
58 views

Unit-2 - JQuary Practical

The document discusses jQuery, which is a JavaScript library that simplifies HTML document manipulation and AJAX interactions. It allows selecting elements and performing actions with simple syntax, and includes features like event handling, animations, and AJAX functionality. Examples are provided to demonstrate reading text, CSV, and XML files using jQuery.

Uploaded by

jlo
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

JQuery:

 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.
 jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.
 The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities

jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on
the element(s).
Basic syntax is: $(selector).action()
 A $ sign to define/access jQuery
 A (selector) to "query (or find)" HTML elements
 A jQuery action() to be performed on the element(s)

Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

The Document Ready Event


$(document).ready(function(){

// jQuery methods go here...

});
This is to prevent any jQuery code from running before the document is finished loading (is ready).

1|Page
AJAX :
AJAX = Asynchronous JavaScript and XML.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without
reloading the whole page.
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.
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!
The key difference between Ajax and jQuery is that the jQuery is more like a Frame Work,
which is built using JavaScript while Ajax is a technique or a way of using JavaScript for
communicating with the server without reloading a web page. jQuery uses Ajax for many of its
functions

What is JQuery CDN?


JQuery CDN is a method to include jQuery into a website without actually downloading and
keeping it in the website’s folder.
JQuery CDN is a quick and concise JavaScript library that simplifies event handling, animation,
AJAX interactions, and HTML document traversing for fast website development. jQuery UI CDN
simplifies the client-side scripting of HTML; therefore, it simplifies the development of Web 2.0
applications.

The Document Object Model (DOM)


The Document Object Model (DOM) is a cross-platform and language-independent interface that
treats an XML or HTML document as a tree structure wherein each node is an object representing
a part of the document. The DOM represents a document with a logical tree. Each branch of the
tree ends in a node, and each node contains objects.
The Document Object Model (DOM) is a programming interface for web documents. It represents
the page so that programs can change the document structure, style, and content. The DOM
represents the document as nodes and objects; that way, programming languages can interact with
the page.

2|Page
Reading Text File_JQuary
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Click the button to display the array values</p>
<button onclick="myFunction()">Try it</button>
<div id="container"></div>
<script>
function myFunction()
{
jQuery.get('http://127.0.0.1:8080/SampleText.txt', function(theData)
{
$('#container').html(theData.replace(/\n/g,'<br>')); // g is for global search.
});

}
</script>
</body>
</html>

SampleText.txt
Line 1
Line 2
Line 30
Line 40
Line 50
Line 60

3|Page
Reading CSV File_JQuary
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>contains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Click the button to display the array values</p>
<button onclick="myFunction()">Try it</button>
<div id="container"></div>
<script>
function myFunction()
{
jQuery.get('http://127.0.0.1:8080/SampleCSV.csv', function(theData)
{
$('#container').html(theData.replace(/\n/g,'<br>').split(","));
});

}
</script>
</body>
</html>

SampleCSV.csv
A, B, C, D, E
F, G, H, I, J
K, L, M, N, O
P, Q, R, S, T
U, V, W, X, Y

4|Page
Reading XML File_Jquary
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<p>Click the button to display XML File Contant</p>
<button onclick="myFunction()">Data</button>
<div id="container"> </div>
<script>
function myFunction()
{
jQuery.get('http://127.0.0.1:8080/Sample.xml', function(data)
{
$(data).find('list').each(function() {
// Append new data to the DIV element.
$('#container').append( '<div>' +
'<div><b>Name of Book: </b>' +
$(this).find('BookName').text() + '</div> ' +
'<div><b>Category: </b>' +
$(this).find('Cat').text() + '</div> ' +
'<div><b>Price: </b>' +
$(this).find('Price').text() + '</div> ' + '</div>');
});
});
}
</script>
</body>
</html>
SampleXML.xml
<?xml version='1.0' ?>
<books>
<list>
<BookName> Data Visualization </BookName>
<Cat> Programming </Cat>
<Price> 2100 </Price>
</list>
<list>
<BookName> DV </BookName>
<Cat> Programming </Cat>
<Price> 3100 </Price>
</list>
</books>

5|Page

You might also like