Solved MCQ on JavaScript Window Object set-4

1. State whether the following statement are True or False for timers.

i) Like setTimeout(), setInterval() returns a value that can be passed to clearInterval() to cancel any future invocations of the scheduled function.

ii) If you call setTimeout() with a time of 0ms, the function you specify is not invoked right way.

A. i-True, ii-False

B. i-False,ii-True

C. i-True, ii-True

D. i-False, ii-False

2. The href property of the .......... object is a string that contains the complete text of the URL.

A. location

B. pathname

C. port

D. search

3. The .......... method of the Location object makes the window load and display the document at the URL you specify.

A. search()

B. load()

C. replace()

D. assign()

4) The ......... method removes the current document from the browsing history before loading a new document.

A. search()

B. remove()

C. replace()

D. assign()

5) Which of the following statements are True or False for Location object.

i) When a script unconditionally loads a new document, the replace() method is often a better choice than assign().

ii) In addition to the assign() and replace() methods, the Location object also defines reload(), which makes the browser reload the document.

iii) A only way to make the browser navigate to a new page is to simply assign the new full URL directly to the location property.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-False

C. i-False, ii-True, iii-True

D. i-False, ii-False, iii-True

6) The .......... properties of the location object are writable, and setting them changes the location URL and also causes the browser to load a new document.

A. URL composition

B. URL decomposition

C. URL parsing

D. URL component

7) The properties like protocol, host, hostname, port, pathname, search and hash of Location object specify the various individual parts of the URL, they are known as ............ properties.

A. URL composition

B. URL decomposition

C. URL parsing

D. URL component

8) Which of the following statements are True for history property of the window object.

i) The length property of the history object specifies the number of elements in the browsing history list.

ii) The history object has back() and forward() methods that behave like the browsers back and forward buttons do.

A. i only

B. ii only

C. Both i and ii

D. None of the above

9) ......... method of the history object, takes an integer argument and can skip any number of pages forward for positive arguments or backward for negative arguments in the history list.

A. back()

B. backward()

C. forward()

D. go()

10) ........ method brings webpage back like clicking the back button twice.

A. history.go(-2)

B. history.back.back()

C. history.back(2)

D. history.go(2)

11) Match the following properties of Navigator object to their description.

i) appName            a) that identifies the operating system

ii) appVersion        b) all the information along with appVersion

iii) UserAgent        c) browser vender and version information

iv) platform           d) full name of the web browser

A. i-b, ii-c, iii-d, iv-a

B. i-c, ii-d, iii-a, iv-b

C. i-d, ii-c, iii-b, iv-a

D. i-a, ii-d, iii-c, iv-b

12) The .......... property specifies whether the browser is currently connected to the network.

A. navigator.online

B. geolocation

C. javaEnabled()

D. cookiesEnabled()

13) A ........... object that defines an API for determining the user's geographical location.

A. navigator.online

B. geolocation

C. javaEnabled()

D. cookiesEnabled()

14) .......... displays a model dialog box containing HTML formatted content and allows arguments to be passed to, and a value returned from, the dialog.

A.alert()

B. conform()

C. prompt()

D. showModelDialog()

15) State whether the following statements are True or False for methods for displaying simple dialog box on window object.

i) alert() displays a message to the user and waits for the user to dismiss the dialog.

ii) conform() displays a message, waits for the user to click an OK or Cancel button and returns positive or negative value.

iii) prompt() displays a message, waits for the user to enter a string, and returns that string.

A. i-True, ii-False, iii-True

B. i-True, ii-True, iii-False

C. i-False, ii-True, iii-True

D. i-False, ii-False, iii-False

Answers:

1) C. i-True, ii-True
2) A. location
3) D. assign()
4) C. replace()
5) A. i-True, ii-True, iii-False
6) B. URL decomposition
7) B. URL decomposition
8) C. Both i and ii
9) D. go()
10) A. history.go(-2)
11) C. i-d, ii-c, iii-b, iv-a
12) A. navigator.online
13) B. geolocation
14) D. showModelDialog()
15) A. i-True, ii-False, iii-True

Related Posts:

• Solved MCQ of JavaScript set-1

• MCQ of JavaScript with Answer set-2

• Solved MCQ of CSS set-1

• MCQ of CSS With Answer set-2

• Objective Questions of CSS with Answer set-3

