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.
- More complex than HTML
- Add file weight to HTML files
- Cross platform issues
- Reduce search engine friendliness
- 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.
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.