Scribd
Upload
31 views22 pages

Unit 2

Uploaded by

Swapnil Roy
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
31 views22 pages

Unit 2

Uploaded by

Swapnil Roy
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/ 22

1 Chapter2- jQuery Fundamentals

Chapter 2
jQuery Fundamentals

2.1 Introduction and Basics

2.2 jQuery Effects

2.3 jQuery Manipulation Methods

2.4 Exercise

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


2 Chapter2- jQuery Fundamentals

2.1 Introduction and Basics


• jQuery is a JavaScript library. It helps to create Web Pages and applications quickly
and easily.
• It is a lightweight JavaScript and AJAX library, which support multiple browsers and
emphasizes on the interaction between JavaScript and HTML.
• It enables to create the Web Applications that contain animations, communicate with
server to send requests or get response and handle events.
• jQuery is available as .js file as it is written in JavaScript language.
• It supports and works on many different browsers like IE, Mozilla, Google Chrome,
and Safari.
• So, it is not required to write different JavaScript code for each browser individually.
• It allows to select DOM elements, traverse or navigate them and modify their
content.
• It allows to capture a wide variety of events, such as clicking a button, pressing a key
from keyboard, moving a mouse etc.
• It provides built-in animation effects that can be included in websites to make them
more attractive and dynamic.
• It can also be integrated with AJAX to create a more spontaneous website in sending
and receiving the request and responses from the server.
2.1.1 Advantages
Some advantages of using jQuery are:
• Animation effects like fading, sliding, hiding and others to HTML elements can be
added.
• It enables to make AJAX requests to web server to add data without reloading the
page.
• It allows to manipulate DOM by adding, removing and reordering the content of Web
page.
• It allows to create animated images slideshows, animated multi-level dropdown
menus, and drag and drop interfaces.
• It allows to create complex forms with client-side validations and auto-complete AJAX
text fields that retrieve data from server-side database.
2.1.2 Loading and Using jQuery
• jQuery is available as a single file with extension .js.
• The latest version of jQuery is 3.6. It is available in two formats compressed and
uncompressed.
• Both the formats can be downloaded from jQuery.com.
• In this book we will be considering the version 3.5.1.js file for the explanation and
examples.
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
3 Chapter2- jQuery Fundamentals

• The following code shows how to include the jQuery library in a Web Page:
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
The src attribute of the <script> specifies the path of the jQuery file.
• If you don't want to download and host jQuery yourself, you can include it from a CDN
(Content Delivery Network).
• Google is an example who host jQuery
• Following is the way to use Google to host jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>

2.1.3 jQuery Syntax


• With jQuery we select the HTML elements and perform some "actions" on them.
Basic syntax is: $(selector).action()
o A $ sign - define/access jQuery,
o A (selector) - "query (or find)" HTML elements
o action() to be performed on the element(s)
• Example:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
In the above example, all the jQuery methods are wrapped inside document ready
event. This will prevent the jQuery methods to be executed before the document is
finished loading.
2.1.4 jQuery Selectors
• jQuery selectors allow to select and manipulate HTML element(s).
• They can select or manipulate element as a group or as a single element.
• They find the HTML elements based on their ids, classes, types, attributes or it’s values
and much more.
• They also support CSS syntax.
• All selectors in jQuery start with the dollar sign and parentheses as $().
• Example:
$(“p”).css(“background-color:green”);

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


4 Chapter2- jQuery Fundamentals

List of selectors are as below:

Selectors Example Selects

* $(“*”) Returns all the elements

#id $(“#test”) Returns all elements with the specified


id test

.class $(“.intro”) Returns all elements with class intro

element $(“p”) Returns all p elements

:first $(“p:first”) Returns the first p elements

:last $(“p:last”) Returns the last p elements

:even $(“tr:even”) Returns all tr elements at the even


number

:odd $(“tr:odd”) Returns all tr elements at the odd


number

:eq(index) $(“ul li:eq(3)”) Returns the fourth element in a list,


here index starts at 0

:header $(“header”) Returns all header elements such as


h1,h2,….h6

[attribute] $(“[href]”) Returns all elements having href


attribute

[attribute=value] $([“href=first.html”]) Returns all elements with href attribute


having value equal to first.html.

:input $(“:input”) Returns all input elements

:text $(“:text”) Returns all input elements with the


type, text

:password $(“:password”) Returns all input elements with the


type, password

:checkbox $(“:checkbox”) Returns all input elements with the


type, checkbox

:radio $(“:radio”) Returns all input elements with the


type, radio

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


5 Chapter2- jQuery Fundamentals