• Solved Objective Questions of CSS set-4

• Solved MCQ of Java Set-1

• Solved MCQ of Java Beans set-1

• Solved MCQ of Internet and HTML set-3

• Solved MCQ of Database Management System Set - 8

• Solved MCQ of System Analysis and Design Set-3

• Solved MCQ of Data Structure Set - 2

• MCQ of Computer Networking with answer set-4

For more Multiple Choice Questions (MCQs): Click Here

Solved MCQ on Basic Client Side JavaScript set-3

1. JavaScript can help to increase the user experience with which of the following method for a web page.

A. By creating animation and other effects to guide a user and help with page navigation.

B. By sorting the columns of a table to make it easier for searching on table.

C. By hiding certain content and revealing details progressively as the user "drills down" into that content.

D. All of the above.



2. Which of the following are the ways to embed Client side JavaScript code within HTML documents.

i) Inline, between a pair of <script> and </script> tags.

ii) From an external file specified by the src attribute of a <script> tag

iii) In an HTML event handler attribute, such as on-click or mouse over.

iv) In a URL that uses the special JavaScript protocol.

A. i, ii and iii only

B. ii, iii and iv only

C. i, ii and iv only

D. All i, ii, iii and iv



3. State Whether the following Statement about src attribute on JavaScript.

i) It simplifies the HTML files by allowing you to remove large blocks of JavaScript code from them.

ii) If a file of JavaScript code is shared by more than one page, it only needs to be downloaded once, by the first page that uses it.

iii) Linking to JavaScript code on Google servers can decrease the start-up time for the web pages, since the code already existed on all of the user's browser.

A. i-True, ii-False, iii-True

B. i-True, ii-True, iii-False

C. i-False, ii-True, iii-False

D. i-False, ii-False, iii-True



4) JavaScript code can register a/an ............. by assigning a function to a property of an element object that represents an HTML document in the document.

A. event handler

B. function handler

C. document handler

D. HTML handler



5) .......... specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter.

A. Javascript:web

B. JavaScript:code

C. JavaScript:protocol

D. JavaScript:interpreter




6) The ...... attribute causes the browser to defer execution of the script until after the document has been loaded and parsed and is ready to be manipulated.

A. sync

B. async

C. defer

D. All



7) The .......... attribute causes the browser to run the script as soon as possible but not to block document parsing while the script is being downloaded.

A. sync

B. async

C. defer

D. All



8) When the parser encounters a <script> element that has the ...... attribute set, it begins downloading the script text and continues parsing the document.

A. async

B. sync

C. parse

D. load



9) When the document is completely parsed, the document.readystate property changes to ......

A. ready

B. parsed

C. interactive

D. activated



10) Which of the following statements for restricted features of JavaScript is/are True.

A) A JavaScript program can open new browser windows, but must of the browsers restrict this feature.

B. A JavaScript program can close browser windows that it opened itself, but it is not allowed to close other windows without user conformation.

C. A script can read the content of documents loaded from different servers than the document that contains the script.

D. All of the above




11) ........... libraries are "frameworks" in the sense that they build a new higher-level API for client side programming on top of the standard and proprietary APIs offered by web browsers.

A. client-side framework

B. server-side framework

C. higher-level framework

D. web framework



12) The .......... library focuses on DOM and Ajax utilities, like jQuery does, and adds quite a few core-language utilities as well.

A. Dojo

B. Prototype

C. YUI

D. Closure



13) The ...... library is the client side library that Google uses for Gmail, Google Docs and other web applications.

A. Dojo

B. Prototype

C. GWT

D. Closure



14) ........ allow you to register a function to be invoked once or repeatedly after a specified amount of time has elapsed.

A. setTimeout()

B. setInterval()

C. Both A and B

D. None of the above



15) State True or False for the following Statements.

i) The setTimeout() method of the window object schedules a function to run after a specified number of milliseconds elapses.

ii) setTimeout() returns a value that can be passed to clearTimeout() to cancel the execution of the scheduled function.

iii) setTimeout() is like setInterval() except taht the specified function is invoked repeatedly at intervals of the specified number of milliseconds.

A. i-True, ii-False, iii-True

B. i-True, ii-True, iii-False

C. i-False, ii-True, iii-False

D. i-False, ii-False, iii-True

Answers:

1) D. All of the above.
2) D. All i, ii, iii and iv
3) B. i-True, ii-True, iii-False
4) A. event handler
5) C. JavaScript:protocol
6) C. defer
7) B. async
8) A. async
9) C. interactive
10) D. All of the above
11) A. client-side framework
12) B. Prototype
13) D. Closure
14) C. Both A and B
15) B. i-True, ii-True, iii-False

Related Posts:

• Solved MCQ of JavaScript set-1

• MCQ of JavaScript with Answer set-2

• Solved MCQ of CSS set-1

• MCQ of CSS With Answer set-2

• Objective Questions of CSS with Answer set-3

• Solved Objective Questions of CSS set-4

• Solved MCQ of Java Set-1

• Solved MCQ of Java Beans set-1

• Solved MCQ of Internet and HTML set-3

• Solved MCQ of Database Management System Set - 8

• Solved MCQ of System Analysis and Design Set-3

• Solved MCQ of Data Structure Set - 2

• MCQ of Computer Networking with answer set-4

For more Multiple Choice Questions (MCQs): Click Here

Objective Questions on CSS Syntax and Property set-6

1) ....... media type is used for use with printed material and documents viewed onscreen in print preview mode.

A. Print

B. Projection

C. Aural

D. Screen



2) In CSS length measurement unit ....... defines a measurement in picas.

A. pi

B. pc

C. pt

D. px



3) In CSS length measurement unit ......defines a measurement in screen pixel.

A. pi

B. pc

C. pt

D. px




4) ........ defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x.

A. cm

B. em

C. ex

D. hx




5) Which of the following is the correct CSS code to set the background color of all h1, h2 and h3 elements to orange.

A. h1.h2.h3{background-color:orange;}

B. h1, h2, h3{background-color:orange;}

C. h1 h2 h3{background-color:orange;}

D. h1, h2, h3{set-background:orange;}




6) The CSS selector E>F selects ...

A. direct decedents

B. adjacent siblings

C. preceding siblings

D. all elements



7) The CSS selector E-F selects .....

A. direct decedents

B. adjacent siblings

C. preceding siblings

D. all elements



8) ........... selects all elements of E that have an attribute attr that starts with the value given in a list of hyphen-separated values.

A. E[attr-=value]

B. E[attr|=value]

C. E[attr~=value]

D. E[attr^=value]



9) .......... selects all elements of E that have the attribute attr that begins with the given value.

A. E[attr-=value]

B. E[attr|=value]

C. E[attr~=value]

D. E[attr^=value]



10) A single @charset rule can be used in a/an ........... to define character set encoding of the style rules and values.

A. external sheet

B. internal sheet

C. inline codes

D. Both A and B




11) An ......... rule can be used to define style rules for multiple media types in a single embedded style sheet.

A. @embedded

B. @media

C. @page

D. @multiple



12) An ........... rule is used to define a page block for printed styles. Generally, within this construct we see various CSS properties like size, page, and margin to control the dimensions of the page.

A. @embedded

B. @media

C. @page

D. @print



13) Which of the following are the sub properties of background property used in CSS Except.

A. background-color

B. background-scroll

C. background-image

D. background-repeat



14) Which of the following is the default value of background-image property in CSS.

A. url

B. inherit

C. none

D. both A and B



15) State whether the following statements are True or False.

i) Background-position property determines how a background image is positioned within the canvas space by associated element.

ii) The default value for background-attachment property is fixed.

iii) The background image requires a URL(complete or relative) to link it to the source image specified with the url() syntax.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-False

C. i-False, ii-True, iii-True

D. i-True, ii-False, iii-True



16) Which of the following is/are the sub properties of border property in CSS.

A. border-width

B. border-style

C. border-color

D. All of the above



17) Match the following CSS cursor resizing property with their descriptions.

i) e-resize a) pointing north south.

ii) ne-resize b) pointing northwest-southeast

iii) nw-resize c) pointing northeast-southwest

iv) n-resize d) pointing east-west(left-right)

A. i-d, ii-c, iii-b, iv-a

B. i-c, ii-b, iii-a, iv-d

C. i-b, ii-c, iii-d, iv-a

D. i-d, ii-a, iii-b, iv-c



18) ......... property controls how spaces, tabs, and newline charters are handled in an element.

A. visibility

B. white-space

C. tab-space

D. line-space



