JavaScript and jquery question for exam
Question 1. What are the selectors in jQuery and what are the types of Selectors?
Answer: If you would like to work with an element on the web page, first you need to find or select it. Selectors find the HTML elements using jQuery.
There are many types of selectors in the jQuery library. Some basic selectors are:
Name: It is used to select all elements which match with the given element Name.
#ID: It is used to select a single element which matches with the given ID
.Class: It is used to select all elements which match with the given Class.
Universal (*): It is used to select all elements available in a DOM.
Multiple Elements E, F, G: It is used to select the combined results of all the specified selectors E, F or G.
Attribute Selector: It is used to select elements based on its attribute value.
Question 2. What is $() in jQuery library?
Answer: The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love it’s brevity. $() function is used to wrap any object into jQuery object, which then allows you to call various method defined jQuery object. You can even pass a selector string to $()function, and it will return jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it’s quite basic, it is used to differentiate between developer who knows jQuery or not.
Question 3. What is an event ? And describe any four part of mouse even.
Answer: jQuery events are the actions that can be detected by your web application. They are used to create dynamic web pages. An event shows the exact moment when something happens.
These are some examples of events.
- A mouse click
- An HTML form submission
- A web page loading
- A keystroke on the keyboard
- Scrolling of the web page etc.
- These events can be categorized on the basis their types:
comming soon....
Question 4. What are the methods used to provide effects?
Answer: jQuery provides many amazing effects, we can apply these effects quickly and with simple configuration. The effect may be hiding, showing, toggling, fadeout, fadein, fadeto and so on toggle(), Show() and hide() methods. Similarly we can use other methods as in the following:
animate( params, [duration, easing, callback] ) This function makes custom animations for your HTML elements.
fadeIn( speed, [callback] ) This function fades in all the matched elements by adjusting their opacity and firing an optional callback after completion.
fadeOut( speed, [callback] ) This function is used to fade out all the matched elements by adjusting their opacity to 0, then setting the display to "none" and firing an optional callback after completion.
fadeTo( speed, opacity, callback ) This function fade the opacity of all the matched elements to a specified opacity and firing an optional callback after completion.
stop( [clearQueue, gotoEnd ]) This function stops all the currently running animations.
Question 5. How can we use hide() method on a button click using jQuery?
Answer: In jQuery the hide () method is very useful. By using this method you can hide HTML elements with the hide() method. In this example, we create a div element which contains text. When we click on the Button the text we use in the div will be hidden.
<html>
<head>
<title>here</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#div1").hide();
});
});
</script>
</head>
<body>
<h2>
This is a heading</h2>
<div id="div1">
jQuery is great library for developing ajax based application.
<br> jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
<br />
<br />
<br />
</div>
<button>
Hide</button>
</body>
<html>
Question 6. What is chaining in jQuery?
Answer:
Chaining is a powerful feature of jQuery. Chaining means specifying multiple functions and/or selectors to an element.
Chaining reduces the code segment and keeps it very clean and easy to understand. Generally chaining uses the jQuery built in functions that makes compilation a bit faster.
By using chaining we can write the above code as follows:
$(document).ready(function () {
$("#div2").html($("#txtBox").prop("readonly")) + '</br>';
$("#div3").html($("#txtBox").attr("readonly"));
});
Question 7. Define slideToggle() effect?
Answer:
The slide methods do the up and down element. To implement slide up and down on element jQuery here are the three methods:
slideDown()
slideUp()
lideToggle()
And how to use them:
1. slideDown() Method
This function is used to slide and hide an element on down side:
<script type="text/javascript">
$(document).ready(function() {
$("#btnSlideDown").click(function() {
$("#login_wrapper").slideDown();
return false;
});
});
</script>
2. slideUp() Method
This function is used to slide and show element up side:
<script type="text/javascript">
$(document).ready(function() {
$("#btnSlideUp").click(function() {
$("#login_wrapper").slideUp();
return false;
});
});
</script>
3. slideToggle() Method
This method is between slideUp() method and slideDown() method. It shows/hides an element in up/down side:
<script type="text/javascript">
$(document).ready(function() {
$("#btnSlideToggle").click(function() {
$("#login_wrapper").slideToggle();
return false;
});
});
</script>
Question 8. Define Add or Remove class in jQuery?
Answer: jQuery addClass() Method
The jQuery addClass() method adds one or more classes to the selected elements.The following example will add the class .page-header to the <h1> and the class .highlight to the <p> elements with class .hint on button click.
<!DOCTYPE html>
<html >
<head>
<title>Adding a Class to the Elements in jQuery</title>
<style>
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
.hint{
font-style: italic;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").addClass("page-header");
$("p.hint").addClass("highlight");
});
});
</script>
</head>
<body>
<h1>Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Add Class</button>
</body>
</html>
jQuery removeClass() Method
Similarly, you can remove the classes from the elements using the jQuery removeClass() method. The removeClass() method can remove a single class, multiple classes, or all classes at once from the selected elements.The following example will remove the class .page-header from the <h1> and the class .hint and .highlight from the <p> elements on button click
<!DOCTYPE html>
<html lang="en">
<head>
<title>Removing Classes from the Elements in jQuery</title>
<style>
.page-header{
color: red;
text-transform: uppercase;
}
.highlight{
background: yellow;
}
.hint{
font-style: italic;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").removeClass("page-header");
$("p").removeClass("hint highlight");
});
});
</script>
</head>
<body>
<h1 class="page-header">Demo Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<p class="hint highlight"><strong>Tip:</strong> Lorem Ipsum is dummy text.</p>
<button type="button">Remove Class</button>
</body>
</html>
Question 9. Why to use jQuery $ sign?
Answer: The basic operation in jQuery is selecting an element in DOM. This is done with the help of $() construct with a string parameter containing any CSS selector expression. $() will return zero or more DOM elements on which we can apply an effect or a style.
Question 10. How to read, write and delete cookies in jQuery?
Answer: To deal with cookies in jQuery you have to use the Dough cookie plugin. Dough is easy to use and has some powerful features.
- Create cookie:
$.dough(“cookie_name”, “cookie_value”);
- Read Cookie:
$.dough(“cookie_name”);
- Delete cookie:
$.dough(“cookie_name”, “remove”);
Question 11. What is a CDN? What are the advantages of using CDN?
Answer: Content Delivery Network or Content Distribution Network(CDN) is a large distributed system of servers deployed in multiple data centers across the internet. It provides the files from servers at a higher bandwidth that leads to faster loading time. These are several companies that provide free public CDNs:
- Microsoft
- Yahoo
Advantages of using CDN:
- It reduces the load from the server.
- CDN also saves bandwidth. jQuery framework is loaded faster from these CDN.
- If a user regularly visits a site which is using jQuery framework from any of these CDN, it will be cached.
Answer:
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
<script type="text/javascript">
function valid(){
var name= document.getElementById("t1").value;
var email= document.getElementById("t2").value;
var number= document.getElementById("t3").value;
var pwd= document.getElementById("t4").value;
var cpwd= document.getElementById("t5").value;
//email id expression code
var pwd_expression = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
var letters = /^[A-Za-z]+$/;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var nu = /^\d{10}$/;
if(name=='')
{
alert('Please enter your name');
}
else if(!letters.test(name))
{
alert('Name field required only alphabet characters');
}
else if(email=='')
{
alert('Please enter your user email id');
}
else if (!filter.test(email))
{
alert('Invalid email');
}
else if(number=='')
{
alert('Please enter the number.');
}
else if(!nu.test(number))
{
alert('Invalid phone number');
}
else if(pwd=='')
{
alert('Please enter Password');
}
else if(cpwd=='')
{
alert('Enter Confirm Password');
}
else if(!pwd_expression.test(pwd))
{
alert ('Upper case, Lower case, Special character and Numeric letter are required in Password filed');
}
else if(pwd != cpwd)
{
alert ('Password not Matched');
}
else if(document.getElementById("t5").value.length < 6)
{
alert ('Password minimum length is 6');
}
else if(document.getElementById("t5").value.length > 12)
{
alert ('Password max length is 12');
}
else
{
alert('Thank You for Login & You are Redirecting to Campuslife Website');
// Redirecting to other page or webste code.
}
}
</script>
</head>
<body>
<form action="" onsubmit="return valid()" >
Name: <input type="text" name="name" id="t1"><br><br>
Email: <input type="text" name="email" id="t2"><br><br>
Number: <input type="number" name="number" id="t3"><br><br>
Password: <input type="password" name="password" id="t4"><br><br>
Confirm password: <input type="password" name="cpassword" id="t5"><br><br>
<input type="submit" name="submit" value="submit" > <input type="reset" name="reset">
</form>
</body>
</html>
.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.