jQuery Hello World
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.
jQuery is a new technology? Definitely not, i rather said jQuery is a new approach to simplify client side web development like the HTML traversing with DOM and Ajax manipulation. iQuery was created by John Resig, a young kid, please visit his website to figure it out how this jQuery guy look like ~
Let go through a jQuery Hello World example to understand how it works.
1. Download jQuery Library
jQuery is just a small 20+kb JavaScript file (e.g jquery-1.2.6.min.js), you can download it from the jQuery official website. .
2. HTML + jQuery
Create a simple HTML file (test.html), and include the downloaded jQuery library as normal JavaScript file (.js).
<html> <head> <title>jQuery Hello World</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $("#msgid").html("This is Hello World by JQuery"); }); </script> <body> This is Hello World by HTML <div id="msgid"> </div> </body> </html>
3. Demo
The $() indicate a a jQuery syntax, and the following script means when DOM elements are ready or fully loaded, execute the jQuery script to dynamic create a message and append it to html tag id "msgid".
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});- Java Core Technology - Java RegEx, Java XML, Java I/O, Java Misc
- J2EE Frameworks - Hibernate, Spring 2.5, Spring MVC, Struts 1.x, Struts 2.x
- Build Tools - Maven, Archiva
- Unit Test - jUnit, TestNG
- Client Scripts - jQuery
[...] Source URL: http://www.mkyong.com/jquery/jquery-hello-world/ [...]
[...] jQuery Hello World Example A simple jQuery hello world example to show how to download and include the jQuery library into a HTML page. [...]
[...] Pre Tutorial – JQuery Hello World [...]