Home
Jquery
Interview FAQs

FAQs of level

Intermediate

You can use $.html method of jQuery to get the content of specified elements. The method will return only first matched elements content if there are multiple occurrences.

For example, if you have two or three paragraphs with text information, calling html method will return only first paragraphs content.
Syntax to get content:
$(“element”).html()
Note that, this will return HTML code, not the formatted text. 

The syntax of append() method is-
selector.append(“content to be added”);
Where selector can be an element where you want to add content. 

jQuery library comes in 2 different versions Production and Deployment. The deployment version is also known as minified version. So .min.js is basically the

minified version of jQuery library file. Both the files are same as far as functionality is concerned. But .min.js is quite small in size so it loads quickly and saves bandwidth.

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance.

There are 3 popular jQuery CDNs.

  1. Google.
  2. Microsoft
  3. jQuery.

Advantage of using CDN.

  • It reduces the load from your server.
  • It saves bandwidth. jQuery framework will load faster from these CDN.
  • 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

Below is the code to load jQuery from all 3 CDNs.

Code to load jQuery Framework from Google CDN

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>

Code to load jQuery Framework from Microsoft CDN
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>
Code to load jQuery Framework from jQuery Site (EdgeCast CDN)
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

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. 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.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

if (typeof jQuery == "undefined")

{

document.write(unescape("%3Cscript src="Scripts/jquery.1.9.1.min.js"type="text/javascript"%3E%3C/script%3E"));
}
</script>

It first loads the jQuery from Google CDN and then checks the jQuery object. If jQuery is not loaded successfully then it will references the jQuery.js file from hard drive location. 

 As other client side libraries like MooTools, Prototype can be used with jQuery and 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().

jQuery.noConflict(); 
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

You can also use your own specific character in the place of $ sign in jQuery.
var $j = jQuery.noConflict();   
// Use jQuery via jQuery(...)
$j(document).ready(function(){
$j("div").hide();
});

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.

$(document).ready(function(){
$("#spnValue").mouseover(function(){
alert($(this).text());
});
});

In below example, this is an object but since it is not wrapped in $(), we can not use jQuery method and use the native JavaScript to get the value of span element.
$(document).ready(function(){
$("#spnValue").mouseover(function(){
alert(this.innerText);

});
});

There are 2 ways to check if element is empty or not. We can check using ":empty" selector.

$(document).ready(function(){

if ($("#element").is(":empty")){

//Element is empty
});
});

Displaying 1 of 2Next
1 2
Need Help? Contact Us.

Log in

*
*

Forgot password?

*

New User

*
*
*
*