jQuery is an open source, light weight, most popular JavaScript library that was developed for the sake of simplifying the interactions between an HTML or CSS document and JavaScript.
In technical terms, it was for simplifying interactions between Document Object Model (DOM) and JavaScript.
jQuery also helped in easing the usage of commonly performed JavaScript functionalities that had multiple lines of code into single line of code and also aided in performing AJAX calls in easier manner.
jQuery has the following features:
hide()
and show()
for the selected elements where:
show()
is run when the element is hidden.hide()
is run when the element is visible.$(selector).toggle(speed, easing, callback)
display: none
in the element’s CSS properties.$(selector).slideDown( speed, easing, callback )
$(selector).fadeOut( speed, easing, callback )
fadeIn()
and fadeOut()
methods.
$(selector).fadeToggle(speed, easing, callback)
(selector).animate({styles},speed,easing,callback)
where “styles” is a required field that specifies one or more CSS properties/values to animate. The properties needs to be mentioned in camel casing style.css()
method in jQuery? css()
method is used to change style property of the selected element.jQuery.length
property is used to count number of the elements of the jQuery object.click()
method that aids to trigger the click event.$(“p”).click()
will trigger the click event whenever the elements with paragraph tag is clicked on a browser page.$(selector).click(function(){ //code that runs when the click event is triggered });
width = "600"
to each tag. We can write the code as below:$("img").each(function(im){ $(this).attr("width","600") });
$
definer.var list = ["InterviewBit", "jQuery", "Questions"]; $.each(list, function(index, value){ console.log(index + " "+ value); })
0 InterviewBit
1 jQuery
2 Questions
var obj = {"name":"InterviewBit","type": "jQuery"}; $.each(obj, function(key,value){ console.log(key + " - " + value); })
name - InterviewBit
type - jQuery
In order to work with any element on the web page, we would first need to find it. Selectors find the HTML elements in jQuery. Some of the most commonly used and basic selectors are:
$(selector).addClass(className);
$(selector).addClass(class1, class2);
$(selector).removeClass(class1);
$(selector).removeClass(class1, class2, class 3);
$(selector).removeClass()
toggles
the application of classes.$(selector).toggleClass(className);
ajax()
method to perform an AJAX (asynchronous HTTP) request.$.ajax({name:value, name:value, ... })
. The parameters specify one or more value of name-value pairs.XMLHttpRequest
object$.ajax({ url: "resourceURL", async: false, success: function(result){ $("div").html(result); }, error: function(xhr){ alert("An error occured: " + xhr.status + " " + xhr.statusText); } });
$( "div#firstDiv, div.firstDiv, ol#items > [name$='firstDiv']" )
<div>
element with the id value firstDiv
along with all <div>
elements that has the class value firstDiv
and all elements that are children of the <ol id="items">
element and whose name attribute ends with the string firstDiv
.<div id="expand"></div> <style> div#expand{ width: 50px; height: 50px; background-color: gray; } </style>
$("#expand").animate( { width: "300px", height: "300px", }, 5000 );
$( "div" ).css( "width", "500px" ) .add( "p" ) .css( "background-color", "yellow" );
<div>
elements and applies width of 500px to them and adds all the <p>
elements to the elements selection after which the code can finally change the background color to yellow for all the <div>
and <p>
elementsjQuery.get()
and jQuery.ajax()
? jQuery.ajax()
allows the creation of highly-customized AJAX requests, with options for how long to wait for a response, what to do once the request is successful, how to handle a failure scenarios, whether the request to be sent is blocking (synchronous) or non-blocking (asynchronous), what format to expect as the response, and many more customizable options.jQuery.get()
is uses jQuery.ajax()
underneath to create an AJAX request typically meant for simple retrieval of information.jQuery.post()
for performing post requestsjQuery.getScript()
meant for loading and then executing a JavaScript file from the server using GET request.jQuery.getJSON()
for loading JSON-encoded data from the server using a GET HTTP request.document.getElementById("interviewBit");
OR $("#interviewBit");
$("[id$='IB']")
.promise()
method in jQuery. .promise()
method returns a dynamically generated promise that is resolved when all actions of a certain type bound to the collection, queued or not, have ended..promise()
will attach to promise to that specified object and then return it rather than creating a new one.<div>
elements on the page. What is the difference between the start and end times displayed? function getMinsSeconds() { var dt = new Date(); return dt.getMinutes()+":"+dt.getSeconds(); } $( "input" ).on( "click", function() { $( "p" ).append( "Start: " + getMinsSeconds() + "<br />" ); $( "div" ).each(function( i ) { $( this ).fadeOut( 1000 * ( i * 2 ) ); }); $( "div" ).promise().done(function() { $( "p" ).append( "End: " + getMinsSeconds() + "<br />" ); }); });
.promise()
will wait for all <div>
animations (here, all fadeOut()
calls) to complete, the last one will complete 10 seconds (i.e. 5 * 2 = 10 seconds) after the fadeOut()
starts.prop()
and attr()
s? prop()
and attr()
can be used to get or set the value of the specified property of an element attribute.attr()
gives the default value of a property whereas prop()
returns its current value.Explanation: jQuery function is so frequently used that the library also defines the global symbol \$ as a shortcut for it. The \$ sign it’s just an alias to jQuery(), then an alias to a function which is used as a selector element.
Explanation: \$ is often used by other libraries or JavaScript constructs, so it could be overwritten and may not do what you expect. jQuery always refers to the jQuery library, so it will do what you expect. When there are no other libraries, jQuery and \$ mean the same thing.
In environments where you cannot guarantee that \$ will not be overwritten by something else, using jQuery or jQuery.noConflict( ) is safer than \$.
$()
? $("span.first")
. $("div p")
? $(":disabled")
? animate()
method be used to animate ANY CSS property? $.foobar()
is equivalent to which of the following below?? $(document).ready(function() {
// Some code.
});
Query.noConflict(true)
is used to for? $('#mainList').find('li')
.width(1000).addClass('selectedElement');
:odd
and :even
filters?