intro to jquery - lugor - part 1

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

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();


jQuery(“#HiddenDIV”).show();

jQuery function

var $ = jQuery;

$(“#HiddenDiv”).show();



jQuery Function

jQuery Selector(CSS expression)

jQuery Wrapped Set



jQuery Function


jQuery Wrapped Set



jQuery Function


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

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>


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>


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'));

}); };



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(){


}); };



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(){


}); };



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($){



}); };

})(jQuery);jQuery('p').loveNotHate().hide();</script></body></html>


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($){


$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaultOptions.text));

}); }; $.fn.loveNotHate.defaultOptions = {text:'love'};



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($){


$(this).text($(this).text().replace(/hate/g, $.fn.loveNotHate.defaultOptions.text));


})(jQuery);jQuery('p').loveNotHate({text:'love-love-love'});</script></body></html>



$.fn.loveNotHate = function(customOptions){ return this.each(function(){






$.fn.loveNotHate = function(customOptions){ var options = $.extend({},$.fn.loveNotHate.defaultOptions, customOptions); return this.each(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));




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

intro to jquery - lugor - part 1

Technology