Scribd
Upload
11 views19 pages

durgasoft_jQuery

The document provides an overview of jQuery, a JavaScript library that simplifies HTML manipulation, event handling, and AJAX support while ensuring cross-browser compatibility. It outlines the advantages and limitations of jQuery, demonstrates how to include it in applications, and offers examples of using jQuery for selecting and manipulating HTML elements. Additionally, it lists commonly used jQuery methods and provides sample code for various operations.

Uploaded by

Aravind Radhakrishnan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views19 pages

durgasoft_jQuery

The document provides an overview of jQuery, a JavaScript library that simplifies HTML manipulation, event handling, and AJAX support while ensuring cross-browser compatibility. It outlines the advantages and limitations of jQuery, demonstrates how to include it in applications, and offers examples of using jQuery for selecting and manipulating HTML elements. Additionally, it lists commonly used jQuery methods and provides sample code for various operations.

Uploaded by

Aravind Radhakrishnan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

UI

TECHNOLOGIES

Study Material

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
140  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

jQuery
Official website: jquery.com

jQuery is a fast, small, and rich JavaScript library.


We can use jQuery Library to grab and maniulate html elements,to perform event handing
and ajax.
jQuery supports multiple browsers.i.e it provides support for cross browser compatibility.

The main advantage of jquery is it provides several methods and objects in the form of
javascript file, so that we can use these directly and developer's life got simplified.

Note: In Plain old java script(also known as Vanilla Java Script),we have to write every
thing manually. But if we jQuery,we are not required to write much code and we can use
its library directly.

Sample Code to Change Color of every h1 Tag:


Vanilla JS code:

1) var myh1=document.querySelectorAll('h1')
2) for( h1 of myh1){
3) h1.style.color='red';
4) }

jQuery Code:
$('h1').css('color','red')

Advantages of jQuery:
1) It provide several built in methods and objects. We can use these directly so that
development will become very easy.
2) Clear and Shorter code
3) Ease of use
4) Cross Browser support
5) AJAX support

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
141  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

Limitations of jQuery:
1) What ever jQuery doing, we can implement everything without jQuery also. ie jQuery
won't do any things extra.
2) The total library should be loaded compulsory, which creates performance problems.

Note: Because of above limitations, some part of the developer's community won't
recommend jQuery usage.
Eg: youmightnotneedjquery.com

How to connect with jQuery:


We can make jQuery library available to our application in the following 2 ways
1) By Locally
2) By CDN

1) By Locally:
 Download jQuery.js file from jquery.com  https://code.jquery.com/jquery-3.3.1.js
 Download and place in application folder.
 Inside head of html we have to write <script> tag as follows
<script type="text/javascript" src="jquery.js"></script>

2) By using CDN:
www.code.jquery.com

1) <script
2) src="http://code.jquery.com/jquery-3.3.1.js"
3) integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
4) crossorigin="anonymous"></script>

We can get several jquery CDNs from the google

Eg: <script type="text/javascript"


src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to Check whether jQuery available or not in our Application:


From the console just type
> jQuery or $
We should not get any error

jQuery Selectors:
In Vanilla Javascript we have several methods to select/grab html elements like
getElementById()
getElementsByClassName()

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
142  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

getElementsByTagName()
querySelector()
querySelectorAll()
etc
But in jQuery we have only one way to select html elements.i.e to use $ symbol

In jQuery $ symbol is equivalent to querySelectorAll() in Vanilla Javascript

Demo Application
demo.html

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <script
5) src="http://code.jquery.com/jquery-3.3.1.js"
6) integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
7) crossorigin="anonymous"></script>
8) <meta charset="utf-8">
9) <title></title>
10) </head>
11) <body>
12) <h1>Hello First H1</h1>
13) <h2>Favourate Drink:</h2>
14) <ul>
15) <li>KingFisher</li>
16) <li>KnockOut</li>
17) <li>Foster</li>
18) <li id='special'>HumanBlood</li>
19) </ul>
20) <a href="https://google.com">Click Here to go to Google</a>
21) </body>
22) </html>

jQuery code:

$('h1')
$('li')
$('#special')
$('body')
etc...

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
143  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

Manipulating HTML Elements:


Once we grab elements by using $ symbol, we can manipulate by using css() method.

Syntax: $(selector).css(property,value)

Examples:
$('h1').css('color','white');
$('h1').css('background','red');
$('h1').css('border','5px solid green');

