jQuery Interview Questions and Answers (185) - Page 5

How to hide all Paragraph embedded on the Page?

We have to pass P which is basically a paragraph in selector then call Hide method to hide Paragraph then it will hide all the paragraph elements on the Page.

For Example:-
$("p").hide();

How to hide particular control using jQuery?

If we want to use any control id then we have to use # Sign folloed by ControlID in the Selector.
Suppose,i have a button with id btnValidate and i want to hide this button,so i will write below code:-

$("#btnValidate").hide();

Now,btnValidate will be hidden from Page.
How to hide all controls which have the same class applied?

We will pass class name(dot as prefix) in the selector,which will check all controls which have the same class applied then will hide them from Page.

Suppose,i have a class named button_border written on the Page or File,then i will write as:-
$(".button_border").hide();

What do we mean by #id Selector?

The jQuery #id selector is nothing but a controlID which uses the id attribute of an HTML tag to find the specific control.It must be unique on a page.
We have to use # sign followd by ControlID yo find control usng jQuery.

Syntax:-
$("#anyControlID")
For Example:-
<asp:Button ID="btnDelete" runat="server" Text="Delete"/>

<asp:Button ID="btnSave" runat="server" Text="Save"/>

$(document).ready(function(){
$("button").click(function(){
$("#btnDelete").hide();
});
});


Here,on clicking of save button,Delete button will be hidden.
What do we mean by element or control Selector?

The jQuery element selector is used to select any controls based on the control name.

For Example:-
We can select all division tag or H1 tag elements on a page as below:-
$("div")

$("h1")

What do we mean by .class Selector?

The jQuery class selector searches any controls with a particular class.We have to write a dot character followed by class name in selector tag as below:
$(".name_of_the_class_name")

For Example:-
$(".button_border")

Where,button_border is our class name.
How to disable Browser Back button through jQuery?

Write below line of code:-
<script type="text/javascript" language="javascript">

$(document).ready(function() {
window.history.forward(1);
//OR
window.history.forward(-1);
});
</script>

How to disable mouse right click using jQuery?

First, include the jQuery library in head section like below:-
<script src = "Jquery-1.8.0.min.js" type = "text/JavaScript"></script>

Now write below code:-
<script type="text/JavaScript">

$(function()
{
$(this).bind(“contextmenu”, function(e)
{
e.preventDefault();
});

});
</script>

How to disable cut,copy & paste in TextBox using jQuery?

Write Below code on ASPX page:-
<script type="text/javascript">

$(document).ready(function ()
{
$('#txt_employee_code').bind('copy paste cut',function(e)
{
e.preventDefault();
});

});
</script>

What is the action of blind effect in Jquery and how to apply blind effect in Jquery?

The blind effect hides/shows an element by wrapping the element in a container, and "pulling the blinds"

Example:
The code should be written with in the body html and body tags.
For applying this blind effect we should give a link of jquery version

This is the link of jquery version

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>


<link rel="stylesheet"  

href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<style>
#toggle {
width: 300px;
height: 100px;
background: black;
background:white;
}
</style>


<p>Click here for the action.</p>
<div id="toggle"></div>

<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "blind" );
});
</script>

How to use a fold effect in Jquery ?

In order to show /hides an element folding in the Html page ..
For example :
Here this code should be written with in Html and body tags
For this Fold effect we should give a link of Jquery Version to run this effect
Css should be written with in the script


This is the Link of Jquery version.
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>


 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">


<body>
<style>

div {
width: 600px;
height: 150px;
background: blue;
border: 2px solid black;
}
</style>


<button>Fold</button>
<div></div>

<script>
$("button").click(function () {
$("div").toggle("fold", 1000);
});
</script>

How to fade an element in the Jquery?

This fade action Hides/shows an element in jquery in the html page.

Example:

This is the version of Jquery written with in the script

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>



This is the link of stylesheet and a link of Jquery:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">


Code for the Fade function
<style>

#Fade {
width: 300px;
height: 150px;
color:white;
background-color:blue;
}
</style>
<p>Click around box for the action </p>

<div id="Fade">Hide the text box</div>

<script>
$(document).click(function () {
$("#Fade").toggle("fade");
});
</script>

In Jquery how do we use the effect of drag and drop function in html?

This drag and drop function is used to show the text elements on the drop box to highlight.
Example:

The code should be written in html and body tags.

The source code of Jquery should be written in Code

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>


Link Should me mentioned in the style sheet to run the function of the effect.
 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">


The code of the effect is

<style>
#Drag {
width: 150px;
height: 150px;
background: royalblue;
}
#Drop {
position: relative;
left: 250px;
top: 0;
width: 250px;
height: 250px;
background: green;
color: white;
padding: 20px;
}
</style>




<div id="Drop">Written text is dropped her</div>
<div id="Drag">HEllo the text is written in this box</div>

<script>
$("#Drag").draggable();
$("#Drop").droppable({
drop: function () {
alert("dropped");
}
});
</script>

What is selector ?

To find the html element in jQuery we use selectors... and
to work with an element on the web page, first we need to find them for this purpose we
use selectors in Jquery

For Example :


<script language="javascript" type="text/javascript">
$("*").css("border", "2px solid brown");
</script>


here in the above code ("*") stare is called selector
How do we select all selectors in Jquery in a page ?

We use (*)asterisk symbol to select all the selectors in the page
for example
 <script language="text/javascript">

$("*").css("border", "2px dashed brown");
</script>

What function we must use to select a particular element having a specific class and how do we define it ?

class selector is used to select an element with a specific class
We need to use / we define it by the class name with “.” (dot) ex- (.class)
for example :
<script language="javascript" type="text/javascript">

$(".class").css("border", "2px solid brown");
</script>

What is the specific type elements to select elements in Jquery?

Element selector is used to select an element with a specific type.
for example :
<script language="javascript" type="text/javascript">

$("p").css("border", "5px solid green");
</script>

in this "P"(paragraph) is the element.
What function for ID selector we must use to select an element in jquery . and how do we define it ?

ID selector can be usedto select an element having a specific id,
We need to prefix the id with “#” (hash symbol).

For example :

<script language="javascript" type="text/javascript">

$("#p").css("border", "5px solid brown");
</script>

How do we execute progressbar in jquery?

By giving the code called
$( "#processbar" ).progressbar({

value: false
});

this should be written in script tags
we should mentioned the div name as we have given in the class
<div id="processbar"></div>


For example:
This is the link of the jquery version
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>


This should be written in body tags

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>



<div id="processbar"></div>
<script>




$("#processbar").progressbar({
value: false
});
</script>

How to show a seekerbar/slider in jquery?

By giving a class called slider in jquery
 <script>

$("#seekerbar").slider();

</script>

div name should me mentioned as same in the script
<div id="seekerbar"></div>

for example:
This is the vresion of jquery

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>



This should be written with in the body tags

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="seekerbar"></div>
<script>
$("#seekerbar").slider();

</script>

Found this useful, bookmark this page to the blog or social networking websites. Page copy protected against web site content infringement by Copyscape

 Interview Questions and Answers Categories