JQuery
Interview Questions Part - 3
Q 1.
What are Events?
Ans 1. User’s actions to which a
website can respond to are called events.
For example –
• Clicking an element
$(“button”).click(function()
{
Your action here on button click…
});
• Moving mouse over an element
$(“div”).mouseover(function()
{
Your action here when mouse moves over div…
});
Q 2.
What are the various JQuery event methods available?
Ans 2. Following are the various
JQuery event methods available –
Mouse Events:
1.
click
2.
dblclick
3.
mouseenter
4.
mouseleave
Keyboard Events:
1.
keypress
2.
keydown
3.
keyup
Form
Events:
1.
submit
2.
change
3.
focus
4.
blur
Document/Window
Events:
1.
load
2.
resize
3.
scroll
4.
unload
Q 3.
How to use JQuery ready method?
Ans 3. The JQuery ready
method is used to perform action after the HTML document has loaded.
The function within the “ready” event method
executes only after the document has loaded.
SYNTAX -
$(document).ready(function() {
Your
code here will execute only after the HTML document has loaded…
});
Example –
$(document).ready(function() {
$(“button”).click(function(){
$(“p”).hide();
});
});
The action of hiding the <p> element on
button click will execute only after the entire HTML document has loaded.
Q 4.
How to use JQuery click method?
Ans 4. The
JQuery click method is used to perform an action after a selected HTML element
is clicked i.e. the
function within the “click” event method executes only after the user clicks
the selected HTML element
SYNTAX -
$(selector).click(function()
{
Your action here on element
click…
});
Example –
$(document).ready(function() {
$(“button”).click(function(){
$(“p”).hide();
});
});
When user clicks the button the “<p>” element
gets hidden.
Q 5. How to
use JQuery mouseenter method?
Ans 5. The JQuery mouseenter
method is used to perform an action when the mouse pointer enters the selected
HTML element i.e. the
function within the “mouseenter” event method executes only after the mouse pointer
enters the selected HTML element.
SYNTAX –
$(selector).mouseenter(function()
{
Your action here when mouse pointer enters the selected HTML element…
});
Example –
$(document).ready(function() {
$(“div”).mouseenter(function(){
alert(“Mouse
pointer has entered div element”);
});
});
An alert will be shown when the mouse pointer
enters the “<div>” element
Q 6. How to
use JQuery mouseleave method?
Ans 6. The JQuery
mouseleave method is used to perform an action when the mouse pointer leaves
the selected HTML element i.e. the
function within the “mouseleave” event method executes only after the mouse pointer
leaves the selected HTML element.
SYNTAX –
$(selector).mouseleave(function()
{
Your action here when mouse pointer leaves the selected HTML element…
});
Example –
$(document).ready(function() {
$(“div”).mouseleave(function(){
alert(“Mouse
pointer has left div element”);
});
});
An alert will be shown when the mouse pointer
leaves the “<div>” element
Q 7. How to
use JQuery hover method?
Ans 7. The JQuery hover
method gives a combined effect of both the mouseenter and mouseleave methods.
It is used to perform an action when the mouse pointer enters a selected HTML
element and then an action when it leaves that element.
SYNTAX –
$(selector).hover(function()
{
Your action here when mouse pointer enters the selected HTML element…
},
function()
{
Your action here when mouse pointer leaves the selected HTML element…
});
Example –
$(document).ready(function() {
$(“div”).hover(function(){
alert(“Mouse
pointer has entered div element”);
},
function(){
alert(“Mouse
pointer has left div element”);
});
});
The first function is dedicated for mouseenter event and the second for
mouseleave event.
Q 8. How to
use JQuery on method?
Ans 8. The “on” event method
attaches one or more event handlers to the selected HTML element.
SYNTAX: Attaching one event
handler–
$(selector).on(“Event_Name”,
function(){action here…});
SYNTAX: Attaching multiple
event handlers–
$(selector).on(
{
Event_Name1:function()
{
Your action here for Event_Name1…
},
Event_Name2:function()
{
Your action here for Event_Name2…
},
.
.
.
Event_NameN:function()
{
Your action here for Event_NameN…
}
}
);
Example: Attaching one
event handler–
$(document).ready(function() {
$(“div”).on(“click”,
function(){
alert(“Div
has been clicked”);
});
});
The above example attaches a click event handler
with the “<div>” element. When the “<div>” element is clicked the
above alert will be shown.
Example: Attaching multiple
event handlers–
$(document).ready(function() {
$(“div”).on(
{
click:
function()
{
alert(“Div has been clicked”);
},
dblclick:
function()
{
alert(“Div has been double clicked”);
}
});
});
The above example will attach two event handlers one
for “click” and another for “dblclick” to “<div>”. When “<div>”
element is clicked the first alert is shown and when it is double clicked,
second alert is shown.
Q 9. How to
use JQuery focus method?
Ans 9. The JQuery focus
method is used to perform an action after the form field is focused.
SYNTAX-
$(selector).focus(function(){
Your
action here after the form field gets focused…
});
Example –
$(document).ready( function(){
$(“input”).focus(function(){
alert(“The
input element of form has been focused”);
});
});
The above alert is shown when the input element of
the form element is focused.
Q 10. How
to use JQuery blur method?
Ans 10. The
JQuery focus method is used to perform an action after the form field loses
focus.
SYNTAX-
$(selector).blur(function(){
Your
action here after the form field loses focus…
});
Example –
$(document).ready( function(){
$(“input”).blur(function(){
alert(“The input element of form has
lost focus”);
});
});
No comments:
Post a Comment