JQuery is developed by John Resiq. JQuery was first announced at BarCamp NYC in 2006. JQuery grows fast and become very popular between web developers. Google, Microsoft and others like the JQuery concept and adopt it immediately. You can get help articles from JQuery website http://jquery.com. And to download latest version you can go to http://docs.jquery.com/Downloading_jQuery.
Microsoft integrated JQuery into is Visual Studio 2010. And provide Intellisense for JQuery. If you are using Visual Studio 2008 you need to install its service pack 1 to get JQuery Intellisense. You can use JQuery for other versions of Visual Studio as well but Intellisense will not work. To refer JQuery into your project you can either download its JS file from JQuery website itself or refer it from other websites. Like Microsoft also placed JQuery latest version on their CDN servers (http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js). Similarly Google also place JQuery on its servers (http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js). JQuery it available in two versions one is uncompressed and other one is minified version. I will recommend using minified version when you deploy your website.
Classic JavaScript
Before start coding just have a look at few draw backs of classic JavaScript.
- More complex than HTML
- Add file weight to HTML files
- Cross platform issues
- Reduce search engine friendliness
JQuery website defines JQuery as “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript”.
Before start coding just has a look at few basic things of JQuery which will to understand JQuery syntax. In JavaScript we use Window.Load to write code, and this code executes after the page has been rendered. Same like in JQuery we are going to use $(document).ready. The difference is that this method will be executed as DOM (Document Object Model) is ready. In JQuery dollar sign ($) is used to access elements on the page. JQuery selector allows selecting DOM elements. JQuery uses CSS 3.0 syntax to select single or multiple elements. Using CSS syntax mean
- Select elements by ID
- Select element by CSS class
- Select element by attribute filter
Lets start writing a simple hello world in JQuery. Create a new empty web site in Visual Studio (I have Visual Studio 2010), and I name it IntroToJQuery.
I selected an empty website so only config file will be added by default in it. I added an JQuery 1.4.1 js file in it and create a new webpage, I name it Default.aspx.
On the page we will create a link to JQuery js file and include inline javascript tags. Now I want that once the page is loaded a popup window appear and show a welcome message to user. Its a simple task. And in JQuery we will add a function called document.ready which is equal to classic JavaScript Window.Load event. I will write it $(document).ready(function(){});
and inside this function we will write alert(“Welcome to JQuery world!”);. And now we are ready to go. Now press F5 and run the application and you will see that once the Default.aspx page loaded a popup window will appear.
Now lets create a bit more complex example of JQuery where you can get an input from user and popup user input on button click. We will modify our same page and add an textbox and button. And ask user to enter his/her name and click on button. And we will show user name in message window. Image 4 show the altered HTML of page.
In the code shown in Image 4 under document.ready function we attach click event with button btn1. As mentioned before with doller sign ($) we can select any element. In click event function we select textbox and to get its value we called Val() method. Lets run the website and see the output as shown in Image 5
I am sure this post will help you get an Idea of what JQuery is. I try to make it simple as I can. I will write more posts on JQuery. As the I explore it I love to use it in my projects.