Category Archives: Jquery

jQuery CDN

What is CDN?

A content delivery network or content distribution network (CDN) is a distributed system where users can store data and can access cached content. Usually, we store images, Style sheets, Javascript files, etc.

The use of CDN is very efficient when we have to access some static files. It directly connects to our physical server and provides the resources required, because it connects to the proxy server available in the locality and the nearest.

Que: Why we should Use jQuery CDN?

The CDN sends the data from the cache if available. In most of the cases the user has already history and they already have cached the query. When a new website is opened and using the CDN jQuery, CDN refers to the cached file and hence the zero latency is observed.

  1. Removes server Server Delay
  2. Secure and freely available

Must Read: Javascript Interview Questions

Que: How to use jQuery CDN?

As we all know we use CDN a proxy network to store the static files like images, CSS and javascript files. There are two methods that we can choose from to add jQuery in our application. Any of these methods can facilitate jQuery functionality in our application.

1.Hosted jQuery Files:

We can download a jquery file and upload it to our server and we can fetch it in our application. But downloading from their can increase the loading time of our application and It may take more time to produce the first visible snap of page.

2.jQUery CDN

CDN Hosted jQUery is then the solution of the problem in method one. jQuery CDN is the better way to include jQuery functionality in our application. jQuery CDN removes the server latency and TAT i.e. turn around time. Since CDN is a highly equipped Infrastructure, definitely the speed will be considerable.

We can found the Official jQuery CDN here :

The latest stable version: https://code.jquery.com/

There are two ways of including jQuery CDN:

1. jQuery CDN from Google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. jQuery CDN from Google

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

I hope you will get to know what is CDN and how it works jQuery. Now you can understand the difference between the hosted jQuery and CDN jQuery.

Spread the love

What is jQuery

Answers of the question “What is jQuery” is jQuery is a javascript library.

jQuery is written in javascript. It is a library to ease the use of javascript.

A rich library is developed to increase the usability of javascript in common and complex applications.

Javascript provides much functionality to manipulate the HTML DOM tree in the run.

Javascript is a lightweight script and so the jQuery. jQuery is based on javascript functionality.

jQuery simplifies the complex operations done in Javascript like AJAX, animation, DOM traversing and manipulation.

In the go, we can change, load and create HTML DOM and can do actions on them.

So jQuery is a powerful library. jQuery functionality provides a smoother User Experience.  It facilitates a handy tool to the programmers and designers.

The jQuery library has the following important features:

  • jQuery is an OPEN SOURCE
  • It can manipulate HTML/DOM similarly like javascript
  • We can add CSS and styles to HTML using jQuery functionality
  • jQuery handles the HTML event methods like click, hover, change, blur, etc
  • It is easy to manage Effects and animations when we are going with jQuery
  • It simplifies the AJAX request
  • jQuery has vast Utilities like jQuery Mobile, jQuery UI
  • A huge community is available over multiple networks
  • Compatible to almost the browsers

Few useful jQuery Functionality :

show(): display a hidden dom, set a style property display as Block.
hide(): Hide the selector from dom tree, visible on the browser.
animate(): Apply animation effects with selectors.
empty(): Empty the dom and also removes the child elements.
remove(): remove selector dom from tree
removeClass():remove class or classes from selectors
addClass():add class or classes to the selectors
toggleClass():add and remove simultaneously
stop(): stop the propagation of events
fadeIn():hide dom with a fading down effect.
fadeOut():display dom with a fading out effect.

Must Read: jQuery Functionality

Spread the love

Jquery noConflict() Explained

What is noConflict() method in jQuery?
This is very important to differentiate scripts when we are using many JavaScript framework in our project.As we know jQuery uses dollar symbol ($) as shortcut. There are many other popular frameworks are there as Angular JS,Knockout JS,Kendo JS,Backbone JS,Ember ,Vue etc.
Suppose i one of these frameworks is using the $ symbol as shortcut then one of the scripts either jQuery or the framework implemented parallel may stop working. noConflict is a method to avoid such situation in script.

We can create our self defined symbol or string as shortcut for jQuery. noConflict() return a reference and we can store this reference in a variable.

Example of noConflict() and self defined shortcut:

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("Hi there,Conflict resolved");
    });
});
Spread the love

jQuery Functionality – Common jQuery Functions

jQuery is a rich library and a very lightweight framework to provide javascript enhanced and modified functionality to our web page. jQuery is a javascript library and written in core javascript concepts. jQuery functionality is basically an easier version of javascript and a simple way to manipulate the DOM in the same way as Java Script does.
This is so popular because it has the number of functions events, chaining properties and they make it convenient as well as easy to use.  The jQuery Functionality provides rapid and smooth actions to perform actions on HTML DOM events.
There are few events and functions which are used frequently in addition to jQuery functionality. We are going to list them here with a one-line explanation. These explanations are very useful when you are explaining jQuery Functionality.
jQuery is a very rich library and has a number of functions. These functions provide a next-gen experience to jQuery functionality.
Find the jQuery functionality of a few popular library methods.
Must Read: What is jQuery?