19) ......... property controls the algorithm used to lay out the table, cells, rows, and columns.

A. table-layout

B. cell-layout

C. row-column-layout

D. None of the above



20) ......... property is used to force or prohibit a printing page break within an element.

A. page-break-outside

B. page-break-inside

C. printing-page-break

D. page-break-element

Answers:

1) A. Print
2) B. pc
3) D. px
4) C. ex
5) B. h1, h2, h3{background-color:orange;}
6) A. direct decedents
7) C. preceding siblings
8) B. E[attr|=value]
9) D. E[attr^=value]
10) A. external sheet
11) B. @media
12) C. @page
13) B. background-scroll
14) C. none
15) D. i-True, ii-False, iii-True
16) D. All of the above
17) A. i-d, ii-c, iii-b, iv-a
18) B. white-space
19) A. table-layout
20) B. page-break-inside
478f8ffac419307280ec7a8194f9ee837ed62daf3f47597227

Related Posts:

• Solved MCQ of CSS set-1

• MCQ of CSS With Answer set-2

• Objective Questions of CSS with Answer set-3

• Solved Objective Questions of CSS set-4

• Solved MCQ of Java Set-1

• Solved MCQ of Java Beans set-1

• Solved MCQ of Internet and HTML set-3

• Solved MCQ of Database Management System Set - 8

• Solved MCQ of System Analysis and Design Set-3

• Solved MCQ of Data Structure Set - 2

• MCQ of Computer Networking with answer set-4

For more Multiple Choice Questions (MCQs): Click Here

Solved Multiple Choice Questions on Basic CSS set-5

1) All of the following statement about CSS styles are True Except.

A. External style sheets can set and update styles for many documents at once.

B. In inline style, it can be easily control style to a single character instance.

C. In some cases @import is used in inline styles

D. There is no additional network requests required to retrieve style information.



2) ............. requires extra download round-trip for t he style sheet, which might delay page rendering, particularly when multiple files are in use.

A. External Style Sheets

B. Document Wide Style

C. Inline Style

D. All of the above



3) For .............., it needs to reapply style information throughout the document and outside documents.

A. External Style Sheets

B. Document Wide Style

C. Inline Style

D. All of the above



4) Which of the following is the correct example of document wide style in CSS.

A. <h1 style="color:red;"> I am red !</h1>

B. <h1 color="red"> I am red ! </h1>

C. <style type="text/css" media="all"> h1{color:red;}</style>

D. <style type="stylesheet" media="all"> h1{color:red;}</style>



5) .......... overrides any document styles in the absence of !import directive.

A. Document Wide Style

B. Inline Style

C. External Style Sheets

D. All of the above



6) Which of the following statements are True about the types of CSS stylesheets.

i) Document wide style can easily control style document by document.

ii) Document wide style needs additional network requests to retrieve style information.

iii) With external style sheets, style information is cached by the browser, so there's no need to repeat.

A. i-True, ii-True, iii-False

B. i-True, ii-False, iii-True

C. i-True, ii-False, iii-False

D. i-False, ii-True, iii-True



7) Media type defined under CSS 2.1 for use with low resolution teletypes, terminals, or other devices with limited display capabilities is

A. tt

B. tv

C. ttd

D. tty



8) Which of the following is/are the media types defined in CSS.

A. aural

B. embossed

C. print

D. All of the above



9) As defined in CSS2 ........ selects all elements of E that have a space separated list of values for attr where one of those values is equal to the given value.

A. E[attr~=value]

B. E[attr|=value]

C. E[attr=value]

D. All of the above



10) Which of the following selector selects all elements of E that have the attribute attr that ends with the given value in CSS3.

A. E[attr#=value]

B. E[attr$=value]

C. E[attr^=value]

D. E[attr!=value]




11) Which of the following CSS code sets the font style to italic on all p tags that have one word in their title equal to test.

A. p[title~="Test"]{font-style:italic;}

B. p[title|="Test"]{font-style:italic;}

C. p[title="Test"]{font-style:italic;}

D. p[title^="Test"]{font-style:italic;}



12) Which of the following CSS code sets the font-weight to bold on all a tags that have their href attribute set to http://www.siteforinfotech.com

A. a[href*="http://www.siteforinfotech.com"]{font-weight:bold;}

B. a[href~="http://www.siteforinfotech.com"]{font-weight:bold;}

