JQuery FAQ for beginners. (Getting Started)
Introduction
These days Client side scriptings are getting popular more and more, due to their lightweight nature, they execure fast and produce output with greater speed
Among that Javascript is Most popular scripting language and used in almost all browsers. In earlier days Javascript was used just to Validate user inputs but now it is used in wide range of applications starting from Designing CSS, Data manupulation and many more.
Again to code a Javascript, designer/developer needs to write lot of code and syntax. To minimize these efforts JQuery come in foucs. It says The Write Less, Do More, JavaScript Library'
If you don't know anything about JQuery then Don't worry, This article will take you to the journey of basic JQuery concepts. So lets begin.
1. What is JQuery?
Most simple but frequently asked question, JQuery is a library designed by javascript, it is light weight, it is simple than JavaScript, it has many inbuilt methods and it can handle events, Html DOM and Ajax
2. What is $ in JQuery?
Simple it is a function selector or a JQuery object, some says $ is a shortcut to the jQuery function
3. Can i use Javascript and JQuery on same page?
Yes, we can use Javascript and JQuery on same page, for the use of JQuery we need to add .JS library reference to the page, where as for JavaScript, separate library reference is needed.
4. How to use JQuery?
JQuery can be easily access with the help of its referenced libraries, first we need to refer JQuery library reference to page and then access it using '$' sign see below snippet, we can write JQuery in HEAD section
<head>
//here is JQuery reference
//JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("Message on on page load")
});
</script>
</head>
above snippet shows, we can write JQuery in HEAD section and above code will call on Page load
5. What are the JQuery features (Why to use it)?
- JQuery is highly intractable, it has following features
- Rich Inbuilt methods that easily interact with controls
- Events handling
- Special widgets
- Animation and effect supports
- Good alternative to flash
- Strong AJAX support
- HTML DOM Manipulation
- Can Bind Multiple Event Handlers in single method
6. What is JQuery UI?
JQuery UI is also a JavaScript library, as name suggest it is a user interface portal that is built using JavaScript and can be easily added in new and existing applications it contains interactions, widgets and effects, we can build UI rich and highly interactive applications using it.
7. Which are the performance responsive selector?
The elements which are selected using ID are the performance responsive selector as the ID is unique throughout the rendered page
8. JQuery or JavaScript which is quicker in execution?
Native JavaScript is always faster in operation than JQuery cause JQuery is a JavaScript library, e.g. Through we call '$(#EmpName)' in JQuery, it internally convert the syntax to javascript's 'getElementById("EmpName")' method and then execute in browser
9. What is has() in JQuery?
has() is selection filter, it checks Check if an Element 'Has Something', means if i want to traverse my HTML file and check if DIV has list tag (OL) then we can check with has(), see below snippet
JQuery('div').has('ol');
above code will select all element with 'ol'
10. Can JQuery parse XML?
No, currently JQuery supports only HTML DOM parser
11. Can JQuery Run on MAC or Linux instead of Windows?
JQuery support cross browser and cross platform compatibility hence it fluidly runs on Windows/MAC/Linux with all major browser compatibility (IE/Chrome/FF/NN/Safari)
12. When to use JQuery?
Basically JQuery can be use more than validation part, Alone JavaScript can be able to handle validation part, you can us JQuery when you want rich user interface with client side events, when you want to remove flash plug inns and put some animations
13. Which effects has inbuilt supported by JQuery?
Hide, Show, Toggle, SlideDown, SlideToggle, SlideUp, FadeIn, FadeOut, Animate, FadeTo, FadeToggle, has inbuilt support by JQuery
14. Can we replace any character or variable instead of $ in JQuery? Yes,
we can replace $ by using no Conflict () method, see below snippet to replace $
var szDoll = $.noConflict()
15. Tell me something about JQuery debugging?
JQuery can be debugged easily using following ways
- using debugger; keyword : Add debugger; keyword just before the line where you want to debug
- using Breakpoint : If you have visual studio then you can place breakpoint on line where you want to start debugging
- Placing a Alert box : It is traditional way, if you don't have visual studio, you need to place a alert boxes in lines from where you want start debugging
16. What is Method chaining in JQuery?
As name suggest it is the chain of methods executed in sequence, it is executed in single statement, see following snippet
$("#div1").text("DIV 1");
$("#div1").css("color", "red");
$("#div1").removeClass("cls");
//instead we can write
$("#div1").text("DIV 1");
.css("color", "red");
.removeClass("cls");
17. How to redirect a page using JQuery?
There is no specific JQuery syntax to redirect a page, you can use Javascript syntax instead, see below snippet
window.location.replace("http://test/default.aspx");
OR
window.location.href = http://test/default.aspx;
18. How to refresh a page using JQuery?
you can use location.reload() method, to refresh page, see below snippet
$('#div1').click(function()
{
location.reload();
});
19. How to check if element is hidden or visible using JQuery?
You can use 'is()' method for 'display' or 'hidden' property, it returns boolean variable, see below snippet
$("#txtEmpName").is(":visible");
20. What is difference in return false and preventDefault in JQuery?
when we call return false, it first call e.preventDefault and then call e.stopPropagation which stop execution, where as e.preventDefault will prevent event to be bubbling up.
21. What is difference between # and . selector in JQuery? - Basically JQuery uses following notation as selector
- $("div") : It is global selector which Selects all DIV element in page
- $("#btnSubmit") : # is a specific ID selector which select element having ID as 'btnSubmit'
- $(".classBold") : . is a specific Class selector which select element having class as 'classBold'
22. Which are the most common JQuery evens?
- click () : Raise when any element is clicked
- dblclick() : Raise when any element is double clicked
- mouseenter() : Raise when mouse pointer enter in element
- mouseleave() : Raise when mouse pointer leave an element
- mousedown() : Raise when mouse pointer clicked down on element
- mouseup() : Raise when mouse pointer clicked and release on element
- focus() : Raise when element got focus
Rome was not built in a day, still more to come, i will cover some more complex Q&A in Next version of this article, till then you can enjoy this most commonly asked question
Suggestion and queries are most welcome
Thanking you
-Prasad