We are learning about jQuery and -
There is no such requirement for this tutorial but you may need -.
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 advantagesHow 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 ...)