:submit $(“:submit”) Returns all input elements with the


type, submit

:reset $(“:reset”) Returns all input elements with the


type, reset

:button $(“:button”) Returns all input elements with the


type, button

:image $(“:image”) Returns all input elements with the


type, image

:file $(“:file”) Returns all input elements with the


type, file

:enabled $(“:enabled”) Returns all enabled input elements

:disabled $(“:disabled”) Returns all disenabled input elements

:checked $(“:checked”) Returns all checked input elements

:selected $(“:selected”) Returns all selected input elements

Example:

$(“document”).ready(function(){
$("button").click(function(){
$(".test").hide();
$(“#p1”).hide();
});
});
In the above example:

$(“button”)-> element button is selected when its event click is performed.

$(“.test”) -> the element having class test is selected.

$(“#p1”) -> the element with id p1 is selected.

2.1.5 jQuery Events


• An event is an action that occurs at a specified time due to the completion of some
task.
• It is an action which is performed outside the scope of the program and is handled by
the piece of code inside the program.
• This piece of code to handle the event is called event handler.
• Some examples of events are given as follows
o Clicking of a mouse

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


6 Chapter2- jQuery Fundamentals

o Loading of a web page


o Moving a mouse over an element
o Submitting HTML form
o Pressing a key stroke on your keyboard

• Some common events are:


Mouse Events Keyboard Events Form Events Document/Window
click keypress submit Events
load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

• Some common methods to handle events are:

Method Description
blur() Binds a function to blur event of selected elements
focus() Binds a function to the focus event of selected elements
hover() Binds a function to the hover event of selected elements
click() Binds a function to the click event of selected elements
dblclick() Binds a function to the dblclick event of selected elements
change() Binds a function to the change event of selected elements
keypress() Binds a function to the keypress event of selected elements
mouseup() Binds a function to the mouseup event of selected elements
mousedown() Binds a function to the mousedown event of selected elements
on() Binds one or more event handlers to elements and can only be used
once per element.
ready() Binds a function to the ready event of document
Example:

$(“document”).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
In the above example
• $(document).ready() method allows us to bind a function when the document
is fully loaded.
• After document is loaded and when the paragraph <p> is clicked,
The click() method of paragraph is attached and an hide effect is executed.

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


7 Chapter2- jQuery Fundamentals

2.2 jQuery Effects


• jQuery enables us to add various effects on a web page which could be like loading
images after certain event.
• jQuery has different effects like fading, sliding, show/hide, animate/stop, and others.

2.2.1 jQuery hide() , show() & toggle() Events

• The hide() and show() methods are used to hide and show the elements
respectively:
• The toggle() method is used to toggle between the hide() and show() methods.
• Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

• The optional speed parameter specifies the speed of the hiding/showing, it


can take the values as either "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after the
completion of hide() or show() or toggle() methods.
• Example:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#toggle").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>
<b>Advanced Web Technologies <br>
Published by Oxford</b>
</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
8 Chapter2- jQuery Fundamentals

<button id="toggle">Toggle</button>
</body>
</html>

2.2.2 jQuery Fading Methods


• The fading methods of an element enables it’s in and out of visibility.
• jQuery has the following fade methods:
o fadeIn()
o fadeOut()
o fadeToggle()
o fadeTo()

• Syntax:
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

• The optional speed parameter specifies the duration of the effect. It can take
the following values: "slow", "fast", or milliseconds.
• The optional opacity parameter in the fadeTo() method specifies fading to a
given opacity (value between 0 and 1).
• The optional callback parameter is a function to be executed after the
function completes.
• Example:
<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
$("#bt1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn(1000);
});
$("#bt2").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut(1000);
});
$("#bt3").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle(1000);
});
$("#bt4").click(function(){
$("#div1").fadeTo("slow",0.3);
$("#div2").fadeTo(1000,0.15);
});
});
</script>

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


9 Chapter2- jQuery Fundamentals

<style type="text/css">
#div1{width:80px;
height:80px;
background-color:green;
display:none;
}
#div2{width:80px;
height:80px;
background-color:red;
display:none;
}
</style>
</head>
<body>
<p> Fading effect demonstration on Oxford</p><br>
<button id="bt1">FadeIn</button>
<button id="bt2">FadeOut</button>
<button id="bt3">FadeToggle</button>
<button id="bt4">FadeTo</button><br><br><br>
<div id="div1"></div><br><br>
<div id="div2"></div>
</body>
</html>

2.2.3 jQuery Sliding Methods