We can save selected html element by using variable

var x = $('h1')
x.css('color','white');
x.css('background','red');
x.css('border','5px solid green');

Instead of passing parameters one by one,we can create Object and pass that object
directly.

1) var x = $('h1')
2) var myCSS={
3) color:'white',
4) background:'green',
5) border:'red 5px solid'
6) }
7) x.css(myCSS);

Note: We can use $ Symbol to select and css() Method to manipulate HTML Elements.

How to Select a particular HTML Element instead of all


matched Elements:
By default $('element') selects all matched html elements.
But by using the following ways we can get particular matched element.

$('element:first')
$('element:last')
$('element:first-of-type')
$('element:nth-of-type(n)')
etc...

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
144  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

Eg:
1) $('h1')  Selects all h1 tags
2) $('h1:first')  Selects only first h1 tag
3) $('h1').first()  Selects only first h1 tag
4) $('h1:first-of-type')  Selects only first h1 tag
5) $('h1:nth-of-type(2)')  Selects second h1 tag
6) $('h1:last')  Selects only last h1 tag
7) $('h1').last()  Selects only last h1 tag

Q1) Write Vanilla JavaScript and jQuery Codes to Change all h1 Tags
Text Color as White and Background as Red
Vanilla JavaScript Code:

1) var allh1s=document.querySelectorAll('h1');
2) for(h1 of allh1s){
3) h1.style.color='white';
4) h1.style.background='red';
5) }

jQuery Code:

1) var mystyles={
2) color:'white',
3) background:'red'
4) };
5) $('h1').css(mystyles)
6)
7) Instead of this we can write directly as follows
8)
9) $('h1').css({
10) color:'white',
11) background:'red'
12) });

Q2) Write Vanilla JavaScript and jQuery Codes to set all li


Tags Font Size as 20px
Vanilla JavaScript Code:

1) var x=document.querySelectorAll('li');
2) for(li of x){
3) li.style.fontSize='20px';
4) }

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
145  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

jQuery Code:
$('li').css('fontSize','20px')

Note: The biggest advantage of jQuery is we can do more things with less Code (Write
less, do More)

Demo Application
demo.html

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <script
5) src="http://code.jquery.com/jquery-2.2.4.js"
6) integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
7) crossorigin="anonymous"></script>
8) <meta charset="utf-8">
9) <title></title>
10) </head>
11) <body>
12) <p>This is First Paragraph</p>
13) <p id="second">This is Second Paragraph</p>
14) <p class="remaining">This is Third Paragraph</p>
15) <p class="remaining">This is Fourth Paragraph</p>
16) </body>
17) </html>

Case-1: Select all <p> tags and set background as green


$('p').css('background','green')

Case-2: Select all <p> tags with class 'remaining' and make them 200px wide(width)
$('.remaining').css('width','200px')

Case-3: Select all <p> tags with id 'second' and give red solid 10px border.
$('#second').css('border','10px solid red')

case-4: Select only first <p> tag and change text color as white
$('p:first').css('color','white')

case-4: Select only third <p> tag and change font-size as 30px
$('p:nth-of-type(3)').css('fontSize','30px')

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
146  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

The Most commonly used jQuery Methods:


The following are the most commonly used jQuery methods
1) text()
2) html()
3) attr()
4) val()
5) addClass()
6) removeClass()
7) toggleClass()

1) text():
 We can use this method to get and set text of the matched elements. i.e this method
acts as both getter and setter method.
 text()  To get text of all matched elements including child tags.In this case this
method acts as getter method
 text(content)  To set provided text content for every matched element. In this case
this method acts as setter method.

Note: If any method developed to acts as both getter and setter method then it is said to
be this method follows getter and setter paradigm.

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <script
5) src="http://code.jquery.com/jquery-2.2.4.js"
6) integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
7) crossorigin="anonymous"></script>
8) <meta charset="utf-8">
9) <title></title>
10) </head>
11) <body>
12) <h1>This is H1 Data</h1>
13) <h2>Choose Your Favourate Subject:</h2>
14) <ul>
15) <li>HTML</li>
16) <li>JavaScript</li>
17) <li>CSS</li>
18) <li>jQuery</li>
19) </ul>
20) </body>
21) </html>

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
147  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

1) To get Text Content of h1:


$('h1').text()

2) To get Text of all li Tags


$('li').text() OR $('ul').text()

