What is a Cookie?
A cookie is a variable that is stored on the visitor’s computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.
Examples of cookies:
Name cookie – The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like “Welcome John Doe!” The name is retrieved from the stored cookie
Date cookie – The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like “Your last visit was on Tuesday August 11, 2005!” The date is retrieved from the stored cookie
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(” ” + c_name + “=”);
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + “=”);
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf(“=”, c_start) + 1;
var c_end = c_value.indexOf(“;”, c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? “” : “; expires=”+exdate.toUTCString());
document.cookie=c_name + “=” + c_value;
}
function checkCookie()
{
var username=getCookie(“username”);
if (username!=null && username!=””)
{
alert(“Welcome again ” + username);
}
else
{
username=prompt(“Please enter your name:”,””);
if (username!=null && username!=””)
{
setCookie(“username”,username,365);
}
}
}
</script>
</head>
<body onload=”checkCookie()”>
</body>
</html>
1. What is JavaScript?
A2:JavaScript is a platform-independent,event-driven, interpreted client-side scripting and programming language developed by Netscape Communications Corp. and Sun Microsystems.
2. How is JavaScript different from Java?
JavaScript was developed by Brendan Eich of Netscape; Java was developed at Sun Microsystems. While the two languages share some common syntax, they were developed independently of each other and for different audiences. Java is a full-fledged programming language tailored for network computing; it includes hundreds of its own objects, including objects for creating user interfaces that appear in Java applets (in Web browsers) or standalone Java applications. In contrast, JavaScript relies on whatever environment it’s operating in for the user interface, such as a Web document’s form elements.
7. How to detect the operating system on the client machine?
In order to detect the operating system on the client machine, the navigator.appVersion
string (property) should be used.
10. What are JavaScript types?
Number, String, Boolean, Function, Object, Null, Undefined.
11. How do you convert numbers between different bases in JavaScript?
Use the parseInt() function, that takes a string as the first parameter, and the base as a second parameter. So to convert hexadecimal 3F to decimal, use parseInt (“3F”, 16);
12. How to create arrays in JavaScript?
We can declare an array like this
var scripts = new Array();
14. What is a fixed-width table and its advantages?
Fixed width tables are rendered by the browser based on the widths of the columns in the first row, resulting in a faster display in case of large tables. Use the CSS style table-layout:fixed to specify a fixed width table.
If the table is not specified to be of fixed width, the browser has to wait till all data is downloaded and then infer the best width for each of the columns. This process can be very slow for large tables.
17. Where are cookies actually stored on the hard disk?
This depends on the user’s browser and OS.
In the case of Netscape with Windows OS,all the cookies are stored in a single file called
cookies.txt
c:Program FilesNetscapeUsersusernamecookies.txt
In the case of IE,each cookie is stored in a separate file namely username@website.txt.
c:WindowsCookiesusername@Website.txt
23. What is negative infinity?
It’s a number in JavaScript, derived by dividing negative number by zero.
25. What is the data type of variables of in JavaScript?
All variables are of object type in JavaScript.
26. Methods GET and POST in HTML forms – what’s the difference?.
GET: Parameters are passed in the querystring. Maximum amount of data that can be sent via the GET method is limited to about 2kb.
POST: Parameters are passed in the request body. There is no limit to the amount of data that can be transferred using POST. However, there are limits on the maximum amount of data that can be transferred in one name/value pair.
31. Are Java and JavaScript the Same?
No.java and javascript are two different languages.
Java is a powerful object – oriented programming language like C++,C whereas Javascript is a
client-side scripting language with some limitations.
49. How about 2+5+”8″?
Since 2 and 5 are integers, this is number arithmetic, since 8 is a string, it’s concatenation, so 78 is the result.
36. What does “1″+2+4 evaluate to?
Since 1 is a string, everything is a string, so the result is 124.
68. What is the difference between undefined value and null value?
(i)Undefined value cannot be explicitly stated that is there is no keyword called undefined whereas null value has keyword called null
(ii)typeof undefined variable or property returns undefined whereas typeof null value returns object
113. decodeURI(), encodeURI()
Many characters cannot be sent in a URL, but must be converted to their hex encoding. These functions are used to convert an entire URI (a superset of URL) to and from a format that can be sent via a URI.
var uri = “http://www.google.com/search?q=sonofusion Taleyarkhan”
document.write(“Original uri: “+uri);
document.write(“
encoded: “+encodeURI(uri));
44. What is the difference between an alert box and a confirmation box?
An alert box displays only one button which is the OK button whereas the Confirm box
displays two buttons namely OK and cancel.
Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as “setters,” as they change the values of properties.
A few of these methods—such as .attr(), .html(), and .val()—also act as “getters,” retrieving information from DOM elements for later use.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
Get Content – text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation is:
• text() – Sets or returns the text content of selected elements
• html() – Sets or returns the content of selected elements (including HTML markup)
• val() – Sets or returns the value of form fields
$(“#btn1″).click(function(){
$(“#test1″).text(function(i,origText){
return “Old text: ” + origText + ” New text: Hello world!
(index: ” + i + “)”;
});
});
$(“button”).click(function(){
$(“#w3s”).attr({
“href” : “http://www.w3schools.com/jquery”,
“title” : “W3Schools jQuery Tutorial”
});
});
• 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
function appendText()
{
var txt1=”
Text.
“; // Create element with HTML
var txt2=$(“
“).text(“Text.”); // Create with jQuery
var txt3=document.createElement(“p”); // Create with DOM
txt3.innerHTML=”Text.”;
$(“p”).append(txt1,txt2,txt3); // Append the new elements
}
• width() sets or returns the width of an element (includes NO padding, border, or margin).
• height()
• innerWidth() returns the width of an element (includes padding).
• innerHeight()
• outerWidth() returns the width of an element (includes padding and border).
• outerHeight()
• outerWidth(true) returns the width of an element (includes padding and border & margin).
The jQuery load() method is a simple, but powerful AJAX method.
Code:
var myValue = $(‘#MyId’).val();
// get the value in var Myvalue by id
Or for set the value in selected item
Code:
$(‘#MyId’).val(“print me”);
// set the value of a form input
5- How to get the server response from an AJAX request using Jquery?
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
Code:
$.ajax({
url: ‘pcdsEmpRecords.php’,
success: function(response) {
alert(response);
},
error: function(xhr) {
alert(‘Error! Status = ‘ + xhr.status);
}
});
6- How do you update ajax response with id ” resilts”?
By using below code we can update div content where id ‘results’ with ajax response
Code:
function updateStatus() {
$.ajax({
url: ‘pcdsEmpRecords.php’,
success: function(response) {
// update div id Results
$(‘#results’).html(response);
}
});
}
7- How do You disable or enable a form element?
There are two ways to disable or enable form elements.
Set the ‘disabled’ attribute to true or false:
Code:
// Disable #pcds
$(‘#pcds’).attr(‘disabled’, true);
// Enable #pcds
$(‘#pcds’).attr(‘disabled’, false);
Add or remove the ‘disabled’ attribute:
// Disable #pcds
$(“#pcds”).attr(‘disabled’, ‘disabled’);
// Enable #x
$(“#pcds”).removeAttr(‘disabled’);
8- How do you check or uncheck a checkbox input or radio button?
There are two ways to check or uncheck a checkbox or radio button.
Set the ‘checked’ attribute to true or false.
Code:
// Check #pcds
$(‘#pcds’).attr(‘checked’, true);
// Uncheck #pcds
$(‘#pcds’).attr(‘checked’, false);
Add or remove the ‘checked’ attribute:
// Check #pcds
$(“#pcds”).attr(‘checked’, ‘checked’);
// Uncheck #pcds
$(“#pcds”).removeAttr(‘checked’);
9- How do you get the text value of a selected option?
Select elements typically have two values that you want to access. First there’s the value to be sent to the server, which is easy:
Code:
$(“#pcdsselect”).val();
// => 1
The second is the text value of the select. For example, using the following select box:
Code:
Mr
Mrs
Ms
Dr
Prof
If you wanted to get the string “Mr” if the first option was selected (instead of just “1″), you would do that in the following way:
Code:
$(“#mpcdsselect option:selected”).text();
// => “Mr”
• Is jQuery a library for client scripting or server scripting?
Ans: Client scripting
• Is jQuery a W3C standard?
Ans: No
• What are jQuery Selectors?
Ans: Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
• The jQuery html() method works for both HTML and XML documents?
Ans: It only works for HTML.
• Which sign does jQuery use as a shortcut for jQuery?
Ans: $(dollar) sign.
• What does $(“div”) will select?
Ans: It will select all the div element in the page.
• What does $(“div.parent”) will select?
Ans: All the div element with parent class.
• What is the name of jQuery method used for an asynchronous HTTP request?
Ans: jQuery.ajax()
jQuery Tip : Always load your jQuery framework from CDN
Here is a quick tip for the day. Always load your jQuery framework from Google, Microsoft or jQuery CDN(Content Delivery Network). As it provides several advantages.
1. You always use the latest jQuery framework.
2. It reduces the load from your server.
3. It saves bandwidth. jQuery framework will load faster from these CDN.
4. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.
Code to load jQuery Framework from Google CDN
1
3
Code to load jQuery Framework from Microsoft CDN
1
3
Code to load jQuery Framework from jQuery Site(EdgeCast CDN)
1
3
How to load jQuery locally when CDN fails
There are couple of advantage if you load your jQuery from any CDN. Read my post about “jQuery Tip : Always load your jQuery framework from CDN”. It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.
Hang on, there is a solution for this as well. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.
1
2
3 if (typeof jQuery == ‘undefined’)
4 {
5 document.write(unescape(“%3Cscript src=’Scripts/jquery.1.5.1.min.js’ type=’text/javascript’%3E%3C/script%3E”));
6 }
7
It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.
What is jQuery.noConflict()
What is jQuery.noConflict()? Well, jQuery is popular because there are plenty of useful, simple and easy to use plugins. But while using jQuery plugins, sometimes we include other libraries like prototype, mootools, YUI etc. The problem comes when one or more other libraries are used with jQuery as they also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().
How to use it?
01
02
03
04 jQuery.noConflict();
05 // Use jQuery via jQuery(…)
06 jQuery(document).ready(function(){
07 jQuery(“div”).hide();
08 });
09 // Use Prototype with $(…), etc.
10 $(‘someid’).hide();
11
When .noConflict() is called then jQuery returns $() to its previous owner and you will need to use jQuery() instead of shorthand $() function. In this case, “jQuery” will be used in rest of the code. You won’t be able to take advantage of shorthand.
There is another option if you want to take advantage of shorthand.
01
02
03
04 var $j = jQuery.noConflict();
05 // Use jQuery via jQuery(…)
06 $j(document).ready(function(){
07 $j(“div”).hide();
08 });
09 // Use Prototype with $(…), etc.
10 $(‘someid’).hide();
11
But you still love $() and don’t want to lose it. So what to do? But there is a solution for this also.
01
02
03
04 jQuery.noConflict();
05 // Put all your code in your document ready area
06 jQuery(document).ready(function($){
07 // Do jQuery stuff using $
08 $(“div”).hide();
09 });
10 // Use Prototype with $(…), etc.
11 $(‘someid’).hide();
12
What you need to do is in jQuery(document).ready() put function($) and now you use $ for your jQuery code.
Difference between $(this) and ‘this’ in jQuery
Before writing this post, I was also confused about ‘$(this)’ and ‘this’ in jQuery. I did some R&D and found out the difference between both of them. Let’s first see how do we use them.
1 $(document).ready(function(){
2 $(‘#spnValue’).mouseover(function(){
3 alert($(this).text());
4 });
5 });
1 $(document).ready(function(){
2 $(‘#spnValue’).mouseover(function(){
3 alert(this.innerText);
4 });
5 });
Got any idea about the difference?
this and $(this) refers to the same element. The only difference is the way they are used. ‘this’ is used in traditional sense, when ‘this’ is wrapped in $() then it becomes a jQuery object and you are able to use the power of jQuery.
In the second example, I have to use innerText() to show the text of the span element as this keyword is not a jQuery object yet. So I have to use the native JavaScript to get the value of span element. But once it is wrapped in $() then jQuery method text() is used to get the text of Span.
So the summary is $(this) is a jQuery object and you can use the power and beauty of jQuery, but with ‘this’ keyword, one need to use native JavaScript.
jQuery empty() vs remove()
jQuery provides 2 methods empty() and remove() to remove the elements from DOM. I have seen the programmers getting confused between both the methods.
empty() method removes all the child element of the matched element where remove() method removes set of matched elements from DOM. Confused? Let me explain you with an example.
There are 2 div elements “dvParent” and “dvChild”.
Parent Div
jQuery By Example: Demo of empty() vs remove() method.
Now when we call empty() method on “dvChild”, then it will remove all the child element of div.
$(‘#dvChild’).empty();
Result will be:
Parent Div
Now when remove() method is called on “dvChild” element then it will not only remove the child element but it will also remove the “dvChild” element from DOM.
$(‘#dvChild’).remove();
Result will be:
Parent Div
So the difference between both the method is that empty() remove only the child element of the element on which the method is called where remove() method removes not only the child but also the element on which it is called.
So to summarize, there are 3 differences between .remove() and .detach()
• remove() method would erase data associated with the element(data that had been set using the data() method).
• remove() method would also erase the event associated with the element.
• If you are not concerned about the data and event then use remove() as it is faster than detach(). There is a performance test created at jsPerf.com for remove() and detach() and below is the result.
Is window.onload is different from document.ready()
window.onload() is traditional Java script code which is used by developers from many years. This event is gets called when the page is loaded. But how this is different from jQuery document.ready() event?
Well, the main difference is that document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.
$(function(){
// jQuery methods go here…
});
jQuery Tip – How to check if element is empty
In this post, I will show you a simple tip to check or verify that the element that you are accessing in jQuery is empty or not. jQuery provides a method to get and set html of any control.Check these articles for more details.
• Get HTML of any control using jQuery
• Set HTML of any control using jQuery
We will use the same html() attribute to determine whether the element is empty or not.
1 $(document).ready(function() {
2 if ($(‘#dvText’).html()) {
3 alert(‘Proceed as element is not empty.’);
4 }
5 else
6 {
7 alert(‘Element is empty’);
8 }
9 });
Declare a div element “dvText” with no content like this.
1
But there is a problem here. If you declare your div like below given code, above jQuery code will not work because your div is no more empty. By default some spaces gets added.
1
2
So what’s the solution? Well, I had posted about “How to remove space from begin and end of string using jQuery”, so we will use the trim function to trim the spaces from the begin and end of the html() attribute.
1 $(document).ready(function() {
2 if ($(‘#dvText’).html().trim()) {
3 alert(‘Proceed as element is not empty.’);
4 }
5 else
6 {
7 alert(‘Element is empty’);
8 }
9 });
width() vs css(‘width’) and height() vs css(‘height’)
jQuery provides two ways to set width and height of any element. You can set using css or you can use jQuery provided methods. If you want to set width to 100px then
1 $(‘#dvText1′).css(‘width’,’100px’);
1 $(‘#dvText2′).width(100);
Then what is the difference?
The difference lies in datatype. As its clear in code that with css method you need to append ‘px’ to the width value and with width you don’t need to specify.
When you want to read width of any element then css method will return you string value like ’100px’ while width will return an integer value.
1 alert($(‘#dvText1′).css(‘width’));
This return ’100px’.
1 alert($(‘#dvText2′).width());
This returns 100.
So if you want to do any kind of manipulation then width function is the best option.
How to Check element exists or not in jQuery
Have you ever thought that what will happen if you try to access an element using jQuery which does not exist in your DOM? For example, I am accessing “dvText” element in below code and that element does not exists in my DOM.
1 var obj = $(“#dvText”);
2 alert(obj.text());
What will happen?
There could be 2 possibilities. Either an error will be thrown and rest of the code will not get executed OR Nothing will happen.
If you think that error will be thrown then you are wrong. In jQuery, you don’t need to be worried about checking the existence of any element. If element does not exists, jQuery will do nothing.
Then what is this post all about? As post title says “How to Check element exists or not in jQuery”, where you are not worried about element existence as jQuery handles it quite well. Well, Let say there is some long code related to the element you want to execute and you are not sure that element exists or not. jQuery doesn’t throw error but that doesn’t mean that you don’t check the existence. So it’s always better to check the existence. So how do we check it? See below code
1 if ($(‘#dvText’).length) {
2 // your code
3 }
jQuery provides length property for every element which returns 0 if element doesn’t exists else length of the element.
/* The .bind() method attaches the event handler directly to the DOM
element in question ( “#members li a” ). The .click() method is
just a shorthand way to write the .bind() method. */
$( “#members li a” ).bind( “click”, function( e ) {} );
$( “#members li a” ).click( function( e ) {} );
/* The .live() method attaches the event handler to the root level
document along with the associated selector and event information
( “#members li a” & “click” ) */
$( “#members li a” ).live( “click”, function( e ) {} );
/* The .delegate() method behaves in a similar fashion to the .live()
method, but instead of attaching the event handler to the document,
you can choose where it is anchored ( “#members” ). The selector
and event information ( “li a” & “click” ) will be attached to the
“#members” element. */
$( “#members” ).delegate( “li a”, “click”, function( e ) {} );
Bind attaches an event handler only to the elements that match a particular selector. This, expectedly, excludes any dynamically generated elements.
1. $(“#items li”).click(function() {
2. $(this).parent().append(“
New Element
“);
3. });
Live allows for the binding of event handlers to all elements that match a selector, including those created in the future. It does this by attaching the handler to the document. Unfortunately, it does not work well with chaining.
4. // children().next()…etc.
5. $(“li”).live(“click”, function() {
6. $(this).parent().append(“
New Element
“);
7. });
Delegate is a complete replacement for Live(). However, that obviously would have broken a lot of code! Nonetheless, delegate remedies many of the short-comings found in live(). It attaches the event handler directly to the context, rather than the document. It also doesn’t suffer from the chaining issues that live does. There are many performance benefits
8. // to using this method over live().
9. $(‘#items’).delegate(‘li’, ‘click’, function() {
10. $(this).parent().append(‘
New Element
‘);
11. });
12. // By passing a DOM element as the context of our selector, we can make
13. // Live() behave (almost) the same way that delegate()
14. // does. It attaches the handler to the context, not
15. // the document – which is the default context.
16. // The code below is equivalent to the delegate() version
17. // shown above.
18. $(“li”, $(“#items”)[0]).live(“click”, function() {
19. $(this).parent().append(“
New Element
“);
20. });
More Examples of jQuery Selectors
Syntax Description Example
$(“*”) Selects all elements Try it
$(this) Selects the current HTML element Try it
$(“p.intro”) Selects all
elements with class=”intro” Try it
$(“p:first”) Selects the first
element Try it
$(“ul li:first”) Selects the first
element of the first
Try it
$(“ul li:first-child”) Selects the first
element of every
Try it
$(“[href]“) Selects all elements with an href attribute Try it
$(“a[target='_blank']“) Selects all elements with a target attribute value equal to “_blank” Try it
$(“a[target!='_blank']“) Selects all elements with a target attribute value NOT equal to “_blank” Try it
$(“:button”) Selects all elements and elements of type=”button” Try it
$(“tr:even”) Selects all even
elements Try it
$(“tr:odd”) Selects all odd
elements $(“p”).click(function(){ // action goes here!! });
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
});
• fadeIn()fade in a hidden element.
• fadeOut()fade out a visible element.
• fadeToggle()faded out, fadeToggle() will fade them in.& faded in, fadeToggle() will fade them out
• fadeTo()fading to a given opacity
$(“button”).click(function(){
$(“#div1″).fadeTo(“slow”,0.15);
$(“#div2″).fadeTo(“slow”,0.4);
$(“#div3″).fadeTo(“slow”,0.7);
});
$(“button”).click(function(){
$(“#div1″).fadeIn();
$(“#div2″).fadeIn(“slow”);
$(“#div3″).fadeIn(3000);
});
• slideDown()
• slideUp()
• slideToggle()
The jQuery animate() method is used to create custom animations.
$(selector).animate({params},speed,callback);
$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
});
$(“button”).click(function(){
$(“p”).hide(“slow”,function(){
alert(“The paragraph is now hidden”);
});
});
jQuery Method Chaining
$(“#p1″).css(“color”,”red”).slideUp(2000).slideDown(2000);
Empty, Remove, Detach
So the difference between both the method is that empty() remove only the child element of the element on which the method is called where remove() method removes not only the child but also the element on which it is called.
So to summarize, there are 3 differences between .remove() and .detach()
• remove() method would erase data associated with the element(data that had been set using the data() method).
• remove() method would also erase the event associated with the element.
• If you are not concerned about the data and event then use remove() as it is faster than detach(). There is a performance test created at jsPerf.com for remove() and detach() and below is the result.
Difference between body onload() function document.ready() function used in jQuery?
1. We can have more than one document.ready() function in a page where we can have only one body onload function.
2. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
The .bind() method attaches the event handler directly to the DOM element The .click() method is just a shorthand way to write the .bind() method.
$( “#members li a” ).bind( “click”, function( e ) {} );
$( “#members li a” ).click( function( e ) {} );
The .live() method attaches the event handler to the root level document along with the associated selector and event information
$( “#members li a” ).live( “click”, function( e ) {} );
The .delegate() method behaves in a similar fashion to the .live()
method, but instead of attaching the event handler to the document,
$( “#members” ).delegate( “li a”, “click”, function( e ) {} );
1- What is jQuery ?
It’s very simple but most valuable Question on jQuery means jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Jquery is build library for javascript no need to write your own functions or script jquery all ready done for you
2- How you will use Jquery means requirement needed for using jquery?
Nothing more need to do just olny download jquery library(.js file) from any of the jquery site Download jquery and just linked with your html pages like all other javascript file
like below :
Code:
3- what the use of $ symbol in Jquery?
$ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery
4- How do you select an item using css class or ID and get the value by use of jquery?
If an element of html like
,or any tag have ID MyId and class used MyClass then we select the element by below jquery code
Code:
$(‘#MyId’) for ID and for classs $(‘.MyClass’)
and for value
Code:
var myValue = $(‘#MyId’).val();
// get the value in var Myvalue by id
Or for set the value in selected item
Code:
$(‘#MyId’).val(“print me”);
// set the value of a form input
5- How to get the server response from an AJAX request using Jquery?
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
Code:
$.ajax({
url: ‘pcdsEmpRecords.php’,
success: function(response) {
alert(response);
},
error: function(xhr) {
alert(‘Error! Status = ‘ + xhr.status);
}
});
7- How do You disable or enable a form element?
There are two ways to disable or enable form elements.
Set the ‘disabled’ attribute to true or false:
Code:
// Disable #pcds
$(‘#pcds’).attr(‘disabled’, true);
// Enable #pcds
$(‘#pcds’).attr(‘disabled’, false);
Add or remove the ‘disabled’ attribute:
// Disable #pcds
$(“#pcds”).attr(‘disabled’, ‘disabled’);
// Enable #x
$(“#pcds”).removeAttr(‘disabled’);
9- How do you get the text value of a selected option?
Select elements typically have two values that you want to access. First there’s the value to be sent to the server, which is easy:
Code:
$(“#pcdsselect”).val();
// => 1
The second is the text value of the select. For example, using the following select box:
Code:
Mr
If you wanted to get the string “Mr” if the first option was selected (instead of just “1″), you would do that in the following way:
Code:
$(“#mpcdsselect option:selected”).text();
// => “Mr”
Q2. Why jQuery?
Ans: Due to following functionality.
1. Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
2. AJAX functions
3. CSS functions
4. DOM manipulation
5. DOM transversal
6. Attribute manipulation
7. Event detection and handling
8. JavaScript animation
9. Hundreds of plug-ins for pre-built user interfaces, advanced animations, form validation etc.
10. Expandable functionality using custom plug-ins
Q3. Is jQuery replacement of Java Script?
Ans: No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
Q8. What are the different type of selectors in Jquery?
Ans: There are 3 types of selectors in Jquery
1. CSS Selector
2. XPath Selector
3. Custom Selector
Q9. Name some of the methods of JQuery used to provide effects?
Ans: Some of the common methods are :
1. Show()
2. Hide()
3. Toggle()
4. FadeIn()
5. FadeOut()
Q10. What is JQuery UI?
Ans: jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.
What are features of JQuery or what can be done using JQuery?
Features of Jquery
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plugins.
4. Ajax support
5. DOM selection events
6. Event Handling
Why jQuery?
jQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.
It helps to
# Improve the performance of the application
# Develop most browser compatible web page
# Implement UI related critical functionality without writing hundreds of lines of codes
# Fast
# Extensible – jQuery can be extended to implement customized behavior
–>
A cookie is a variable that is stored on the visitor’s computer. Each time the same computer requests a page with a browser, it will send the cookie too. With JavaScript, you can both create and retrieve cookie values.
Examples of cookies:
Name cookie – The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. Next time the visitor arrives at your page, he or she could get a welcome message like “Welcome John Doe!” The name is retrieved from the stored cookie
Date cookie – The first time a visitor arrives to your web page, the current date is stored in a cookie. Next time the visitor arrives at your page, he or she could get a message like “Your last visit was on Tuesday August 11, 2005!” The date is retrieved from the stored cookie
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(c_name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(” ” + c_name + “=”);
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + “=”);
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf(“=”, c_start) + 1;
var c_end = c_value.indexOf(“;”, c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? “” : “; expires=”+exdate.toUTCString());
document.cookie=c_name + “=” + c_value;
}
function checkCookie()
{
var username=getCookie(“username”);
if (username!=null && username!=””)
{
alert(“Welcome again ” + username);
}
else
{
username=prompt(“Please enter your name:”,””);
if (username!=null && username!=””)
{
setCookie(“username”,username,365);
}
}
}
</script>
</head>
<body onload=”checkCookie()”>
</body>
</html>
1. What is JavaScript?
A2:JavaScript is a platform-independent,event-driven, interpreted client-side scripting and programming language developed by Netscape Communications Corp. and Sun Microsystems.
2. How is JavaScript different from Java?
JavaScript was developed by Brendan Eich of Netscape; Java was developed at Sun Microsystems. While the two languages share some common syntax, they were developed independently of each other and for different audiences. Java is a full-fledged programming language tailored for network computing; it includes hundreds of its own objects, including objects for creating user interfaces that appear in Java applets (in Web browsers) or standalone Java applications. In contrast, JavaScript relies on whatever environment it’s operating in for the user interface, such as a Web document’s form elements.
7. How to detect the operating system on the client machine?
In order to detect the operating system on the client machine, the navigator.appVersion
string (property) should be used.
10. What are JavaScript types?
Number, String, Boolean, Function, Object, Null, Undefined.
11. How do you convert numbers between different bases in JavaScript?
Use the parseInt() function, that takes a string as the first parameter, and the base as a second parameter. So to convert hexadecimal 3F to decimal, use parseInt (“3F”, 16);
12. How to create arrays in JavaScript?
We can declare an array like this
var scripts = new Array();
14. What is a fixed-width table and its advantages?
Fixed width tables are rendered by the browser based on the widths of the columns in the first row, resulting in a faster display in case of large tables. Use the CSS style table-layout:fixed to specify a fixed width table.
If the table is not specified to be of fixed width, the browser has to wait till all data is downloaded and then infer the best width for each of the columns. This process can be very slow for large tables.
17. Where are cookies actually stored on the hard disk?
This depends on the user’s browser and OS.
In the case of Netscape with Windows OS,all the cookies are stored in a single file called
cookies.txt
c:Program FilesNetscapeUsersusernamecookies.txt
In the case of IE,each cookie is stored in a separate file namely username@website.txt.
c:WindowsCookiesusername@Website.txt
23. What is negative infinity?
It’s a number in JavaScript, derived by dividing negative number by zero.
25. What is the data type of variables of in JavaScript?
All variables are of object type in JavaScript.
26. Methods GET and POST in HTML forms – what’s the difference?.
GET: Parameters are passed in the querystring. Maximum amount of data that can be sent via the GET method is limited to about 2kb.
POST: Parameters are passed in the request body. There is no limit to the amount of data that can be transferred using POST. However, there are limits on the maximum amount of data that can be transferred in one name/value pair.
31. Are Java and JavaScript the Same?
No.java and javascript are two different languages.
Java is a powerful object – oriented programming language like C++,C whereas Javascript is a
client-side scripting language with some limitations.
49. How about 2+5+”8″?
Since 2 and 5 are integers, this is number arithmetic, since 8 is a string, it’s concatenation, so 78 is the result.
36. What does “1″+2+4 evaluate to?
Since 1 is a string, everything is a string, so the result is 124.
68. What is the difference between undefined value and null value?
(i)Undefined value cannot be explicitly stated that is there is no keyword called undefined whereas null value has keyword called null
(ii)typeof undefined variable or property returns undefined whereas typeof null value returns object
113. decodeURI(), encodeURI()
Many characters cannot be sent in a URL, but must be converted to their hex encoding. These functions are used to convert an entire URI (a superset of URL) to and from a format that can be sent via a URI.
var uri = “http://www.google.com/search?q=sonofusion Taleyarkhan”
document.write(“Original uri: “+uri);
document.write(“
encoded: “+encodeURI(uri));
44. What is the difference between an alert box and a confirmation box?
An alert box displays only one button which is the OK button whereas the Confirm box
displays two buttons namely OK and cancel.
Still others modify entire elements (or groups of elements) themselves—inserting, copying, removing, and so on. All of these methods are referred to as “setters,” as they change the values of properties.
A few of these methods—such as .attr(), .html(), and .val()—also act as “getters,” retrieving information from DOM elements for later use.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents:
“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
Get Content – text(), html(), and val()
Three simple, but useful, jQuery methods for DOM manipulation is:
• text() – Sets or returns the text content of selected elements
• html() – Sets or returns the content of selected elements (including HTML markup)
• val() – Sets or returns the value of form fields
$(“#btn1″).click(function(){
$(“#test1″).text(function(i,origText){
return “Old text: ” + origText + ” New text: Hello world!
(index: ” + i + “)”;
});
});
$(“button”).click(function(){
$(“#w3s”).attr({
“href” : “http://www.w3schools.com/jquery”,
“title” : “W3Schools jQuery Tutorial”
});
});
• 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
function appendText()
{
var txt1=”
Text.
“; // Create element with HTML
var txt2=$(“
“).text(“Text.”); // Create with jQuery
var txt3=document.createElement(“p”); // Create with DOM
txt3.innerHTML=”Text.”;
$(“p”).append(txt1,txt2,txt3); // Append the new elements
}
• width() sets or returns the width of an element (includes NO padding, border, or margin).
• height()
• innerWidth() returns the width of an element (includes padding).
• innerHeight()
• outerWidth() returns the width of an element (includes padding and border).
• outerHeight()
• outerWidth(true) returns the width of an element (includes padding and border & margin).
The jQuery load() method is a simple, but powerful AJAX method.
Code:
var myValue = $(‘#MyId’).val();
// get the value in var Myvalue by id
Or for set the value in selected item
Code:
$(‘#MyId’).val(“print me”);
// set the value of a form input
5- How to get the server response from an AJAX request using Jquery?
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
Code:
$.ajax({
url: ‘pcdsEmpRecords.php’,
success: function(response) {
alert(response);
},
error: function(xhr) {
alert(‘Error! Status = ‘ + xhr.status);
}
});
6- How do you update ajax response with id ” resilts”?
By using below code we can update div content where id ‘results’ with ajax response
Code:
function updateStatus() {
$.ajax({
url: ‘pcdsEmpRecords.php’,
success: function(response) {
// update div id Results
$(‘#results’).html(response);
}
});
}
7- How do You disable or enable a form element?
There are two ways to disable or enable form elements.
Set the ‘disabled’ attribute to true or false:
Code:
// Disable #pcds
$(‘#pcds’).attr(‘disabled’, true);
// Enable #pcds
$(‘#pcds’).attr(‘disabled’, false);
Add or remove the ‘disabled’ attribute:
// Disable #pcds
$(“#pcds”).attr(‘disabled’, ‘disabled’);
// Enable #x
$(“#pcds”).removeAttr(‘disabled’);
8- How do you check or uncheck a checkbox input or radio button?
There are two ways to check or uncheck a checkbox or radio button.
Set the ‘checked’ attribute to true or false.
Code:
// Check #pcds
$(‘#pcds’).attr(‘checked’, true);
// Uncheck #pcds
$(‘#pcds’).attr(‘checked’, false);
Add or remove the ‘checked’ attribute:
// Check #pcds
$(“#pcds”).attr(‘checked’, ‘checked’);
// Uncheck #pcds
$(“#pcds”).removeAttr(‘checked’);
9- How do you get the text value of a selected option?
Select elements typically have two values that you want to access. First there’s the value to be sent to the server, which is easy:
Code:
$(“#pcdsselect”).val();
// => 1
The second is the text value of the select. For example, using the following select box:
Code:
Mr
Mrs
Ms
Dr
Prof
If you wanted to get the string “Mr” if the first option was selected (instead of just “1″), you would do that in the following way:
Code:
$(“#mpcdsselect option:selected”).text();
// => “Mr”
• Is jQuery a library for client scripting or server scripting?
Ans: Client scripting
• Is jQuery a W3C standard?
Ans: No
• What are jQuery Selectors?
Ans: Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.
• The jQuery html() method works for both HTML and XML documents?
Ans: It only works for HTML.
• Which sign does jQuery use as a shortcut for jQuery?
Ans: $(dollar) sign.
• What does $(“div”) will select?
Ans: It will select all the div element in the page.
• What does $(“div.parent”) will select?
Ans: All the div element with parent class.
• What is the name of jQuery method used for an asynchronous HTTP request?
Ans: jQuery.ajax()
jQuery Tip : Always load your jQuery framework from CDN
Here is a quick tip for the day. Always load your jQuery framework from Google, Microsoft or jQuery CDN(Content Delivery Network). As it provides several advantages.
1. You always use the latest jQuery framework.
2. It reduces the load from your server.
3. It saves bandwidth. jQuery framework will load faster from these CDN.
4. The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN.
Code to load jQuery Framework from Google CDN
1
3
Code to load jQuery Framework from Microsoft CDN
1
3
Code to load jQuery Framework from jQuery Site(EdgeCast CDN)
1
3
How to load jQuery locally when CDN fails
There are couple of advantage if you load your jQuery from any CDN. Read my post about “jQuery Tip : Always load your jQuery framework from CDN”. It is a good approach to always use CDN but sometimes what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting.
Hang on, there is a solution for this as well. Below given jQuery code checks whether jQuery is loaded from Google CDN or not, if not then it references the jQuery.js file from your folder.
1
2
3 if (typeof jQuery == ‘undefined’)
4 {
5 document.write(unescape(“%3Cscript src=’Scripts/jquery.1.5.1.min.js’ type=’text/javascript’%3E%3C/script%3E”));
6 }
7
It first loads the jQuery from Google CDN and then check the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. In this example, the jQuery.js is loaded from Scripts folder.
What is jQuery.noConflict()
What is jQuery.noConflict()? Well, jQuery is popular because there are plenty of useful, simple and easy to use plugins. But while using jQuery plugins, sometimes we include other libraries like prototype, mootools, YUI etc. The problem comes when one or more other libraries are used with jQuery as they also use $() as their global function and to define variables. This situation creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().
How to use it?
01
02
03
04 jQuery.noConflict();
05 // Use jQuery via jQuery(…)
06 jQuery(document).ready(function(){
07 jQuery(“div”).hide();
08 });
09 // Use Prototype with $(…), etc.
10 $(‘someid’).hide();
11
When .noConflict() is called then jQuery returns $() to its previous owner and you will need to use jQuery() instead of shorthand $() function. In this case, “jQuery” will be used in rest of the code. You won’t be able to take advantage of shorthand.
There is another option if you want to take advantage of shorthand.
01
02
03
04 var $j = jQuery.noConflict();
05 // Use jQuery via jQuery(…)
06 $j(document).ready(function(){
07 $j(“div”).hide();
08 });
09 // Use Prototype with $(…), etc.
10 $(‘someid’).hide();
11
But you still love $() and don’t want to lose it. So what to do? But there is a solution for this also.
01
02
03
04 jQuery.noConflict();
05 // Put all your code in your document ready area
06 jQuery(document).ready(function($){
07 // Do jQuery stuff using $
08 $(“div”).hide();
09 });
10 // Use Prototype with $(…), etc.
11 $(‘someid’).hide();
12
What you need to do is in jQuery(document).ready() put function($) and now you use $ for your jQuery code.
Difference between $(this) and ‘this’ in jQuery
Before writing this post, I was also confused about ‘$(this)’ and ‘this’ in jQuery. I did some R&D and found out the difference between both of them. Let’s first see how do we use them.
1 $(document).ready(function(){
2 $(‘#spnValue’).mouseover(function(){
3 alert($(this).text());
4 });
5 });
1 $(document).ready(function(){
2 $(‘#spnValue’).mouseover(function(){
3 alert(this.innerText);
4 });
5 });
Got any idea about the difference?
this and $(this) refers to the same element. The only difference is the way they are used. ‘this’ is used in traditional sense, when ‘this’ is wrapped in $() then it becomes a jQuery object and you are able to use the power of jQuery.
In the second example, I have to use innerText() to show the text of the span element as this keyword is not a jQuery object yet. So I have to use the native JavaScript to get the value of span element. But once it is wrapped in $() then jQuery method text() is used to get the text of Span.
So the summary is $(this) is a jQuery object and you can use the power and beauty of jQuery, but with ‘this’ keyword, one need to use native JavaScript.
jQuery empty() vs remove()
jQuery provides 2 methods empty() and remove() to remove the elements from DOM. I have seen the programmers getting confused between both the methods.
empty() method removes all the child element of the matched element where remove() method removes set of matched elements from DOM. Confused? Let me explain you with an example.
There are 2 div elements “dvParent” and “dvChild”.
Parent Div
jQuery By Example: Demo of empty() vs remove() method.
Now when we call empty() method on “dvChild”, then it will remove all the child element of div.
$(‘#dvChild’).empty();
Result will be:
Parent Div
Now when remove() method is called on “dvChild” element then it will not only remove the child element but it will also remove the “dvChild” element from DOM.
$(‘#dvChild’).remove();
Result will be:
Parent Div
So the difference between both the method is that empty() remove only the child element of the element on which the method is called where remove() method removes not only the child but also the element on which it is called.
So to summarize, there are 3 differences between .remove() and .detach()
• remove() method would erase data associated with the element(data that had been set using the data() method).
• remove() method would also erase the event associated with the element.
• If you are not concerned about the data and event then use remove() as it is faster than detach(). There is a performance test created at jsPerf.com for remove() and detach() and below is the result.
Is window.onload is different from document.ready()
window.onload() is traditional Java script code which is used by developers from many years. This event is gets called when the page is loaded. But how this is different from jQuery document.ready() event?
Well, the main difference is that document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.
$(function(){
// jQuery methods go here…
});
jQuery Tip – How to check if element is empty
In this post, I will show you a simple tip to check or verify that the element that you are accessing in jQuery is empty or not. jQuery provides a method to get and set html of any control.Check these articles for more details.
• Get HTML of any control using jQuery
• Set HTML of any control using jQuery
We will use the same html() attribute to determine whether the element is empty or not.
1 $(document).ready(function() {
2 if ($(‘#dvText’).html()) {
3 alert(‘Proceed as element is not empty.’);
4 }
5 else
6 {
7 alert(‘Element is empty’);
8 }
9 });
Declare a div element “dvText” with no content like this.
1
But there is a problem here. If you declare your div like below given code, above jQuery code will not work because your div is no more empty. By default some spaces gets added.
1
2
So what’s the solution? Well, I had posted about “How to remove space from begin and end of string using jQuery”, so we will use the trim function to trim the spaces from the begin and end of the html() attribute.
1 $(document).ready(function() {
2 if ($(‘#dvText’).html().trim()) {
3 alert(‘Proceed as element is not empty.’);
4 }
5 else
6 {
7 alert(‘Element is empty’);
8 }
9 });
width() vs css(‘width’) and height() vs css(‘height’)
jQuery provides two ways to set width and height of any element. You can set using css or you can use jQuery provided methods. If you want to set width to 100px then
1 $(‘#dvText1′).css(‘width’,’100px’);
1 $(‘#dvText2′).width(100);
Then what is the difference?
The difference lies in datatype. As its clear in code that with css method you need to append ‘px’ to the width value and with width you don’t need to specify.
When you want to read width of any element then css method will return you string value like ’100px’ while width will return an integer value.
1 alert($(‘#dvText1′).css(‘width’));
This return ’100px’.
1 alert($(‘#dvText2′).width());
This returns 100.
So if you want to do any kind of manipulation then width function is the best option.
How to Check element exists or not in jQuery
Have you ever thought that what will happen if you try to access an element using jQuery which does not exist in your DOM? For example, I am accessing “dvText” element in below code and that element does not exists in my DOM.
1 var obj = $(“#dvText”);
2 alert(obj.text());
What will happen?
There could be 2 possibilities. Either an error will be thrown and rest of the code will not get executed OR Nothing will happen.
If you think that error will be thrown then you are wrong. In jQuery, you don’t need to be worried about checking the existence of any element. If element does not exists, jQuery will do nothing.
Then what is this post all about? As post title says “How to Check element exists or not in jQuery”, where you are not worried about element existence as jQuery handles it quite well. Well, Let say there is some long code related to the element you want to execute and you are not sure that element exists or not. jQuery doesn’t throw error but that doesn’t mean that you don’t check the existence. So it’s always better to check the existence. So how do we check it? See below code
1 if ($(‘#dvText’).length) {
2 // your code
3 }
jQuery provides length property for every element which returns 0 if element doesn’t exists else length of the element.
/* The .bind() method attaches the event handler directly to the DOM
element in question ( “#members li a” ). The .click() method is
just a shorthand way to write the .bind() method. */
$( “#members li a” ).bind( “click”, function( e ) {} );
$( “#members li a” ).click( function( e ) {} );
/* The .live() method attaches the event handler to the root level
document along with the associated selector and event information
( “#members li a” & “click” ) */
$( “#members li a” ).live( “click”, function( e ) {} );
/* The .delegate() method behaves in a similar fashion to the .live()
method, but instead of attaching the event handler to the document,
you can choose where it is anchored ( “#members” ). The selector
and event information ( “li a” & “click” ) will be attached to the
“#members” element. */
$( “#members” ).delegate( “li a”, “click”, function( e ) {} );
Bind attaches an event handler only to the elements that match a particular selector. This, expectedly, excludes any dynamically generated elements.
1. $(“#items li”).click(function() {
2. $(this).parent().append(“
New Element
“);
3. });
Live allows for the binding of event handlers to all elements that match a selector, including those created in the future. It does this by attaching the handler to the document. Unfortunately, it does not work well with chaining.
4. // children().next()…etc.
5. $(“li”).live(“click”, function() {
6. $(this).parent().append(“
New Element
“);
7. });
Delegate is a complete replacement for Live(). However, that obviously would have broken a lot of code! Nonetheless, delegate remedies many of the short-comings found in live(). It attaches the event handler directly to the context, rather than the document. It also doesn’t suffer from the chaining issues that live does. There are many performance benefits
8. // to using this method over live().
9. $(‘#items’).delegate(‘li’, ‘click’, function() {
10. $(this).parent().append(‘
New Element
‘);
11. });
12. // By passing a DOM element as the context of our selector, we can make
13. // Live() behave (almost) the same way that delegate()
14. // does. It attaches the handler to the context, not
15. // the document – which is the default context.
16. // The code below is equivalent to the delegate() version
17. // shown above.
18. $(“li”, $(“#items”)[0]).live(“click”, function() {
19. $(this).parent().append(“
New Element
“);
20. });
More Examples of jQuery Selectors
Syntax Description Example
$(“*”) Selects all elements Try it
$(this) Selects the current HTML element Try it
$(“p.intro”) Selects all
elements with class=”intro” Try it
$(“p:first”) Selects the first
element Try it
$(“ul li:first”) Selects the first
element of the first
Try it
$(“ul li:first-child”) Selects the first
element of every
Try it
$(“[href]“) Selects all elements with an href attribute Try it
$(“a[target='_blank']“) Selects all elements with a target attribute value equal to “_blank” Try it
$(“a[target!='_blank']“) Selects all elements with a target attribute value NOT equal to “_blank” Try it
$(“:button”) Selects all elements and elements of type=”button” Try it
$(“tr:even”) Selects all even
elements Try it
$(“tr:odd”) Selects all odd
elements $(“p”).click(function(){ // action goes here!! });
$(document).ready(function(){
$(“#hide”).click(function(){
$(“p”).hide();
});
});
• fadeIn()fade in a hidden element.
• fadeOut()fade out a visible element.
• fadeToggle()faded out, fadeToggle() will fade them in.& faded in, fadeToggle() will fade them out
• fadeTo()fading to a given opacity
$(“button”).click(function(){
$(“#div1″).fadeTo(“slow”,0.15);
$(“#div2″).fadeTo(“slow”,0.4);
$(“#div3″).fadeTo(“slow”,0.7);
});
$(“button”).click(function(){
$(“#div1″).fadeIn();
$(“#div2″).fadeIn(“slow”);
$(“#div3″).fadeIn(3000);
});
• slideDown()
• slideUp()
• slideToggle()
The jQuery animate() method is used to create custom animations.
$(selector).animate({params},speed,callback);
$(“button”).click(function(){
$(“div”).animate({
left:’250px’,
opacity:’0.5′,
height:’150px’,
width:’150px’
});
});
$(“button”).click(function(){
$(“p”).hide(“slow”,function(){
alert(“The paragraph is now hidden”);
});
});
jQuery Method Chaining
$(“#p1″).css(“color”,”red”).slideUp(2000).slideDown(2000);
Empty, Remove, Detach
So the difference between both the method is that empty() remove only the child element of the element on which the method is called where remove() method removes not only the child but also the element on which it is called.
So to summarize, there are 3 differences between .remove() and .detach()
• remove() method would erase data associated with the element(data that had been set using the data() method).
• remove() method would also erase the event associated with the element.
• If you are not concerned about the data and event then use remove() as it is faster than detach(). There is a performance test created at jsPerf.com for remove() and detach() and below is the result.
Difference between body onload() function document.ready() function used in jQuery?
1. We can have more than one document.ready() function in a page where we can have only one body onload function.
2. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM, images and all associated resources of the page.
The .bind() method attaches the event handler directly to the DOM element The .click() method is just a shorthand way to write the .bind() method.
$( “#members li a” ).bind( “click”, function( e ) {} );
$( “#members li a” ).click( function( e ) {} );
The .live() method attaches the event handler to the root level document along with the associated selector and event information
$( “#members li a” ).live( “click”, function( e ) {} );
The .delegate() method behaves in a similar fashion to the .live()
method, but instead of attaching the event handler to the document,
$( “#members” ).delegate( “li a”, “click”, function( e ) {} );
1- What is jQuery ?
It’s very simple but most valuable Question on jQuery means jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Jquery is build library for javascript no need to write your own functions or script jquery all ready done for you
2- How you will use Jquery means requirement needed for using jquery?
Nothing more need to do just olny download jquery library(.js file) from any of the jquery site Download jquery and just linked with your html pages like all other javascript file
like below :
Code:
3- what the use of $ symbol in Jquery?
$ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery
4- How do you select an item using css class or ID and get the value by use of jquery?
If an element of html like
,or any tag have ID MyId and class used MyClass then we select the element by below jquery code
Code:
$(‘#MyId’) for ID and for classs $(‘.MyClass’)
and for value
Code:
var myValue = $(‘#MyId’).val();
// get the value in var Myvalue by id
Or for set the value in selected item
Code:
$(‘#MyId’).val(“print me”);
// set the value of a form input
5- How to get the server response from an AJAX request using Jquery?
When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.
Below an example of making an AJAX call and alerting the response (or error):
Code:
$.ajax({
url: ‘pcdsEmpRecords.php’,
success: function(response) {
alert(response);
},
error: function(xhr) {
alert(‘Error! Status = ‘ + xhr.status);
}
});
7- How do You disable or enable a form element?
There are two ways to disable or enable form elements.
Set the ‘disabled’ attribute to true or false:
Code:
// Disable #pcds
$(‘#pcds’).attr(‘disabled’, true);
// Enable #pcds
$(‘#pcds’).attr(‘disabled’, false);
Add or remove the ‘disabled’ attribute:
// Disable #pcds
$(“#pcds”).attr(‘disabled’, ‘disabled’);
// Enable #x
$(“#pcds”).removeAttr(‘disabled’);
9- How do you get the text value of a selected option?
Select elements typically have two values that you want to access. First there’s the value to be sent to the server, which is easy:
Code:
$(“#pcdsselect”).val();
// => 1
The second is the text value of the select. For example, using the following select box:
Code:
Mr
If you wanted to get the string “Mr” if the first option was selected (instead of just “1″), you would do that in the following way:
Code:
$(“#mpcdsselect option:selected”).text();
// => “Mr”
Q2. Why jQuery?
Ans: Due to following functionality.
1. Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
2. AJAX functions
3. CSS functions
4. DOM manipulation
5. DOM transversal
6. Attribute manipulation
7. Event detection and handling
8. JavaScript animation
9. Hundreds of plug-ins for pre-built user interfaces, advanced animations, form validation etc.
10. Expandable functionality using custom plug-ins
Q3. Is jQuery replacement of Java Script?
Ans: No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
Q8. What are the different type of selectors in Jquery?
Ans: There are 3 types of selectors in Jquery
1. CSS Selector
2. XPath Selector
3. Custom Selector
Q9. Name some of the methods of JQuery used to provide effects?
Ans: Some of the common methods are :
1. Show()
2. Hide()
3. Toggle()
4. FadeIn()
5. FadeOut()
Q10. What is JQuery UI?
Ans: jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.
What are features of JQuery or what can be done using JQuery?
Features of Jquery
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plugins.
4. Ajax support
5. DOM selection events
6. Event Handling
Why jQuery?
jQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.
It helps to
# Improve the performance of the application
# Develop most browser compatible web page
# Implement UI related critical functionality without writing hundreds of lines of codes
# Fast
# Extensible – jQuery can be extended to implement customized behavior
–>
No comments:
Post a Comment