Scribd
Upload
78 views

JEE-Lecture 50 (JQuery) PDF

The document discusses jQuery, a JavaScript library that simplifies HTML document manipulation. It provides advantages like efficient DOM traversal, easy creation of animations and effects with single lines of code, and compatibility across browsers. The document outlines how to install jQuery via CDN or by downloading, and provides examples of using jQuery to add text to an element and change its font color via chaining methods.

Uploaded by

Ashutosh Tripathi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

JEE-Lecture 50 (JQuery) PDF

The document discusses jQuery, a JavaScript library that simplifies HTML document manipulation. It provides advantages like efficient DOM traversal, easy creation of animations and effects with single lines of code, and compatibility across browsers. The document outlines how to install jQuery via CDN or by downloading, and provides examples of using jQuery to add text to an element and change its font color via chaining methods.

Uploaded by

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

JAVA EE

(ADVANCE JAVA)
LECTURE-6 2
Today’s Agenda

 Introduction To JQuery

 Advantages Of JQuery

 Downloading JQuery

 Examples
WHAT IS JQUERY?

 jQuery is a precoded JavaScript library.

 In other words , it is a collection of predefined


JavaScript functions which makes it easier for us to
use JavaScript on our website.
ADVANTAGES OF JQUERY

 The biggest advantage of jQuery comes from its


selectors that allow us to traverse the DOM tree of
an HTML document's structure in an efficient
manner.

 Additionally, using the jQuery inbuilt methods we


can create animations and effects like sliding
transition, showing or hiding an element, etc.
with a single line of code.
ADVANTAGES OF JQUERY

 Saves lots of time — We can save lot of time and


efforts by using the jQuery inbuilt effects and
selectors

 Simplifies common JavaScript tasks — jQuery


considerably simplifies the common JavaScript
tasks. Now we can easily create feature rich and
interactive web pages with fewer lines of codes, a
typical example is retrieving the information from a
server and updates the page without refreshing.
ADVANTAGES OF JQUERY

 Easy to use — jQuery is very easy to use. Anybody with


the basic working knowledge of HTML, CSS and
JavaScript can start development with jQuery.

 Compatible with browsers — jQuery is created with


modern browsers in mind and it is compatible with all
major modern browsers such as Mozilla Firefox, Google
Chrome, Safari, Internet Explorer, and Opera.

 Absolutely Free — And the best part is, it is completely


free to download and use.
HOW TO INSTALL
JQUERY

 There are two ways to install jQuery :

1. Call direct from a CDN


a) Faster Download.
b) Might have already been cached.

2. Download your own copy


a) Works with no internet connection.
WHAT IS A CDN?

 CDN stands for Content Delivery Network and


is a system of distributed servers (network) that
deliver webpages and other web content to a user.
GETTING JQUERY
FROM CDN

 To get jQuery from a CDN just mention the URL of the


CDN in <script> tag.

From Google CDN


<script
src=“http://ajax/googleapis.com/ajax/libs/jquery/3.1.1/j
query.min.js’></script>

From Microsoft CDN


<script
src=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.1.0.min.js></script>
EXAMPLE
<html>
<head>
<title>Getting Jquery From Google</title>
<script
src=“https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.
min.js">
</script>
<script>
// your code goes here
</script>
</head>
<body>
..
</body>
</html>
DOWNLOADING
JQUERY

 We can download it from www.jquery.com

 There are two versions :

1. “Production” for our live website , because it has been


minified and compressed to take up the least amount of
space.

2. “Development” for testing and development. It hasn’t


been minified or compressed, so we can read the code
in-case we want to know how jquery works.
FIRST EXAMPLE
THE READY EVENT

 In jQuery there is a special event called ready


belonging to document object which allows us to
assign some code and the browser will execute this
code as soon as the loading the page is over.

 So in this way we can remove jquery code from body


tag and put it in head tag
EXAMPLE
ANONYMOUS FUNCTION
WITH READY EVENT
CHANGING FONT

 In jQuery we have a function called css( ) which is


used to change CSS properties of HTML elements.

 For ex: to change font color - >

$(“#div1”).text(“Hello World”);
$(“#div1”).css(“color”,”red”);
CHAINING METHODS

 jQuery allows us to chain methods i.e. we can call


second method in continuation with the first method
and this proves to be very handy way of writin ghte
code.

 For ex: to set the font and change it’s color

$(“#div1”).text(“Hello World”).css(“color”,”red”);
EXAMPLE
End Of Lecture

For any queries mail us @: scalive4u@gmail.com


Call us @ : 0755-4271659, 7879165533

Agenda for Next Lecture:


1. Introduction To Jquery Selectors
2. Types Of Selectors
3. Selector Syntax And Uses
4. Examples

You might also like