What Will I Learn?
We are learning about jQuery and -
- What is jQuery
- jQuery advantages
- How to start jQuery
- Using the selector
- Manipulate the DOM
Requirements
There is no such requirement for this tutorial but you may need -.
- Web Browser
- Notepad+++
- Basic knowledge of programming
Difficulty
- Intermediate
Tutorial Contents
What is jQuery?
• jQuery is a JavaScript framework among many others (Mootools, Prototype, YUI etc ...)
• Its objective: To change the methods in which way we write javascript.
• Simplifies writing complex code, written in pure js.
jQuery advantages
- Cross browser (IE 6.0+, FF 2.0+, Safari 2.0+, Opera 9.0+)
- Support for CSS 3 selectors (Draft)
- Lightweight ~ 24KB in minified version (jquery.com)
- Complete documentation and active communities (plugins, examples, etc ...)
How to start?
html>
<head>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert(“Welcome to JQuery”);
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
• Simply adding in the header of your code HTML the import of the file js
• Run your code in the Document.Ready method
Using the selector-
• Select with $ or jQuery -> jQuery.noConflict ();
• Select by ID -> $ ("# myID")
• Select by type -> $ ("div")
• Select by CSS -> $ ("myClass + div, p> span")
• $ or jQuery returns an array of DOM elements
Manipulate the DOM - Part # 1 -
• $ ('div.section'). AddClass ('highlighted')
• $ ('img.photo'). Attr ('src', '/default.png');
• $ ('a.foo'). Html (' Click me now! </ Em>');
• $ ('p: odd'). Css ('background-color', '#ccc');
Manipulate the DOM - Part # 2 -
• $('div.section').next();
• $('div.section').prev();
• $('div.section').prev('a');
• $('div.section').parent();
• $('div.section').parents();
Chaining-
• Most jQuery methods return an object jQuery which often represents the same collection. What means that you can chain the methods between them
• Example:-
$ ( 'Div.section') hide () addClass ( 'gone')..;
The events
• No javascript in HTML tags!
• Binder actions to events simply
• Example:
var message = 'Spoon!';
$ ('# foo'). bind ('click', function () {
alert (message);
});
The Performances
• Performance depends on your code and not on the framework
• jQuery parses the DOM each time $ / Find is used
• Using IDs (faster)
$ ("Input") -> slow
$ ("# MonItem input") -> fast
AJAX
• jQuery has excellent support for AJAX
• Implements generic Cross-Browser methods for easy setup of AJAX operation
• Here are some methods to use to make AJAX:
• $ .get (url, params, callback)
• $ .post (url, params, callback)
• $ .getJSON (url, params, callback)
• $ .getScript (url, callback)
Extensible (Plugins)
jQuery is extensible to plugins that can
add new methods to the jQuery object
• UI (User Controls Plus 'user friendly')
• Interface (Carousel, Drag and Drop, Thickbox, jQuery IU)
• Form (easier handling, type management, errors, etc ...)
Posted on Utopian.io - Rewarding Open Source Contributors