★ jQuery Selectors are used to select one or a group of HTML elements from your web page.
★ jQuery support all the CSS selectors as well as many additional custom selectors.
★ jQuery selectors always start with dollar sign and parentheses: $()
★ There are three building blocks to select the elements in a web document.
2. Define all the ways to include jQuery in a page?
Following are the ways to include jQuery in a page:
★ Local copy inside script tag
★ Local copy of script manager control
★ Embedded script using client script object
★ Remote copy of jQuery.com
★ Remote copy of Ajax API
3. List the advantages of jQuery?
★ Just a JavaScript enhancement
★ Coding is simple, clear, reusable
★ Removal of writing more complex conditions and loops
4. List the basic selectors in jQuery?
Basic selectors in jQuery:
★ Element ID
★ CSS Name
★ Tag Name
★ DOM hierarchy
5. jQuery can be used in what scenarios?
jQuery can be used in following scenarios:
★ Apply CSS static or dynamic
★ Calling functions on events
★ Manipulation purpose
★ Mainly for Animation effects
6. Is jQuery better than javascript?
jQuery is great library for developing ajax based application.
It helps the programmers to keep code simple and concise and reusable.
7. How to read, write and delete cookies in jQuery?
★ To deal with cookies in jQuery we have to use the Dough cookie plugin.
★ Dough is easy to use and having powerful features.
Create cookie:
$.dough("cookie_name", "cookie_value");
Read Cookie:
$.dough("cookie_name");
Delete cookie:
$.dough("cookie_name", "remove");
8. Explain the difference between $(this) and 'this' in jQuery?
Refer the following example:
$(document).ready(function(){
$('#clickme').click(function(){
alert($(this).text());
alert(this.innerText);
});
});
★ this and $(this) references the same element but the difference is that "this" is used in traditional way but when "this" is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.
★ In the example given, when only "this" keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the "this" keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.
9. Define slideToggle() effect?
slideToggle() effect is used to give animated sliding effect to an element.
Syntax:
slideToggle([ duration] [, easing] [, callback])
"duration" is the number specifying how long the animation will run.
"easing" is the string which specify the function for the transition.
"callback" is the function which we want to run once the animation is complete.
If the element is visible then this effect will slide the element up side and make it completely hidden. If the element is hidden then slideToggle() effect will slide it down side and make it visible.
We can specify the toggle speed with this effect.
For example:
$("#clickme").click(function(){
$("#mydiv").slideToggle("slow", function(){
//run after the animation is complete.
});
});
10. Define each() function in jQuery?
The each() function specify the function to be called for every matched element.
Syntax:
$(selector).each(function (index, element))
"index" is the index position of the selector.
"selector" specifies the current selector where we can use "this" selector also.
In the case when we need to stop the each loop early then we can use "return false;"
For example:
$("#clickme").click(function(){
$("li").each(function(){
document.write($(this).text())
});
});
This will write the text for each "li" element.
11. Derfine width() vs css('width')?
In jQuery, there are two way to change the width of an element.
One way is using .css('width') and other way is using .width().
For example:
$('#mydiv').css('width','300px');
$('#mydiv').width(100);
★ The difference in .css('width') and .width() is the data type of value we specify or return from the both functions.
★ In .css('width') we have to add "px" in the width value while in .width() we don't have to add.
★ When you want to get the width of "mydiv" element then .css('width') will return '300px' while .width() will return only integer value 300.
12. Define .siblings() method in jQuery?
When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.
We filter the elements fetched by an optional selector.
Syntax : .siblings( [selector])
"selector" is the selector expression which specify the matched elements.
For example:
<ul>
<li> item 1 </li>
<li id="second_item"> item 2 </li>
<li class="myitem"> item 3 </li>
<li class="myitem"> item 4 </li>
</ul>
Now we want to find the siblings of the element of id "second_item" and change the text color to Blue :
$('li.second_item').siblings().css('color','blue');
If we want specific sibling elements for example the elements having class "myitem" then we can pass a optional selector:
$('li.second_item').siblings('.myitem').css('color','blue');
13. Define animate function in jQuery?
The animate function is used to apply the custom animation effect to elements.
Syntax:
$(selector).animate({params}, [duration], [easing], [callback])
"param" defines the CSS properties on which you want to apply the animation.
"duration" specify how long the animation will run. It can be one of following values : "slow", "fast", "normal" or milliseconds
"easing" is the string which specify the function for the transition.
"callback" is the function which we want to run once the animation effect is complete.
For example:
<div id="clickToAnimate">
Click Me
</div>
<div id="mydiv" style="width:200px; height:300px; position: relative; right: 20px;">
</div>
Following is the jQuery to animate opacity, left offset, and height of the mydiv element
$('# clickToAnimate').click(function() {
$('#book').animate({
opacity: 0.30,
left: '+=20',
height: 'toggle'
}, 3000, function() {
// run after the animation complete.
});
});
14. How to give face effect in jQuery?
In jQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo
This methods change the opacity of element with animation.
Syntax:
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
"speed" can be one of following values : "slow", "fast", "normal" or milliseconds
"opacity" specify the value that allows the fading to given opacity.
"callback" is the function which we want to run once the fading effect is complete.
For example
$("clickme").click(function(){
$("mydiv").fadeTo("slow",0.50);
});
$("clickme").click(function(){
$("mydiv").fadeOut(3000);
});.
15. Define the types of selectors in jQuery?
★ XPath Selector
★ Custom Selector
★ CSS Selector
There are two ways to debug jQuery:
Debugger keyword:
★ Insert a break point after attaching the process
★ Add the debugger to the line from where we have to start debugging and then run Visual Studio in Debug mode with F5 function key.
17. Why we use chaining in jQuery?
Chaining is used to connect multiple events and functions in a selector.
18. Define the script build up by jQuery?
jQuery is a Javascript file and it is single javascript file that contains common DOM, event effects and Ajax functions.
19. What is jQuery a client or server scripting?
jQuery is a client scripting.
20. Describe the two types of CDNs?
★ Google - Load jQuery from Google libraries API
★ Microsoft - Load jQuery from Ajax CDN
CDN is abbreviated as Content Distribution network and it is said to be a group of companies in different location with network containing copies of data files to maximize bandwidth in accessing the data.
The jQuery filter is used to filter the certain values from the object list based on the criteria. Example is to filter certain products from the master list of products in a cart website.
23. Tell me which program is useful for testing jQuery?
QUnit is used to test jQuery and it is very easy and efficient.
24. Explain the difference between size and length of jQuery?
Size and length both returns the number of element in an object. But length is faster than the size because length is a property and size is a method.
25. Define the use of each function in jQuery?
Each function is used to iterate each and every element of an object. It is used to loop DOM elements, arrays and the object properties.
26. Define the use jQuery.data method?
jQuery.data methods is used to associate the data with the DOM nodes and the objects. This data method makes the jQuery code clear and concise.
27. List the advantage of using minimized version of jQuery?
Efficiency of web page increases when minimized version of jQuery is used.min.js file will be more than 50% less than the normal js file. Reduction in the file size makes the web page faster.
28. How to use connect in jQuery?
Connect can be used by downloading jQuery connect file from jQuery.com and then include that file in the HTML file. Use $.connect function to connect a function to another function.
jQuery connect is a plugin used to connect or bind a function with another function. Connect is used to execute function from any other function or plugin is executed.
30. List browser related issues for jQuery?
Browser compatibility of jQuery plugin is an issue and needs lot of time to fix it.
31. What features of jQuery, has been used in web applications?
jQuery uses features like Sliding, File uploading and accordion in web applications.
32. How to include jQuery library in ASP.Net project?
Download the jQuery library from jQuery.com and include that reference in the asp.net page.
33. Explain the difference between find and children methods in jQuery?
Find method is used to find all levels down the DOM tree but children find single level down the DOM tree.
34. Is jQuery is JSON library file or a JavaScript?
jQuery is a library of JavaScript file and it consists of DOM, event effects and the Ajax functions. jQuery is said to be a single JavaScript file.
35. Tell me which command will give a version of jQuery?
The command $.ui.version returns jQuery UI version.