3) To get Text of only First li


$('li').first().text()

4) To Set h1 Text Content as : DURGA SOFTWARE SOLUTIONS


$('h1').text('DURGA SOFTWARE SOLUTIONS')

5) To Set Every li Tag Text Content as : KINGFISHER


$('li').text('KINGFISHER')

2) html():
 We can use this method to get and set html content.
 If we are not passing any argument then this method acts as getter method, which
returns HTML contents of the first matched element.
 Eg: $('h1').html()
 If we are passing argument then this method acts as setter method,which sets the
HTML contents of every matched element.
 Eg: $('li').html('<a href="https://amazon.com">AMAZON</a>')

3) attr():
 We can use this method to get and set attribute values.
 attr(attributename)  To get the value of specified attribute of the first matched
element.

 attr(attributename,attributevalue)  If the specified attribute already there then old


value replaced with new value. If the specified attribute not already available then a
new attribute will be added for every matched tag.

Demo for getting and setting src Attribute of img Tag:


<img src="https://images.unsplash.com/photo-1462953491269-9aff00919695?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e2dea8d19793b1474b4c4962a98f0b47&auto=for
mat&fit=crop&w=400&q=60" alt="">
<img src="https://images.unsplash.com/photo-1460999158988-6f0380f81f4d?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5a982cdff8b38d0758caa758e71f50e0&auto=form
at&fit=crop&w=400&q=60" alt="">
<img src="https://images.unsplash.com/photo-1504350440606-81847d413a13?ixlib=rb-
0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bdf251e852bd65abcc522fc4e903da02&auto=for
mat&fit=crop&w=400&q=60" alt="">

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
148  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

1) To Set Width and Height of every Image Properly


$('img').css({width:'150px',height:'150px'});

2) To get src Attribute Value of the First Image


$('img').attr('src')

3) To Set src Attribute of all Images with Our New Image


$('img').attr('src',"https://images.unsplash.com/photo-1484406566174-
9da000fda645?ixlib=rb-0.3.5&ixid= eyJhcHBfaWQiOjEyMDd9 &
s = a439fe04a06e1457297643e219add900&auto=format&fit=crop&w=400&q=60");

4) To Change only First Image src Attribute Value


$('img').first().attr('src',"https://images.unsplash.com/photo-1504350440606-
81847d413a13?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&
s = bdf251e852bd65abcc522fc4e903da02&auto=format&fit=crop&w=400&q=60")

Demo for getting and setting Type Attribute of Input Tag:


User Input: <input type="text" name="" value="">

1) To get the Value of Type Attribute of Input Tag


$('input').attr('type')

2) To Set the Value of Type Attribute with 'color'


$('input').attr('type','color')

3) To Set the Value of Type Attribute with 'checkbox'


$('input').attr('type','checkbox')

4) val() Method:
We can use val() method to get value of the first matched element.
Eg: value entered in the text box
which radio button selected
which value selected from dropdown box

We can also use val() method to set value for every matched element.
val()  Getter Method
val(text)  Setter Method

Eg 1: with input tag


Enter Name:<input type="text" name="user1" value="" placeholder="Your Name">
Enter Name:<input type="text" name="user2" value="" placeholder="Your Name">
$('input').val()  It returns the value entered by the end user in the first text box.
$('input').val('durga') To set value durga for every text box.

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
149  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

Usecase: While implementing reset button functionality to clear all input fields this
method is helpful.

Eg 1: with dropdown menu

Choose Your Required Course:

1) <select class="" name="">


2) <option value="CorePython">Core Python</option>
3) <option value="AdvPython">Adv Python</option>
4) <option value="DJango">DJango</option>
5) <option value="Flask">Flask</option>
6) </select>

$('select').val()  Returns Selected Value


$('select').val('DJango')  To set value as DJango

5) addClass(): We an use this method to add specified class/classes to the set of


matched elements.

6) removeClass(): Remove a single class/classes from each matched element.

7) toggleClass(): We can use this method to add and remove classes from the
matched elements.

If the specified class already set then it will be removed. It is not already set then the class
will be added for every matched element.

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <script
5) src="http://code.jquery.com/jquery-2.2.4.js"
6) integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
7) crossorigin="anonymous"></script>
8) <meta charset="utf-8">
9) <title></title>
10) <style >
11) .high{
12) color:white;
13) background:red;
14) }
15) .low{
16) color:white;

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
150  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

