intro to jquery - lugor - part 1
Post on 10-May-2015
3.956 Views
Preview:
TRANSCRIPT
for Linux Lovers
Introduction
Ralph Whitbeck
• jQuery Team Member, on the Developer Relations team
• Co-authored O’Rielly’s “jQuery Cookbook”
• Senior Web Application Engineer BrandLogic Corporation (http://brandlogic.com)
• Blog: http://ralphwhitbeck.com
• Twitter: @RedWolves
The Official jQuery Podcast
Overview
• Who, what, where and why of jQuery
• Review Core jQuery Concepts
• jQuery API Overview
• jQuery plugins
• jQuery UI
Who uses jQuery
• 39.25% of all sites that use JavaScript
• About 30% of the top 10,000 sites
http://trends.builtwith.com/javascript/JQuery
Who uses jQuery
• 39.25% of all sites that use JavaScript
• About 30% of the top 10,000 sites
http://trends.builtwith.com/javascript/JQuery
What is jQuery?
jQuery is a JavaScript Library!
• Dealing with the DOM(e.g. selecting, creating, traversing, changing, etc.)
• JavaScript Events
• Animations
• Ajax interactions
What does that mean?
if (browserType == "ie") document.poppedLayer =
eval('document.getElementById("HiddenDIV")'); else
document.poppedLayer = eval('document.layers["HiddenDIV"]');
document.poppedLayer.style.visibility = "visible";
It means no more of this…
Using jQuery we can do this
jQuery(“#HiddenDiv”).show();
Using jQuery we can do this
jQuery(“#HiddenDIV”).show();
jQuery function
var $ = jQuery;
$(“#HiddenDiv”).show();
Using jQuery we can do this
jQuery(“#HiddenDIV”).show();
jQuery Function
jQuery Selector(CSS expression)
jQuery Wrapped Set
Using jQuery we can do this
jQuery(“#HiddenDIV”).show();
jQuery Function
jQuery Selector(CSS expression)
jQuery Wrapped Set
Using jQuery we can do this
jQuery(“#HiddenDIV”).show();
jQuery Function
jQuery Selector(CSS expression)
jQuery Method
jQuery really is the
“write less, do more”
JavaScript Library!
Why use jQuery?
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated with cross-browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms and mobile
• It’s for both developers and designers
Why use jQuery?
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated with cross-browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms and mobile
• It’s for both developers and designers
Why use jQuery?
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated with cross-browser development
• Provides a large pool of plugins
• Large and active community
• Tested on 50 browsers, 11 platforms and mobile
• It’s for both developers and designers
Where to get jQuery
• Download the source from Github
• Or use a CDN• jQuery CDN (Edgecast via (mt)
• http://code.jquery.com/jquery-1.4.2.min.js Minified version
• http://code.jquery.com/jquery-1.4.2.js Source version •Google•Microsoft
Core jQuery Concepts
• Select Something, do something
• Create something, do something
• Chaining and Operating
Demo’d http://ejohn.org/apps/learn-jquery/andhttp://ralphwhitbeck.com/talks/stackoverflowdevdays/
createdosomething.html
jQuery API Overview
• Core
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
• Utilities
You can review Core Methods at:
http://api.jquery.com
jQuery Plugins
• There are over 2200 plugins
• Plugins extend jQuery’s functionality
• If you can’t find the functionality in a plugin, make your own!
• You can make a jQuery Plugin in six steps
Step 1. create a private scope for $ alias<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){ })(jQuery);</script></body></html>
A jQuery plugin in 6 steps
Step 2. attach plugin to fn alias<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){$(this).text($(this).text().replace(/hate/g,'love'));
};
})(jQuery);</script></body></html>
A jQuery plugin in 6 steps
Step 2. attach plugin to fn alias<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){$(this).text($(this).text().replace(/hate/g,'love'));
};
})(jQuery);jQuery('p').loveNotHate();</script></body></html>
A jQuery plugin in 6 steps
Step 3. add implicit iteration<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ this.each(function(){
$(this).text($(this).text().replace(/hate/g,'love'));
}); };
})(jQuery);jQuery('p').loveNotHate();</script></body></html>
A jQuery plugin in 6 steps
Step 3. add implicit iteration<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ this.each(function(){
$(this).text($(this).text().replace(/hate/g,'love'));
}); };
})(jQuery);jQuery('p').loveNotHate();</script></body></html>
A jQuery plugin in 6 steps
Step 4. enable chaining<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,'love'));
}); };
})(jQuery);jQuery('p').loveNotHate();</script></body></html>
A jQuery plugin in 6 steps
Step 4. enable chaining<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,'love'));
}); };
})(jQuery);jQuery('p').loveNotHate().hide();</script></body></html>
A jQuery plugin in 6 steps
Step 5. add default options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);jQuery('p').loveNotHate();</script></body></html>
A jQuery plugin in 6 steps
Step 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);jQuery('p').loveNotHate({text:'love-love-love'});</script></body></html>
A jQuery plugin in 6 steps
Step 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(customOptions){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);jQuery('p').loveNotHate({text:'love-love-love'});</script></body></html>
A jQuery plugin in 6 steps
Step 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){
$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);jQuery('p').loveNotHate({text:'love-love-love'});</script></body></html>
A jQuery plugin in 6 steps
Step 6. add custom options<!DOCTYPE html><html><body><p>I hate jQuery!</p><p>I mean really hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(function(){
$(this).text($(this).text().replace(/hate/g,options.text));
}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};
})(jQuery);jQuery('p').loveNotHate({text:'love-love-love'});</script></body></html>
A jQuery plugin in 6 steps
Plugins are simple, just follow the steps!
jQuery UI
• Official jQuery Project
• Provides plugins that make user interface elements easy
• Contains:
– Interactions
– Widgets
– Effects
– Theming
top related