Find some beautiful functions and their explanations in one line:

show(): display a hidden dom, set a style property display as Block.
hide(): Hide the selector from dom tree, visible on the browser.
animate(): Apply animation effects with selectors.
empty(): Empty the dom and also removes the child elements.
remove(): remove selector dom from tree
removeClass():remove class or classes from selectors
addClass():add class or classes to the selectors
toggleClass():add and remove simultaneously
stop():stop the propagation of event.
fadeIn():hide dom with a fading down effect.
fadeOut():display dom with a fading out effect.
val():get the value of form elements.
text():get the text in dom.
html():get the HTML in dom.
child(): find the child elements in dom.
parent(): find the immediate parent elements of the dom.
parents(): find the parents of the parent of the selector in the dome tree.
siblings(): find the parallel elements in the dom tree.
slideDown(): display the dom with sliding to downwards effect.
slideUp():hide the dome with sliding to up effect.
attr(): get the attribute of DOM.
append(): add the given object to the selector one after one, in a stack style. The object is added as the last child always.
prepend(): add the given object to the selector, but the object is added as the first child always.
after(): add an object just after the selector.
before(): add and object just before the selector.
css(): add some inline css-properties to the selector.
first(): get the first element in the child.
last(): get the last element in the child.
eq(): find the object of equal index passed to it.
noConflict(): avoid conflicts with other javascript frameworks using $ as shortcut symbol.

Conclusion

I Hope these functions will help you in the jquery excercise and application development. They will be helpful to answer your jQuery interview questions. We have added a few of the important functions and these are not the all jQuery functionality. You have to prefer the reference of jQuery to know more about the functions and events. Please share your feedback to improve our articles.
Thanks.
Spread the love

jQuery Events Frequently asked in various Interviews

Jquery events are attached with some function and function called when event triggers. On a web page actions taken by visitors are events. They can be responded accordingly as click,change,blur,focus,keypress etc. Some common events as categorised as :
Mouse Events : click,dblclick,hover
Keyboard Events : keypress,keydown,keyup
Form Events : change,select,focus,blur
Window : load,scroll,resize

Most Common events and their explanation in one line:

click(): event is triggered when an element is clicked.
change(): event is triggered when the value of a form field is changed.
focus(): event is triggered when a form field is focused.
blur(): event is triggered when a form field is blured.
hover(): event is triggered when moue pointer hover the element.
focusin(): event is triggered when the chield of and element is focused.
focusout(): event is triggered when the chiled of an element is blured.
keydown(): event is triggered when a key from keyboard is pressed down.
keypress(): event is triggered when a key is pressed .keypress event is not fired for ALT, CTRL, SHIFT, ESC.
keyup(): event is triggered when a pressed key is released.
load(): event is triggered when a dom is loaded.
unload(): event is triggered when a dom is unloaded.
mouseenter(): event is triggered when mouse pointer enters the area.
mousedown(): event is triggered when left mouse button is clicked.
mouseout(): event is triggered when mouse pointer leaves the area.
on(): on event is used to add additional handler to dom element.
submit(): event is triggered when form is submitted.
scroll(): event is triggered when the window is scrolled.
select(): event is triggered when the a form element is selected, in combobox or dropdown list.
ready(): event is triggered when the dom is ready and loaded in tree.
resize(): event is triggered when window dimensions are resized.

Spread the love

Top 10 AJAX Interview Questions and Answers

What is AJAX?
Full form of AJAX is Asynchronous JavaScript And XML.
AJAX facilitate web pages to be updated asynchronously by exchanging data with a web server in the background. It can update the webpage without reloading the whole page.

What are the main components that are used by AJAX?
AJAX components are :
1-A browser built-in XMLHttpRequest object
2-JavaScript and HTML DOM

What is XMLHttpRequest Object?
The XMLHttpRequest object can be used to request data from a web server without refreshing the whole page. It can send data to the server in the background and can ask and receive data in the background.

What is the request type used by XMLHttpRequest Object?
open(): It specifies the kind of request GET or POST
send(): Sends the GET request to the server
send(string): Sends the POST request to the server

Give an Example of a jQuery AJAX call.
A POST method AJAX example in jQuery:

var empId = $("ul .emp").first().attr("id");
var request = $.ajax({
url: "myajaxcall.php",
type: "POST",
data: {id : empId},
dataType: "json"
});

request.done(function(response) {
console.log(response);
});

request.fail(function(jqXHR, ajax_status) {
alert( "Request failed: " + ajax_status );
});

What is the difference between xhr.status and xhr.readyState?
xhr .status: used to determine whether the request was successful or not.
xhr.readyState: the state of the request.’
xhr.readyState zero(0) means “has not yet been sent”
xhr.readyState zero(4) means “complete and response received”
The server provides the status, while the user agent provides the readyState.