17) background: blue;


18) }
19) .completed{
20) text-decoration: line-through;
21) }
22) </style>
23) </head>
24) <body>
25) <h1>List of Activities: </h1>
26) <ul>
27) <li>Meeting Sunny</li>
28) <li>Reading DJango</li>
29) <li>Taking Classes</li>
30) <li>Visiting US</li>
31) <li>Watching Movie</li>
32) <li>Playing Cricket</li>
33) <li>Swimming </li>
34) </ul>
35) </body>
36) </html>

1) $('li').addClass('high')
It will add 'high' class to every li tag

2) $('li:nth-of-type(even)').removeClass('high')
It will remove 'high' class from every even numbered li tag.

3) $('li:nth-of-type(2)').addClass('completed')
It will add 'completed' class only for 2nd li

4) $('li').toggleClass('low')
It will add 'low' class for every li tag(because this class is not already set)

5) $('li').toggleClass('low')
It will remove 'low' class from every li tag(because this class is already set)

Event Handling by using jQuery:


 We can implement event handling to make our html elements interactive.
 jQuery defines several methods for event handling. We can get complete jquery event
handling related methods from below link: https://api.jquery.com/category/events/

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
151  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

The Top 3 Most Commonly used jQuery Event Methods:


1) click()
2) keypress()
3) on()

1) click():
jQuery click() method can be used to add a click listener to the elements.

Eg 1: To raise alert message when ever we are clicking h1 tag.

1) $('h1').click(function(){
2) alert('h1 tag got clicked');
3) });

Eg 2: To raise alert message and to change background color of last button on click event

1) $('button:last').click(function(){
2) alert('Hello Stupid Dont Sleep I will Kill You!!!');
3) $(this).css('background','red')
4) });

Note: In Vanilla Java Script, 'this' always represent current element. But in jQuery we
have to use $(this)

Demo Application:

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <script
5) src="http://code.jquery.com/jquery-2.2.4.js"
6) integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
7) crossorigin="anonymous"></script>
8) <meta charset="utf-8">
9) <title></title>
10) </head>
11) <body>
12) <h1>jQuery Event Handler Demo </h1>
13) <button type="button" name="button">Dont Sleep First Warning</button>
14) <button type="button" name="button">Dont Sleep Second Warning</button>
15) <button type="button" name="button">Dont Sleep Third Warning</button>
16) <script type="text/javascript" src="demo.js">
17) </script>
18) </body>

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
152  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

19) </html>

demo.js:

1) $('h1').click(function(){
2) alert('h1 tag clicked')
3) })
4) $('button:first').click(function(){
5) alert('Hello Dont Sleep');
6) $(this).css('background','yellow')
7) });
8) $('button:nth-of-type(2)').click(function(){
9) alert('Dont Sleep I will beat you');
10) $(this).css('background','orange')
11) });
12) $('button:last').click(function(){
13) alert('Hello Stupid Dont Sleep I will Kill You!!!');
14) $(this).css('background','red')
15) });

2) keypress():
 We can use this method to add keypress listener to elements.
 i.e whenever we are pressing the key if we want to do any activity automatically then
we should go for keypress() method.
 Eg: To raise alert message for every character typed in text box
Enter Name: <input type='text'>

jQuery Code:

1) $('input').keypress(function(){
2) alert('Inserted one character!!!!');
3) })

To Know the pressed Character:


 In the case of keypress event, the total information is avaialable in the event object.
For every character the corresponding key-code is available.
 char-code, unicode,ascii code, which all represents same key-code
 The complete key-code information is avilable in the following link
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
 If we use event.which, then we will get the corresponding key-code

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
153  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

To raise Alert Message whenever we are pressing x OR X:


1) $('input').keypress(function(event){
2) if (event.which==88 || event.which==120)
3) {
4) alert('Hello You are pressing x or X. You are under monitoring !!!!')
5) }
6) })

Note: The key-code for 'x' is: 120 where as for 'X' is: 88

To raise Alert Message with typed Content whenever we


are pressing Enter Key:
1) $('input').keypress(function(event){
2) if (event.which==13)
3) {
4) alert('Hello just pressed enter key and your current content is:'+$(this).val())
5) }
6) })

Difference between keypress and keydown, keyup Events:


keydown and keyup provides a code indicating which key is pressed, where as keypress
indicates that which character was entered.
Eg: For shift+a

