Q77. What is the advantage of using protocol less URL while referencing jQuery from CDNs?
Ans: It is quite useful when you are moving from HTTP to HTTPS url. You need to make sure that correct protocol is used for referencing jQuery library as pages served via SSL should contain no references to content served through unencrypted connections.
"protocol-less" URL is the best way to reference third party content that’s available via both HTTP and HTTPS. When a URL’s protocol is omitted, the browser uses the underlying document’s protocol instead.
Q78. What is jQuery plugin and what is the advantage of using plugin?
Q79. What is jQuery UI?
Q80. What is the difference between jQuery and jQuery UI?
Ans: jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.
1. What is $() in jQuery library
The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love it's brevity. $() function is used to wrap any object into jQuery object, which then allows you to call various method defined jQuery object. You can even pass a selector string to $() function, and it will return jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it's quite basic, it is used to differentiate between developer who knows jQuery or not.
2. You have five
element in your page? How do you select them using jQuery?
Another fundamental jQuery question based on selector. jQuery supports different kinds of selector e.g. ID selector, class selector and tag selector. Since in this question nothing has been mentioned about ID and class, you can use tag selector to select all div elements. jQuery code : $("div"), will return a jQuery object contain all five div tags. For more detailed answer, see the article.
3. Difference between ID selector and class selector in jQuery?
If you have used CSS, then you might know the difference between ID and class selector, It's same with jQuery. ID selector uses ID e.g. #element1 to select element, while class selector uses CSS class to select elements. When you just need to select only one element, use ID selector, while if you want to select a group of element, having same CSS class than use class selector. There is good chance that, Interview will ask you to write code using ID and class selector. Following jQuery code uses ID and class selectors :
$("#LoginTextBox") -- Returns element wrapped as jQuery object with id="LoginTextBox"
$(".active") -- Returns all elements with CSS class active.
From syntax perspective, as you can see, another difference between ID and class selector is that former uses "#" and later uses "." character. More detailed analysis and discussion, see answer.
4. How do you hide an image on a button click using jQuery?
This jQuery interview question is based on event handling. jQuery provides good support for handling events like button click. You can use following code to hide an image, found using Id or class. What you need to know is hide() method and how to setup an even handler for button, to handle clicks, you can use following jQuery code to do that :
I like this jQuery question, because it's like a practical task and also code is not difficult to write.
5. What is $(document).ready() function? Why should you use it?
This is one of the most important and frequently asked jQuery Interview question. ready() function is used to execute code when document is ready for manipulation. jQuery allows you to execute code, when DOM is fully loaded i.e. HTML has been parsed and DOM tree has been constructed. Main benefit of $(document).ready() function is that, it works in all browser, jQuery handles cross browser difficulties for you. For curious reader see answer link for more detailed discussion. You can also see first chapter of Head First jQuery to learn more about this key function.
7. How do you find all selected options of HTML select tag?
This is one of the tricky jQuery question on Interviews. It's still a basic, but don't expect every jQuery beginners to know about this. You can use following jQuery selector to retrieve all selected options of tag.
8. What is each() function in jQuery? How do you use it?
each() function is like Iterator in Java, it allows you to iterate over a set of elements. You can pass a function to each() method, which will be executed for each element from the jQuery object, on which it has been called. This question sometime asked as follow-up of previous question e.g. how to show all selected options in alert box. We can use above selector code to find all selected option and than further can use each() method to print them in alert box, one by one, as shown below:
You can use jQuery method appendTo() to add an HTML element in DOM tree. This is one of the many DOM manipulation method jQuery provides. You can add an existing element or a new HTML element, appendTo() add that method in the end of a particular DOM element.
10. Can you write jQuery code to select all links, which is inside paragraphs?
Another jQuery interview question based on selector. This also required to write jQuery one liner, like many other questions. you can use following jQuery snippet to select all links ( tag) nested inside paragraphs (
11. Difference between $(this) and this keyword in jQuery?
12. How do you retrieve attribute of an HTML tag using jQuery e.g. href of links?
attr() method is used to retrieve value of an attribute of any HTML element. You first need to select all links or specified links using jQuery selector and than you can apply attr() method to get value of there href attribute. Below code will find all links from a page and return href value :
13. How do you set attribute using jQuery?
One more follow-up question of previous jQuery question, attr() method is overload like many other methods in JQuery. If you call attr() method with value e.g. attr(name, value), where name is the name of attribute and value is the new value.
14. What is difference between detach() and remove() method in jQuery?
Though both detach() and remove() method is used to remove a DOM element,Main difference between them is that detach() keep track of the last element detached, so that it can be reattached, while remove() method does keep reference of last removed method. This is one of the many jQuery interview question from DOM manipulation. You can also take a look on appendTo() for adding element into DOM.
15. How do you add and remove CSS classes to an element using jQuery?
By using addClass() and removeClass() jQuery methods. This can be very handy, while dynamically changing class of elements e.g. marking them inactive or active and using class ".active" etc.
16. What is main advantage of loading jQuery library using CDN?
This is slightly advanced jQuery question, and don't expect that jQuery beginners can answer that. Well, apart from many advantages including reducing server bandwidth and faster download, one of the most important is that, if browser has already downloaded same jQuery version from same CDN, than it won't download it again. Since now days, almost many public websites use jQuery for user interaction and animation, there is very good chance that browser already have jQuery library downloaded. Curious reader, please see the answer for in depth analysis.
17. What is difference between jQuery.get() and jQuery.ajax() method?
ajax() method is more powerful and configurable, allows you to specify how long to wait and how to handle error, get() is a specialization to over ajax just to retrieve some data.
18. What is method chaining in jQuery? what is benefit of using method chaining?
Method chaining is calling another method in result of another method, it result in clean and concise code, single search over DOM so better performance.
19. What happen if you return false from a jQuery event handler?
It used to stop the event bubbling up
20. Which one is more efficient, document.getElementbyId( "myId") or $("#myId)?
Source: Contents are provided by Technicalsymposium Google Group Members. Disclaimer: All the above contents are provided by technicalsymposium.com Google Group members. Further, this content is not intended to be used for commercial purpose. Technicalsymposium.com is not liable/responsible for any copyright issues.
Technicalsymposium.com-All Quick Links & Study Notes PDF- Free Download