Scribd
Upload
32 views

Chapter-7 (Adding Visual Effects To Web Pages)

Good

Uploaded by

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

Chapter-7 (Adding Visual Effects To Web Pages)

Good

Uploaded by

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

-----------------------------------------------------------

Chapter-7 (Adding Visual Effects to Web Pages)

-----------------------------------------------------------

jQuery:

---------

1. jQuery is a lightweight, "write less, do more", JavaScript library.

2. The purpose of jQuery is to make it much easier to use JavaScript on your website.

3. 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.

--------------------------------------------------------------------------------

Adding jQuery to Your Web Pages:

------------------------------------------

There are several ways to start using jQuery on your web site.

1. Download the jQuery library from jQuery.com :

<head>

<script src="jquery-3.7.1.min.js"></script>

</head>

2. Include jQuery from a CDN, like Google :

If you don't want to download and host jQuery yourself,

you can include it from a CDN (Content Delivery Network).

--------------------------------------------------------------------------------

Document Ready Event:

------------------------------

The execution of jQuery code should occur only after the Web page has been fully loaded.

To ensure that a Web page is fully loaded before the jQuery code is executed on it,
jQuery provides the document.ready() function.

This function contains the jQuery code to be executed on HTML elements after the

Web page has been fully loaded in the browser.

The following syntax is used to specify the document.ready() function:

<SCRIPT >

$(document).ready(function(){

// jquery code...

});

</SCRIPT>

----------------------------------------------------------------------------------

***jQuery code is written in the <HEAD> section of the document.

----------------------------------------------------------------------------------

Ex.1

----

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Click me to hide paragraphs</button>

</body>

</html>

-----------

Ex.2

-------

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

$("#b1").click(function(){

$("p").hide();

});

$("#b2").click(function(){

$("p").show();

});

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button id="b1">Click me to hide paragraphs</button>

<button id="b2">Click me to show paragraphs</button>

</body>

</html>

-----------------------

Using jQuery Selectors:

----------------------------

jQuery uses selectors to select and manipulate an HTML element or a group of elements. You can
select an HTML element by:

Using element name:

-------------------------

Ex.

----

select all the <H1> elements in a document:

$("h1")

In the preceding code snippet, the <H1> elements are referred to by the name, h1.

Ex.

----

To select an element with a specific ID by using jQuery, you can use the following syntax:

$("#Element_ID")

Ex.

----

To select elements with a specific class, you can use the following syntax:

$(".Element_class")

Ex.

----

$("[src]")

In the preceding code snippet, all the elements with the src attribute are selected.
Using attribute name:

--------------------------

The HTML elements can also be selected by using the name of an attribute.

Syntax:

---------

$("[attribute-name]")

Using CSS selectors:

-------------------------

jQuery provides CSS selectors to modify the CSS properties of an HTML element or document.

Syntax:

---------

selector.css( PropertyName, PropertyValue );

eg.

$("div").css("color","green");

---------------------------------------------------------------

you can set multiple properties on an HTML element.

$("div").css("color":"green", "font-size":"200%");

----------------------------------------------------------------

Ex.

----

the following code for modifying the inner content of HTML elements:

<!DOCTYPE HTML><HTML>

<HEAD>

<SCRIPT type="text/javascript" src="jquery-1.8.3.js"></SCRIPT>

<SCRIPT type="text/javascript">

$(document).ready(function(){

$("button").click(function(){
$("#para").prepend(" <B>jQuery </B>");

$("#para").append(" <B>append() function</B>.");

$("#para").after('<H3> This is the newly inserted heading.</H3>');

$("#newhead").remove();

});

});

</SCRIPT>

</HEAD>

<BODY>

<DIV align="center">

</DIV>

<H3>Complete the sentence:</H3>

<P ID="para">is a javascript library that enables the

content to be appended after the inner content in the

selected element using the</P><BR>

<H2 ID="newhead">This heading would be removed.</H2>

<BUTTON ID="b">Click here</BUTTON>

</BODY>

</HTML>

--------------

**In the preceding code, when a user clicks the Click here button, the content, jQuery, is appended

before the <P> tag having the ID, para, by using the prepend() function.

Similarly, the content, append() function, is appended after the same <P> tag by using the append()
function.

In addition, a new <H3> tag is inserted after the <P> tag having the ID, para, by using the after()
function.

Finally, the heading having the ID, newhead, is removed by using the remove() function.

----------------------------------------------------------------------------------------------------------

Handling jQuery Events:

------------------------------