• With jQuery you can create a sliding effect on elements.
• jQuery has the following slide methods:
o slideDown()
o slideUp()
o slideToggle(
• Syntax:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
• The optional speed parameter specifies the speed of the hiding/showing, and
can take the following values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after the sliding
completes.
• Example:
<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle(1000);
});

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


10 Chapter2- jQuery Fundamentals

});
</script>
<style>

#flip { background-color:grey;
color:white;
text-align:center;
border:solid 5px yellow;
padding:5px}
#panel{background-color:grey;
color:white;
text-align:left;
border:solid 5px yellow;
padding:100 px;
display:none;}
</style>
</head>
<body>
<h1 align="center"> Demonstrate Sliding Effect</h1>
<div id="flip"> Click to Slide the Panel Down</div>
<div id="panel"> Faculty <br>
Student<br>
Administrator<br>
</div>
</body>
</html>

2.2.4 jQuery Animations


• The jQuery animate() method is used to create custom animations.
• Syntax:
$(selector).animate({params},speed,callback);

• The required params parameter defines the CSS properties to be animated.


• The optional speed parameter specifies the duration of the effect. It can take
the following values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function to be executed after the
animation completes.
• jQuery stop() Method
• The jQuery stop() method is used to stop an animation or effect before it is
finished.
• The stop() method works for all jQuery effect functions, including sliding,
fading and custom animations.
Syntax:
$(selector).stop(stopAll, goToEnd);

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


11 Chapter2- jQuery Fundamentals

• The optional stopAll parameter specifies whether the animation queue


should be cleared or not. Default is false, which means that only the active
animation will be stopped, allowing any queued animations to be performed
afterwards.
• The optional goToEnd parameter specifies whether or not to complete the
current animation immediately. Default is false.
• So, by default, the stop() method kills the current animation being performed
on the selected element.
• Example: The following example demonstrates the animate() and stop()
methods, with no parameters:
<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
$("#start").click(function(){
$("#div1").animate({left:'500px',height:'300px',width:'300px',
opacity:'0.4'},2000);
});
$("#stop").click(function(){
$("#div1").stop();
});
});
</script>
<style type="text/css">
#div1{
background:green;
height:100px;
width:100px;
position:absolute;
}
</style>
</head>
<body>

<button id="start">Start Animation</button>


<button id="stop">Stop Animation</button>

<p>By default, all HTML elements have a fixed position. To change the
position, first the CSS position property of the element should be set to
either relative, fixed, or absolute!</p>

<div id= "div1" style=""></div>


</body>
</html>

2.2.5 jQuery Callback Functions


• JavaScript statements are executed one line at a time in sequence.

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


12 Chapter2- jQuery Fundamentals

• But when we use jQuery effects, the next line of code can be run even though
the effect is not finished. This can create errors.
• To prevent such thing a callback function is used.
• A callback function is executed after the current effect is finished completely.
Syntax:
$(selector).hide(speed,callback);

Example:
• The example below has a callback parameter that is a function that will be
executed after the hide effect is completed:
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});

• The example below has no callback parameter, and the alert box will be
displayed before the hide effect is completed:

$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});

2.2.6 jQuery - Chaining


• Chaining allows to run multiple jQuery methods (on the same element) within
a single statement.
• It also allows to run multiple jQuery commands, one after the other, on the
same element(s).
• To give chaining effect , simply append the action to the previous action.
• Example: The following example chains together the css(), slideUp(), and
slideDown() methods
$("#p1").css("color","red")
.slideUp(1000)
.slideDown(1000);

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


13 Chapter2- jQuery Fundamentals

2.3 jQuery Manipulation methods

• jQuery provides various methods like html(), append, get() and many more to modify
or manipulate the content of HTML element and attributes.
• Next, we will discuss different jQuery methods for the manipulations of content or
attribute values in html.

2.3.1 jQuery Get/Set methods


• Following methods of jQuery are used for DOM manipulation:

Method Description
text() sets or gets text of selected elements
val() sets or gets value of a form field
html() sets or gets the content of selected elements (including HTML
markup)
attr() sets or gets attribute values.

• Example: Following example demonstrates the use of jQuery methods text(),


val(), html() and attr() for retrieving purpose.
• Here on clicking different buttons :
o text() method will retrieve the content of paragraph having id p1 excluding
any html tags within it.
o html() method will retrieve the content of p1 including the tags <b> , <i>
o val() will retrieve the value of textbox having id t1 and
o attr() will retrieve the value of attribute href of anchor tag <a> having id a1
<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
$("#btn1").click(function(){
alert("TEXT:" + $("#p1").text());
});
$("#btn2").click(function(){
alert("HTML:" + $("#p1").html());

});
$("#btn3").click(function(){
alert("Value of textbox is:" + $("#t1").val());

});
$("#btn4").click(function(){
alert($("#a1").attr("href"));
});

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