1) keydown for 'shift'


2) keydown for 'a'
3) keyup for 'a'
4) keyup for 'shift'
5) key press for 'A'

3) on():
 on() is the most commonly used method to perform event handling in jQuery.
 It is similar to Vanilla Java Script addEventListener() method.

 click()  applicable only for click event


 keypress()  applicable only for keypress event
 on()  applicable for all events including click and keypress.

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
154  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

Eg 1: Whenever mouseover event happend, the text of h1 tag should be changed to


'Bangalore City' with red background and white text.

Whenever mouseout event happend, the text of h1 tag should be changed to 'Hyderabad
City' with green background and white text.

1) $('h1').on('mouseover',function(){
2) $(this).text('BANGALORE CITY')
3) $(this).css({background:'red',color:'white'});
4) })
5) $('h1').on('mouseout',function(){
6) $(this).text('HYDERABAD CITY')
7) $(this).css({background:'green',color:'white'});
8) })

Eg 2: For button
Single Click: alert message as Hello Stupid dont click
Double Click: alert message as Hello Animal I will kill you

html

1) <button type="button" name="button">Click Here to get Greeting Message</butto


n><br><br>
2) <button type="button" name="button">Double Click Here to get Greeting Message
</button>

jQuery

1) $('button:first').on('click',function() {
2) alert('Hello Stupid Dont Click!!!')
3) })
4)
5) $('button:last').on('dblclick',function() {
6) alert('Hello Animal I Will Kill You!!!')
7) })

jQuery Effects:
jQuery provides several in-built effects.But main important effects are:

1) Fading Effects
2) Sliding Effects

https://api.jquery.com/category/effects/

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
155  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

I) Fading Effects:
jQuery defines the following methods for fading purposes

1) fadeOut():
Hide the matched elements by fading them to transparent.

2) fadeIn():
Display the matched elements which are fadeout

3) fadeToggle():
Display or hide the matched elements
If already fadeOut then fadeIn will be performed.
If already fadeIn then fadeOut will be performed.

Various Sample Codes:


1) $('div').fadeOut();
2) $('div').fadeOut(2000);
3) $('div').fadeOut(2000,function() {
4) console.log('Fadeout of the element completed');
5) });

2000 is the time in milliseconds


Similarly we can use these combinations for fadeIn() and fadeToggle() also.

Demo Application
demo.html

1) <!DOCTYPE html>
2) <html lang="en" dir="ltr">
3) <head>
4) <style>
5) div{
6) height: 100px;
7) width: 100px;
8) background: red;
9) color:white;
10) margin:20px;
11) text-align: center;
12) float: left;
13) }
14) </style>

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
156  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

15) <script src="http://code.jquery.com/jquery-2.2.4.js"


16) integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
17) crossorigin="anonymous"></script>
18) <meta charset="utf-8">
19) <title></title>
20) </head>
21) <body>
22) <button type="button" name="button">Click Here</button>
23) <div>First Div</div>
24) <div>Second Div</div>
25) <div>Third Div</div>
26) <div>Fourth Div</div>
27) </body>
28) <script type="text/javascript" src="demo.js">
29) </script>
30) </html>

demo.js

1) $('button').on('click',function(){
2) $('div').fadeToggle(2000);
3) })

Note: Whenever we perform fadeout just elements will be hidden but won't be removed.
But based on requirement we can remove the matched elements also.

1) $('button').on('click',function(){
2) $('div').fadeToggle(2000,function(){
3) $(this).remove()}
4) );
5) })

II) Sliding Effects:


jQuery defines the following methods for sliding effects purposes.

1) slideUp():
Hide the matched elements with a sliding motion.

2) slideDown():
Display the matched elements with a sliding motion.

3) slideToggle()
Display or hide the matched elements with a sliding motion.

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
157  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com
UI
TECHNOLOGIES

Eg:
$('button').on('click',function(){
$('div').slideToggle(2000);
})

Note: passing function as argument, remove matched elements are exactly same as
fading effects.

Assignments:
1) Connect4 Game
2) Todo List Application
3) Implement atleast 2 case studies from w3schools how to
https://www.w3schools.com/howto/

nd
DURGASOFT, # 202, 2 Floor, HUDA Maitrivanam, Ameerpet, Hyderabad - 500038,
158  040 – 64 51 27 86, 80 96 96 96 96, 92 46 21 21 43 | www.durgasoft.com

You might also like