C. a[href$="http://www.siteforinfotech.com"]{font-weight:bold;}

D. a[href="http://www.siteforinfotech.com"]{font-weight:bold;}



13) Match the following CSS selectors with their respective definitions.

i) a:link a) specifies the link as it is being pressed.

ii) a:active b) specifies the link after being pressed

iii) a:visited c) specifies the unvisited link

A. i-a, ii-c, iii-b

B. i-b, ii-a, iii-c

C. i-c, ii-a, iii-b

D. i-a, ii-c, iii-b



14) The following CSS code strong:first-of-type{font-size: bigger;}

A. sets the font size bigger on the first strong tag of its parent.

B. sets the font size bigger on all of the strong tag of its parent.

C. sets the font size bigger on the strong tag if only the child of its parent.

D. None of the above options.



15) Which of the following selector is not defined in CSS3.

A. :root

B. :empty

C. :not(a)

D. :lang(value)



16) Which of the following is/are the sub properties of borders property in CSS.

i) border

ii) border-top

iii) border-top-style

iv) border-bottom-position

v) border-top-width

A. i, ii, iv and v

B. ii, iii, iv and v

C. i, ii, iii and v

D. iii, iv and v



17) Which of the following is not the CSS propery to display the generated content.

A. conter-reset

B. counter-stop

C. counter-increment

D. content



18) The CSS properties page-break-before, page-break-after, page, and size are included in which CSS property.

A. print property

B. print preview property

C. page setup property

D. All of the above



19) Which of the following is/are the sub properties of background property in CSS.

A. background-color

B. background-image

C. background-attachment

D. All of the above



20) In CSS3, ......... selects an element that has no children.

A. :not(a)

B. :empty

C. :root

D. :lang(value)

Answers:

1) C. In some cases @import is used in inline styles
2) A. External Style Sheets
3) C. Inline Style
4) C. <style type="text/css" media="all"> h1{color:red;}</style>
5) B. Inline Style
6) B. i-True, ii-False, iii-True
7) D. tty
8) D. All of the above
9) A. E[attr~=value]
10) B. E[attr$=value]
11) A. p[title~="Test"]{font-style:italic;}
12) D. a[href="http://www.siteforinfotech.com"]{font-weight:bold;}
13) C. i-c, ii-a, iii-b
14) A. sets the font size bigger on the first strong tag of its parent.
15) D. :lang(value)
16) C. i, ii, iii and v
17) B. counter-stop
18) A. print property
19) D. All of the above
20) B. :empty

Related Posts:

• Solved MCQ of CSS set-1

• MCQ of CSS With Answer set-2

• Objective Questions of CSS with Answer set-3

• Solved Objective Questions of CSS set-4

• Solved MCQ of Java Set-1

• Solved MCQ of Java Beans set-1

• Solved MCQ of Internet and HTML set-3

• Solved MCQ of Database Management System Set - 8

• Solved MCQ of System Analysis and Design Set-3

• Solved MCQ of Data Structure Set - 2

• MCQ of Computer Networking with answer set-4

For more Multiple Choice Questions (MCQs): Click Here

How to Create Show/Hide Effect in Image SlideShow Using JQuery

The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted, makes elements invisible but retains space for them in the document layout.

The hide() method, by contrast, removes the elements from the layouts as if the CSS display property was set to none. When invoked with no arguments, hide() and show() simply hide or show the selected elements immediately. With a duration argument, however, they animate the hiding or showing process. hide() shrinks an element's width and height to 0 at the same time that it reduces the element's opacity to 0. show() reverses the process.

toggle() changes the visibility state of the elements, it is invoked on, if they are hidden, it calls show(), and it they are visible, it calls hide(). As with show() and hide(), you must pass a toggle() to get an animated effect. Passing true to toggle() is the same as calling show() with no arguments. Note also that if you pass two or more function arguments to toggle() it registers event handlers.

Here is an example that invokes methods for show/hide effect animation. The first image has show() effect animation, second image has hide() effect animation and the third animation has toggle() effect animation.

$("#img1").show(2000);
$("#img2").hide(3000);
$("#img3").toggle(1000);

Here are some examples to show show(), hide() and toggle() effects using jQuery.

Example of show() Effect 

<script>
  $(document).ready(function(){
    $(#btn1).click(function () {
      $("#img1").show(2000);
    });
  });
  </script>