14 Chapter2- jQuery Fundamentals

});
</script>
</head>
<body>
<p id="p1"> This is some <b> bold </b> text in the <i>paragraph </i>
</p><br>
Enter your city:<input type="text" value="bharuch" id="t1"><br><br><br>

<a href="Oxford_homepage.html" id="a1">Click here</a>


<input type="button" id="btn1" value="Show text">
<input type="button" id="btn2" value="Show html">
<input type="button" id="btn3" value="Show value">
<input type="button" id="btn4" value="Show href">

</body>
</html>

Example: Following example demonstrates the use of jQuery methods text(),


val(), html() and attr() for setting different values.

• Here on clicking different buttons :


o text() method will set the new content of paragraph having id p1 excluding
any html tags within it.
o html() method will set the new content of p1 including the tags <b>
o val() will set the new value of textbox having id t1 and
o attr() will set the new value of attribute href and title of anchor tag <a>

<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
$("#btn1").click(function(){
$("#p1").text("Oxford!");
});
$("#btn2").click(function(){
$("#pt2").html("<b>Oxford!</b>");
});
$("#btn3").click(function(){
$("#t1").val("BHARUCH");
});
$("#btn4").click(function(){
$("a").attr({"href" :"anotherpage.html", "title": "set another
page"});
});
});

</script>
</head>
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
15 Chapter2- jQuery Fundamentals

<body>
<p id="p1">This is a advance web technology book.</p>
<p id="p2">This is second paragraph.</p><br>
<a href="first.html" title="first_page">Click to check</a>
<p>Input field: <input type="text" id="t1" value="SURAT"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
<button id="btn4">Set HREF Attribute</button>
</body>
</html>

2.3.2 jQuery Insert methods


• Following methods of jQuery are used to add new content

Method Description
append() Inserts content at the end of the selected elements
prepend() Inserts content at the beginning of the selected elements
after() Inserts content after the selected elements
before() Inserts content before the selected elements
wrap() wraps specified HTML element(s) around each selected element

• Example: Following example demonstrates the use of jQuery insert methods.

<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Best book</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Mobile Development</li>");
});
$("#btn3").click(function(){
$("p").prepend(" <b> Best book </b>.");
});
$("#btn4").click(function(){
$("ol").prepend("<li> Mobile Development </li>");
});
$("#btn5").click(function(){
$("img").before("<b>Text Appears Before Logo</b>");
});
$("#btn6").click(function(){
$("img").after("<i>Text Appears After Logo</i>");
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
16 Chapter2- jQuery Fundamentals

});
$("#btn7").click(function(){
$("p").wrap("<div></div>");
});

});
</script>
<style type="text/css">
div{background-color: orange; border : black 2pt solid}
</style>
</head>
<body>
<p>This is an advanced web technology book.</p>
<p>It is published by Oxford publisher.</p>
<ol>
<li>Web Design1</li>
<li>Java</li>
<li>.Net</li>
</ol>
<img src="Oxford logo.jpg" width="100" height="140"><br>

<button id="btn1">Append text</button>


<button id="btn2">Appended list items</button>
<button id="btn3">Prepend text</button>
<button id="btn4">Prepended list items</button>
<button id="btn5">Insert before </button>
<button id="btn6">Insert after </button>
<button id="btn7">Wrap Element </button>
</body>
</html>

2.3.3 jQuery Remove elements:


• Following methods of jQuery are used to remove element and content :

Method Description
empty() Removes the child elements from the selected element
remove() removes the selected element(s) and its child elements.
unwrap() removes the parent element of the selected elements

• Example: Following example demonstrates the use of jQuery remove methods

<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
17 Chapter2- jQuery Fundamentals