<!DOCTYPE HTML><HTML>

<HEAD>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

<SCRIPT type="text/javascript">

$(document).ready(function(){

$("#hide_header").click(function(){ /* selects the hide_header button and binds it to the click


function */

$("h1").hide(); //hides the <h1> header

});

});

</SCRIPT>

</HEAD>

<BODY>

<H1>I am the header</H1>

<HR>

<INPUT type="button" ID="hide_header" value='Hide the header'/>

</BODY>

</HTML>

---------------------------

Adding Visual Effects Using jQuery:

-------------------------------------------

With the help of jQuery, amazing visual effects can be applied to the elements of a Web document.

These visual effects help to enrich the browsing experience of a user.

Some of the predefined jQuery effects that can be used to add visual appeal to a Web page are:

1. Hide

2. Show

3. Toggle

4. Slide

5. Fade

6. Animate

----------------------------

Ex.1:(hide)

-----
<!DOCTYPE HTML><HTML>

<HEAD>

<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

<SCRIPT type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("h1").hide(4000);//"slow", "normal", and "fast", or the duration in milliseconds

});

});

</SCRIPT>

</HEAD>

<BODY>

<H1>I am the header</H1>

<BUTTON>Hide the header</BUTTON>

</BODY>

</HTML>

-------------------------------------

Ex.2:(show)

-----

<!DOCTYPE HTML><HTML><HEAD>

<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

<SCRIPT type="text/javascript">

$(document).ready(function(){

$(".view").click(function(){

$("h3").show(2000);

});

$(".conceal").click(function(){

$("h3").hide();

});

});

</SCRIPT>
</HEAD>

<BODY>

<H3> This text can be hidden and shown. </H3> <BR>

<BUTTON class="view">Click to view</BUTTON>

<BUTTON class="conceal">Click to hide</BUTTON>

</BODY>

</HTML>

--------------

Ex.3:(Toggle)

-----

The toggle () function can be used to switch between the show and hide effects of an element.

This event can be used to hide or show the element, alternatively, when an event occurs.

<!DOCTYPE HTML><HTML>

<HEAD>

<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

<SCRIPT type="text/javascript">

$(document).ready(function(){

$(".view").click(function(){

$("h3").toggle('fast');

});

});

</SCRIPT>

</HEAD>

<BODY>

<H3> Show and Hide me Quickly</H3>

<HR>

<BUTTON class="view">Click here</BUTTON>

</BODY>

</HTML>

------------------
Ex.4:(Slide)

-----

<!DOCTYPE HTML><HTML>

<HEAD>

<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>

<SCRIPT type="text/javascript">

$(document).ready(function(){

$(".flipbut").click(function(){

$(".thought").slideToggle();

});

});

</SCRIPT>

<STYLE type="text/css">

margin:0px;

padding:5px;

text-align:center;

background:beige;

border:solid 1px;

div.thought

height:120px;

display:none;

</STYLE>

</HEAD>

<BODY>

<BR><BR>

<BUTTON style="background-color:beige" class="flipbut" text-align="center">Show/Hide the


thought of the day</BUTTON>
<DIV class="thought">

<P>The thought of the day is:</P>

<P> Where there is a will, there is a way!</P>

</DIV>

</BODY>

</HTML>----------------

***In the preceding code, when the Show/Hide the thought of the day button is clicked,

toggle functionality is implemented between slide up and

slide down on the <DIV> element along with the thought class.

------------------------------------------------------------------------------

Ex.5. (Fade)

--------------

<!DOCTYPE html>

<html>

<head>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

});

</script>

</head>

<body>

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button><br><br>


<div id="div1" style="width:80px;height:80px;background-color:red;"></div>

<br>

<div id="div2" style="width:80px;height:80px;background-color:green;"></div>

<br>

<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>

</html>

------------------------------------------------------------------------

Ex.6. Animate:

-----------------

<!DOCTYPE HTML>

<HTML>

<HEAD>

<SCRIPT src="jquery.js">

</SCRIPT>

<SCRIPT>

$(document).ready(function(){

$("div").mouseenter(function(){

$("div").animate({

center:'250px',

opacity:'0.5',

height:'250px',

width:'250px'

});

});

$("div").mouseleave(function(){

$("div").animate({

opacity:'1',

height:'100px',
width:'100px'

});

});

});

</SCRIPT>

</HEAD>

<BODY>

<DIV style="background:#98bf21;height:100px;width:100px;position:absolute;">

</DIV>

</BODY>

</HTML>

You might also like