<input type=button id="btn1" value="Start Show"/>
<img id="img1" src="img1.jpg"> 

Example of hide() Effect

<script>
  $(document).ready(function(){
    $(#btn2).click(function () {
      $("#img2").hide(3000);
    });
  });
  </script>

<input type=button id="btn2" value="Start Hide"/>
<img id="img2" src="img2.jpg"> 

Example of toggle() Effect 

<script>
  $(document).ready(function(){
    $(#btn3).click(function () {
      $("#img3").toggle(1000);
    });
  });
  </script>






<input type=button id="btn3" value="Start Toggle"/>
<img id="img3" src="img3.jpg">

Full jQuery code for Show/Hide effect image animation

<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</script>

<style>
.show_hide
{
 box-shadow:1px 1px 5px 2px #6DC83C;
 position:relative;
 width:448px;
 height: 336px;
 border-radius:19px;
}

.show_hide img
{
 border-radius:19px;
 position:absolute;
 left:0;
 top:0;
}

</style>

<script>
$(function(){
 $('.show_hide img:gt(0)').hide();
 setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end

().appendTo('.show_hide');}, 6000);
});
</script>

<div class="show_hide">
<img src="img1.JPG" />
 <img src="img2.JPG" />
 <img src="img3.JPG" />
</div>

Preview of Show/Hide effect image animation

Related Posts:

• How to Scroll Top or Bottom of Document Using JavaScript

• How to Create Table of Contents Using JavaScript

• How to Select Document Elements Using JavaScript?

• How to Show Pop Up Window Using JavaScript

• How to go Back Browsing History Using JavaScript

• How to Click Button Using JavaScript?

• How to Write JavaScript Function as URL in Hyperlink?

• How to use Round, Random, Min and Max in JavaScript

• How to Concatenate, Join and Sort Array in JavaScript?

• How to Loop Through JavaScript Array?

• How to Loop using JavaScript?

• How to Show Pop Up Boxes Using JavaScript?

• How to Write Conditional Statements in JavaScript?

• How to Write JavaScript With HTML?

• How to create Changeable Date and Time Using JavaScript?

• How to Validate a HTML Form Using JavaScript?

• How to create a simple form using HTML?

• How to Create JavaScript Image Sideshow with Links

• How to Display Date Format in JavaScript?

• How to Validate a HTML Form Using JavaScript?

• What are the Different Ways to Redirect Page in JavaScript?

• How to create Timer Using JavaScript?

How to Create Animated Visual Effects Using jQuery

You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with making an element appear and disappear, we might reduce the value of its opacity property over the certain period. This king of animated visual effect creates a more pleasing experience for user and jQuery makes them easy.

jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. You can also use an animate() method for producing more complex custom animations. 

Every animation has a duration that specifies how long the effect should last for. You can specify this as a number of milliseconds or by using a string. The string "fast" means 200ms and the sting "slow" means 600ms. If you specify a duration string that jQuery does not recognize, you will get a default duration of 400ms. 

$("#animation").fadeIn(); 
// It fades an element in over 400ms
$("#animation").fadeOut("fast"); 
// It fade outs over 200ms
$("#animation").fadeIn(5000);
//It fades an element in over 5000ms

You can also define new duration names by adding new string-to-number mappings to jQuery.fx.speeds as given below. 

jQuery.fx.speeds["medium-fast"]=3000;
jQuery.fx.speeds["medium-slow"]=5000;

Here is an example to create animated visual effects using methods fadeIn() and fadeOut() in jQuery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
jQuery.fx.speeds["medium-slow"]=3000;
jQuery.fx.speeds["very-slow"]=5000;
$(document).ready(function(){
 $("#btn1").click(function(){
$("#animation1").fadeIn(); 
$("#animation3").fadeIn(5000);
$("#animation5").fadeIn("medium-slow");
});
 $("#btn2").click(function(){
$("#animation2").fadeOut("fast");
$("#animation4").fadeOut("very-slow");
});
 });
</script>
<input type=button id="btn1" value="Start FadeIn"/><br/>
<div id="animation1" style="display:none;background:pink;">It fades an element in over 400ms</div><br/>
<div id="animation3" style="display:none;background:red">It fades an element in over 5000ms</div><br/>
<div id="animation5" style="display:none;background:yellow">It fades an element in over 3000ms</div><br/>