$("#btn1").click(function(){
$("#div1").empty();
});
$("#btn2").click(function(){
$("#div1").remove();
});
$("#btn3").click(function(){
$("p").unwrap();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:solid red 5px ;
background-color:yellow;">
This is some text in the div.
<p>This is first paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<p><b>This paragraph is out of div</b></p>

<button id="btn1">empty element</button>


<button id="btn2">remove element</button>
<button id="btn3">unwrap div element</button></body>
</html>

2.3.4 jQuery css() Method


The css() method sets or returns one or more style properties for the selected
elements.

Get a CSS Property


To get or retrieve the value of a specified CSS property, use the following syntax:
css("propertyname");

The following example will return the background-color value of the FIRST matched
element:
<html>
<head>
<script src="jquery-2.1.4.js"></script>
<script>
$("document").ready(function(){
$("#btn1").click(function()
{
alert($("h1").css("background-color"));
});
});
</script>

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


18 Chapter2- jQuery Fundamentals

</head>
<body>
<h1 style="background-color:green;">Advanced Web Technologies</h1>
<p> Welcome to Oxford</p>
<button id="btn1"> Get CSS Property</button>
</body>
</html>

Set a CSS Property


To set a specified CSS property, use the following syntax:

css("propertyname","value");

The following example will set the background-color value for ALL matched elements:
<html>
<head>
<script src="jquery-3.5.1.js"></script>
<script>
$("document").ready(function(){
$("#btn1").click(function()
{
$("h1,p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h1> Advanced Web Technologies </h1>
<p> Welcome to Oxford </p>
<button id="btn1"> Set CSS Property</button>
</body>
</html>

Set Multiple CSS Properties


To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});

The following example will set a background-color and a font-size for ALL matched
elements:

$("h1, p").css({"background-color": "yellow", "font-size": "200%"});

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


19 Chapter2- jQuery Fundamentals

2.4 Exercise

2.4.1 Choose the correct option(s) for the following MCQs

1. Which of the following jQuery method is used to stop jQuery for few
milliseconds?

A. stop() method
B. delay() method
C. slowdown() method
D. pause() method
Ans: A

2. Which jQuery method is used to set one or more style properties to the
selected element?

A. The html() method


B. The style() method
C. The css() method
D. All 3 options
Ans: C

3. Which of the following sign is used as a shortcut for jQuery?

A. the % sign
B. the & sign
C. the $ sign
D. the @ sign
Ans: C

4. Which tag is used to import the jQuery library file in the code?

A. <head>
B. <script>
C. <import>
D. <style>
Ans: B

5. Which selector expression will hide all the elements having class cute?

A. $(.cute).hide();
B. $(“.cute”).hide();
C. $(“#cute”).hide();
D. $(“.cute”).hides();
Ans: B

6. Pick the odd one out.

A. fadeIn()
B. fadeOut()
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
20 Chapter2- jQuery Fundamentals

C. show()
D. fadeTo()
Ans: C

7. Which of the following jQuery method is used to sets or gets the value
of form control?

A. html()
B. text()
C. value()
D. val()
Ans: D

8. The ____________ method removes the child elements from the


selected element whereas the ______________ method removes the
selected element and its child elements.

A. empty() and remove()


B. remove() and empty()
C. delete() and remove()
D. remove() and delete()
Ans: A

9. Which of the following is not a jQuery event?

A. click()
B. onClick()
C. blur()
D. mouseleave()
Ans: B

10. Which of the following selector expression will select the element
having id “abcd”?

A. $(# abcd)
B. $(‘#abcd’)
C. $(‘.abcd’)
D. $(abcd)
Ans: B

11. Which of the following method does not provides sliding effect?

A. slideUp()
B. slideDown()
C. fadeIn()
D. slideToggle()
Ans: C

12. I have a dropdown menu in my form having class property “city”. What
line of jQuery code should I write if I want to get the value of that
Prepared By: Meghna Vithlani(Asst. Prof, MKICS)
21 Chapter2- jQuery Fundamentals

menu? Consider that I want to store that value in a variable named


“vcity”.

A. $vcity = $(‘.city’).val();
B. var vcity = $(‘.city’).val();
C. var vcity = $(‘.city’).text();
D. var vcity = $(‘.city’).html();
Ans: B

2.4.2 Answer the following in brief:

1. What is the use of callback parameter of JQuery effect methods?

2. What is the difference between remove() and empty() method of JQuery?

3. What do you mean by Document Ready Event?

4. What is element selector in JQuery?

5. Explain #id selector in JQuery

6. What is .class selector in JQuery?

7. What is GET method in JQuery?

8. What is SET method in jQuery?

9. What is chaining effect in jQuery?

10. Give difference between wrap and unwrap methods in jQuery.

2.4.3 Give answer the following in detail:

1. Write a note on jQuery.

2. Write a note on jQuery events.

3. Write a note on effects of jQuery.

4. What are the types of selectors in jQuery? Explain each with example

5. Explain jQuery methods for CSS manipulation.

6. Explain jQuery insert methods.

7. Explain jQuery methods to modify DOM.

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)


22 Chapter2- jQuery Fundamentals

Prepared By: Meghna Vithlani(Asst. Prof, MKICS)

You might also like