Spread the love

Interview Questions on jQuery

What is jQuery?
jQuery is a Javascript library that uses the usage of Javascript very easily. We can handle events, manage CSS properties, DOM element, animation and many more utilities using jQuery library. It is an opensource. It is used by Microsoft, Google, IBM and almost the big players in software industries.

What are selectors?
jQuery selectors are the tool to identify the HTML elements and to manipulate properties. for example:

$(".name") : Class selector
$('#logo') : ID selector
$("button") : tag selector
$(this) : current dom selector

What are the selectors that we use in jQuery?
We use the following selectors in jQuery:
-Tag
-Class
-Id
-all (*)
We can derive more selectors using these main selectors.

What is an event?
An event is a user action. When a user interacts using UI it has to make many clicks, drag, drop, mouse over, change drop-down, keypress actions, these actions are recognized by jQuery.

What are the common events that user make?
Most common events make by users are :
-click
-mouseover
-keypress
-keydown
-change
-input
-drag
-drop
-blur
-dblclick (double click)
-mouseenter

Must Read :

What is toggle()?
toggle() is a function which provides switching functionality between two actions, functions, properties etc. Suppose we can show and hide an element using toggle function.

What is callback?
A callback is a function that is called after when execution finished. We have to specify which function we have to call after a particular execution.

What is alert()?
alert() is used as a callback to show some warning, notification or error.

$("button").click(function(){
        alert("Clicked on button");
});

What is chaining in jQuery?
Chaining is calling of multiple functions in a single statement. for example :

$(".button").css("color", "#ececec").slideUp(1000).slideDown(2000).hide();

How to get value or text of an HTML element?
Since we know jQuery can manipulate HTML DOM, we can use functions to get value, text or html block inside an HTML element. For example

$('.first_name').val();  
//geting value in input box having class as first_name
$('p').html();   //getting html inside a 'p' tag
$('textarea').text();  //getting text inside a textarea

How can we set values for HTML element?
very similar to getting the value, we can set values to elements. For example:

$('.first_name').val('Interview Sortout Blogs');  
//geting value in input box having class as first_name
$('p').html('My blog is based on interview');  
 //getting html inside a 'p' tag
$('textarea').text('This blog is awesome. You are doing a verygood job,Interview Sortout');  //getting text inside a textarea

How to add or remove class from a HTML element?
jQuery have functions to add or to remove classes from an HTML elements. Please see the following examples:

$('button').addClass('btn-danger');
$('button').removeClass('btn-danger');

How to check that an element has a class?
We can use function hasClass().If class found it returns true, other wise returns false.

if($('button').hasClass('btn-danger')){
 alert('Button class is btn-danger');
}

What append() and prepend() functions do?
append() function , adds an HTML block after(at the end) a selector. For example :

$('p').append('Interview Sortout');

prepend() method, adds a block before or at the beginning of the selector. Example:

$('p').prepend('Interview Sortout');

What does parent() method do?
parent() method select the direct parent or immediate ancestor that is next to selector.

What does parents() method do?
parents() select all ancestors , the elements including parent of parent.

What childre() do?
children() method select the immediate child of the selector.

What does find() method do?
find() method search for the selector passed and selects from all the children of selector.

What does siblings() method do?
sibling() method returns all the elements having parralle relationship with selector. We can call them siblings.

How to call AJAX in jQuery?
An AJAX call example in jQuery:

var $post = $.ajax({
  url: "example.php",
  type: "POST",
  data: {id : product_id, product_name:product_name},
  dataType: "json"
});

$post.done(function(msg) {
  $("#log").html( msg );
});

$post.fail(function() {
  alert( "Request failed: Request Has been failed" );
});

 

Spread the love

JSON Interview Questions and Answers

What is JSON?
JSON: JavaScript Object Notation is a tool to exchange data. It is defined as a javascript object. Using JSON we can store javascript Objects as text. When it will be required we can convert text into objects.

Is it possible to have an array of JSON or JSON having the array as values?
Yes, it is possible to do so. We can define a key in JSON having an array as value and we also can define an array having a JSON as value.

What is the use of JSON?
JSON is used to exchange data from the server. Since it is a text string, it is faster than any other format like XML.

What is JSON.parse() ?
JSON.parse() , parse the JSON string and return an full fetured object.

What is JSON.stringify()?
JSON.stringify(), convert the JSON Objects into string.

How can we handle the JSON in PHP?
PHP provides functions to handle the JSON. We can parse JSON using PHP and can convert it into an array. Function we use to convert a JSON to Object is json_decode(); json_decode() convert Javascript Object into PHP object. If we pass second argument in it as “true” it will return an associative array.


What is JSONP?
JSONP is called JSON with Padding. This is used to exchange data on cross sites protocols.

Spread the love