<input type=button id="btn2" value="Start FadeOut"/><br/>
<div id="animation2" style="background:red">It fade outs over 200ms</div><br/>
<div id="animation4" style="background:pink">It fade outs over 5000ms</div><br/>

Preview:

It fades an element in over 400ms

It fades an element in over 5000ms

It fades an element in over 3000ms

It fade outs over 200ms

It fade outs over 5000ms

You can also set the value of the document that was animated using a function as argument. Here is a jQuery code which quickly fade in an element and when it is visible, display some text in it. 

<script>
$(document).ready(function(){
$("#btn4").click(function(){
$("#message").fadeIn("fast", function() {$("#message").text("Hello this is animation");});
});});
</script>
<input type=button id="btn4" value="Start Animation"/><br/>
<div id="message" style="color:red"></div>

Preview:

Passing a callback function to an effect method allows you to perform actions at the end of an effect. However, that is is not necessary when you simply want to perform multiple effects in sequence. If you call an animation method on an element that is already being animated, the new animation does not begin right away but is deferred until the current animation ends. For example, you can make an element blink before fading in permanently. 

<script>
$(document).ready(function(){
$("#blinker").mouseover(function(){
$("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn();});
});
</script>
<div id="blinker" style="color:red"><h3>It blinks before fading in permanently</h3></div>

Preview:

It blinks before fading in permanently

jQuery's effect methods are declared to accept optional duration and callback arguments. It is also possible to invoke these methods with an object whose properties specify animation options. 

<script>
$(document).ready(function(){
 $("#btn3").click(function(){
$("#effect").fadeIn({
duration: "slow",
complete: function(){$(this).text("Animation was completed");}
});});});
</script>
<input type=button id="btn3" value="Start Animation"/>
<div id="effect" style="background:yellow">This is sample animation effect</div>

Preview:

This is sample animation effect

Related Posts:

• How to Scroll Top or Bottom of Document Using JavaScript

• How to Create Table of Contents Using JavaScript

• How to Select Document Elements Using JavaScript?

• How to Show Pop Up Window Using JavaScript

• How to go Back Browsing History Using JavaScript

• How to Click Button Using JavaScript?

• How to Write JavaScript Function as URL in Hyperlink?

• How to use Round, Random, Min and Max in JavaScript

• How to Concatenate, Join and Sort Array in JavaScript?

• How to Loop Through JavaScript Array?

• How to Loop using JavaScript?

• How to Show Pop Up Boxes Using JavaScript?

• How to Write Conditional Statements in JavaScript?

• How to Write JavaScript With HTML?

• How to create Changeable Date and Time Using JavaScript?

• How to Validate a HTML Form Using JavaScript?

• How to create a simple form using HTML?

• How to Create JavaScript Image Sideshow with Links

• How to Display Date Format in JavaScript?

• How to Validate a HTML Form Using JavaScript?

• What are the Different Ways to Redirect Page in JavaScript?

• How to create Timer Using JavaScript?

How to Alter HTML Document Structure using jQuery?

HTML documents are represented as a tree of nodes rather than a linear sequence of characters, insertions, deletions, and replacements are not as simple as they are for strings and arrays. In jQuery there are some methods for making more complex changes to a document.

There are number of method in jQuery for inserting and replacing elements, copying elements, wrapping elements and deleting elements. For insertion and replacement of elements in HTML document, you can use the methods append(), prepend() and replacewith(). 

You can copy HTML elements using clone() method and wrapp the elements using wrap(), wrapInner() and wrapAll() methods. For deletion of the element you can use empty(), reomve() and unwrap() methods. 

How to Insert and Replace Elements using jQuery 

You can use different methods to insert and replace elements using jQuery, each of the methods takes an argument that specifies the content that is to be inserted into the document. 

The inserting can be made into or before or after or in place of each selected elements. If the content to be inserted is an element that already exists in the document, it is moved from current location.

The append() method inserts an element at the end of selected element, prepend() method inserts an element at start of selected element and replaceWith() method replaces one selected element with another. For append(), prepend() and replacewith() the second argument is the current content of the element as an HTML string. 

There are before() and after() methods, which can be used to insert before and after of each selected elements. For before() and after() the function is invoked with no second argument. 

Here are some examples of jQuery codes for inserting and replacing elements using jQuery. 

$("#clr").append("<br/>"+message); 
// It adds a content at end of the #clr element

$("h1").prepend(":"); 
// It adds colon sign at the star of each <h1>

$("h1").before("<hr/>");
// It insert horizontal line before each <h1> element

$("h1").after("<hr/>");
// It insert horizontal line after each <h1> element

$("hr").replaceWidth("<br/>");
// It replaces <hr/> elements with <br/>

$("h2").each(function(){
var h2=$(this);
h2.replaceWith("<h1>"+h2.html()+"</h1>");
});
// It replaces <h2> with <h1> keeping the content.

Similary, you can use appendTo(), prependTo(), insertAfter(), insertBefore and replaceAll() methods for the same purpose as given in the example below. 

$("<br/>"+message).appendTo("#clr"); 
// It adds a content at end of the #clr element
$(document.createTextNode(":")).prependTo("h1"); 
// It adds colon sign at the star of each <h1>
$("<hr/>").insertBefore("h1");
// It insert horizontal line before each <h1> element
$("<hr/>").insertAfter("h1");
// It insert horizontal line after each <h1> element
$("<br/>").replaceAll("hr");
// It replaces <hr/> elements with <br/>
 

How to Copy Elements using jQuery 

If you insert elements that are already part of the document, those elements will simply be moved, not copied to their new location. 

If you want to copy elements to a new location instead of moving them, you must first make a copy with the clone() method. clone() makes and returns a copy of each selected element and all the descendent's of those elements. 

An example for copying elements using clone() method is given below. 

$(document.body).append("<div id="linklist"><h1>List of Links</h1></div>");
//It appends a new div with id "linklist", to the end of the document
$("a").clone().appendTo("#linklist");
//It copy all links in the document and insert them into that new div
$("#linklist>a").after("<br/>");
//It insert <br/> elements after each link so they display on separate lines

How to Wrap Elements using jQuery 

Another type of insertion into an HTML document involves wrapping a new element or elements around one or more elements. jQuery defines three wrapping functions, wrap() wraps each of the selected elements, wrapInner() wraps the contents of each selected element and wrapAll() wraps the selected elements as a group. 

$("h1").wrap(document.createElement("i"));
//It produces <i><h1> .....</h1></i>

$("h1").wrapInner("<i/>");
//It produces <h1><i>........</i></h1>

$("body>p:first").wrap("<a name="lead"><div class="first"></div></a>");
// It wraps the first paragraph in one anchor and div

$("body>p:not(:first)").wrapAll("<div class="rest"></div>");
//It wraps all the other paragraps in another div

How to Delete Elements using jQuery 

Along with insertions and replacements, jQuery also defines methods for deleting elements. empty() removes all children including text nodes or each of the selected elements, without altering the elements themselves. The remove() method, by contrast removes the selected elements and all their content from the document. remove() is normally invoked with no arguments and removes all elements in the jQuery object. 

 $("#hide").empty();
// It removes all the contents having id #hide

$("#rmv").remove(); 
// It removes the contents and events having id #rmv

You can use unwrap() method to perform element removal in a way that is the opposite of the wrap() or wrapAll() method. It removes the parent element of each selected element without affecting the selected elements or their siblings. 

Related Posts:

• How to Scroll Top or Bottom of Document Using JavaScript

• How to Create Table of Contents Using JavaScript

• How to Select Document Elements Using JavaScript?

• How to Show Pop Up Window Using JavaScript

• How to go Back Browsing History Using JavaScript

• How to Click Button Using JavaScript?

• How to Write JavaScript Function as URL in Hyperlink?

• How to use Round, Random, Min and Max in JavaScript

• How to Concatenate, Join and Sort Array in JavaScript?

• How to Loop Through JavaScript Array?

• How to Loop using JavaScript?

• How to Show Pop Up Boxes Using JavaScript?

• How to Write Conditional Statements in JavaScript?

• How to Write JavaScript With HTML?

• How to create Changeable Date and Time Using JavaScript?

• How to Validate a HTML Form Using JavaScript?

• How to create a simple form using HTML?

• How to Create JavaScript Image Sideshow with Links

• How to Display Date Format in JavaScript?

• How to Validate a HTML Form Using JavaScript?

• What are the Different Ways to Redirect Page in JavaScript?

• How to create Timer Using JavaScript?