stackoverflow devdays: jquery introduction for developers
Post on 17-May-2015
6.655 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduction for Developers
Survey
Who Me?
• Jörn Zaefferer from Cologne• Consultant for maxence integration
technologies• jQuery team member• jQuery UI lead developer• Co-Author jQuery Cookbook, due this month
Why bother?
Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery
Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery
reddit.comespn.comibm.com
stackoverflow.comkickball.com
boxee.tvbit.ly
twitpic.com
whitehouse.govwikipedia.orgmicrosoft.comamazon.comnetflix.combing.com
monster.comtv.com
overstock.comtime.com
capitalone.comusatoday.com
ning.comwordpress.com
dell.comtwitter.com
Who uses jQuery
• 35% of all sites that use JavaScript, use jQuery• 1 out 5 sites, of all sites, use jQuery
http://trends.builtwith.com/javascript/JQuery
reddit.comespn.comibm.com
stackoverflow.comkickball.com
boxee.tvbit.ly
twitpic.com
whitehouse.govwikipedia.orgmicrosoft.comamazon.comnetflix.combing.com
monster.comtv.com
overstock.comtime.com
capitalone.comusatoday.com
ning.comwordpress.com
dell.comtwitter.com
What exactly is jQuery
jQuery is a JavaScript Library!
• Dealing with the DOM• JavaScript Events• Animations• Ajax interactions
What does that mean?
It means no more of this
var tables = document.getElementsByTagName("table");for (vart = 0; t<tables.length; t++) {var rows = tables[t].getElementsByTagName("tr"); for (vari = 1; i<rows.length; i += 2) { if (!/(^|s)odd(s|$)/.test(rows[i].className)) {
rows[i].className += " odd"; } }};
http://jsbin.com/esewu/edit
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
jQuery Selector (CSS expression)
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
jQuery Selector (CSS expression)
jQuery Wrapper Set
Using jQuery we can do this
jQuery("tabletr:nth-child(odd)").addClass("odd");
jQuery function
jQuery Selector (CSS expression)
jQuery MethodjQuery Wrapper Set
It 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 browser development
• Provides a large pool of plugins• Large and active community• Tested on 50 browsers, 11 platforms• Its for both coders and designers
Why use jQuery over other solutions
• Helps us to simplify and speed up web development
• Allows us to avoid common headaches associated with browser development
• Provides a large pool of plugins• Large and active community• Tested on 50 browsers, 11 platforms• Its for both coders and designers
Concept 1. Find something, do something
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul><li><a>home</a></li><li><a>about</a></li>
</ul></body></html>
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul><li><a>home</a></li><li><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("ul");</script></body></html>
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li><a>home</a></li><li><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("ul").attr("id", "nav");</script></body></html>
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li><a>home</a></li><li><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("#nav li");</script></body></html>
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li class="navLiItem"><a>home</a></li><li class="navLiItem"><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("#nav li").addClass("navLiItem");</script></body></html>
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li><a>home</a></li><li><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("#nav a");</script></body></html>
Concept 1. Find something, do something
<!DOCTYPE html><html><body>
<ul id="nav"><li><a href="/home">home</a></li><li><a href="/about">about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("#nav a").each(function(){jQuery(this).attr("href", "/" +
jQuery(this).text());});
</script></body></html>
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav"></ul></body></html>
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav"></ul><script src="jquery.js"></script><script>
jQuery("<li>home</li>");jQuery("<li>about</li>");
</script></body></html>
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav"></ul><script src="jquery.js"></script><script>
jQuery("<li>home</li>").wrapInner("a");jQuery("<li>about</li>").wrapInner("a");
</script></body></html>
Concept 2. Create something, do something
<!DOCTYPE html><html><body><ul id="nav">
<li><a>home</a></li><li><a>about</a></li>
</ul><script src="jquery.js"></script><script>
jQuery("<li>home</li>").wrapInner("a").appendTo("#nav");
jQuery("<li>about</li>").wrapInner("a").appendTo("#nav");</script></body></html>
Concept 3. Chaining<!DOCTYPE html><html><body>
<ul id="nav"><li class="navLiItem"><a href="/home">home</a></li><li class="navLiItem"><a
href="/about">about</a></li></ul>
<script src="jquery.js"></script><script>
jQuery("ul").attr("id","nav");jQuery("#nav li").addClass("navLiItem");jQuery("#nav a").each(function(){
jQuery(this).attr("href", "/" + jQuery(this).text());
});</script></body></html>
Concept 3. Chaining<!DOCTYPE html><html><body>
<ul id="nav"><li class="navLiItem"><a href="/home">home</a></li><li class="navLiItem"><a
href="/about">about</a></li></ul>
<script src="jquery.js"></script><script>
jQuery("ul").attr("id","nav").find("li").addClass("navLiItem").find("a").each(function(){
jQuery(this).attr("href","/" + jQuery(this).text());
});</script></body></html>
Concept 4. jQuery parameter types
• CSS Selectors & custom CSS expressions jQuery("#nav") and jQuery(":first")
• HTML jQuery("<li><a href=“#”>link</a></li>")
• DOM ElementsjQuery(document) or jQuery(this) or jQuery(event.target)
• A function (shortcut for jQuery DOM ready event)jQuery(function(){}) = jQuery(document).ready(function(){})
Review
• Find something, do something• Create something, do something• Chaining• jQuery parameter types
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery()
each() map()size()lengthselectorcontextindex()get()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery()
each()map() size()lengthselectorcontext index()get()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>Gold</p><p>Silver</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>alert(jQuery("p").map(function() {
return $(this).text();}).get());</script></body></html> http://jsbin.com/orani/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
jQuery("a:first[href*='foo']")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
jQuery("a:first[href*='foo']")
jQuery("#header, #footer")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
jQuery("#nav li.contact")
jQuery(":visible")
jQuery(":radio:enabled:checked")
jQuery("a[title]")
jQuery("a[title][href='foo']")
jQuery("a:first[href*='foo']")
jQuery("#header, #footer")
jQuery("#header, #footer").filter(":visible")
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
attr()removeAttr()
addClass()hasClass()toggleClass()removeClass()
val()
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
http://jsbin.com/irico/edit#html
<!DOCTYPE html><html><body>
<input type="text" value="search" />
<script src="jquery.js"></script><script>
$("input").focus(function(){ var v = $(this).val(); $(this).val( v == this.defaultValue ? "" : v);}).blur(function(){ var v = $(this).val(); $(this).val( !v ? this.defaultValue : v);});
</script></body></html>
http://jsbin.com/ihale/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
add()children()closest()find()next()nextAll()prev() prevAll() siblings()
parent() parents()
andSelf()end()
eq()filter()is()not()slice()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
add()children()closest()find()next()nextAll()prev() prevAll() siblings()
parent() parents()
andSelf()end()
eq()filter()is()not()slice()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<h3>Quotes</h3><div>
<p>Now or never</p><p>Because he could</p>
</div>
<script src="jquery.js"></script><script>$("h3").click(function() {
$(this).next().toggle();}).next().hide();</script></body></html> http://jsbin.com/uhole/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
html()text()
append()appendTo()prepend()prependTo()
after()insertAfter()before()insertBefore()
wrap()wrapAll()wrapInner()
replaceWith()replaceAll()
empty()remove()
clone()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
html()text()
append()appendTo()prepend()prependTo()
after()insertAfter()before()insertBefore()
wrap()wrapAll()wrapInner()
replaceWith()replaceAll()
empty()remove()
clone()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>Make me bold!</p>
<script src="jquery.js"></script><script>
jQuery("p").wrapInner("<b></b>");
</script></body></html>
http://jsbin.com/esuwu/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
css()
offset()offsetParent()postion()scrollTop()scrollLeft()
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
css()
offset()offsetParent()postion()scrollTop()scrollLeft()
height()width()innerHeight()innerWidth()outerHeight()outerWidth()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><head><style>div{background-color:#ccc; width:100px; margin:0 20px; float:left;}</style></head><body>
<div></div><div></div><div></div>
<script src=“jquery.js" ></script><script>
jQuery("div").height(jQuery(document).height());
</script></body></html>
http://jsbin.com/iseti/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
blur()change()click()dbclick()error()focus()keydown()keypress()keyup()mousedown()mousenter()mouseleave()mouseout()mouseup()resize()scroll()select()submit()unload()
ready()
bind()one()trigger()triggerHandler()unbind()
live()die()
hover()toggle()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
blur()change()click()dbclick()error()focus()keydown()keypress()keyup()mousedown()mousenter()mouseleave()mouseout()mouseup()resize()scroll()select()submit()unload()
ready()
bind()one()trigger()triggerHandler()unbind()
live()die()
hover()toggle()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>click me</p><p>click me</p>
<script src="jquery.js"></script><script>
jQuery("p").bind("click", function(){ $(this).after("<p>click me</p>"); });
</script></body></html>
http://jsbin.com/ehuki/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><body>
<p>click me</p><p>click me</p>
<script src="jquery.js"></script><script>
jQuery("p").live("click", function(){ $(this).after("<p>click me</p>"); });
</script></body></html>
http://jsbin.com/epeha/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
var tooltip = $("<div/>").addClass("tooltip").appendTo("body");$("input").mouseover(function(event) {
tooltip.text(this.title).css({left: event.pageX,top: event.pageY
}).fadeIn();}).mouseout(function() {
tooltip.fadeOut();});
http://jsbin.com/enoco3/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
show()hide()toggle()
slideDown()slideUp()slideToggle()
fadeIn()fadeOut()fadeTo()
animate()stop()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
<!DOCTYPE html><html><head><style>div{background-color:#bca;width:100px;border:1px solid green;}</style></head><body><div id="block">Hello!</div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script><script>
jQuery("#block").animate({ width: "70%",opacity: 0.4,
}, 1500);
</script></body></html>
http://jsbin.com/ulexu/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.ajax()jQuery.get()jQuery.getJSON() jQuery,getScript() jQuery.post()
load()
ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
jQuery.ajaxSetup() serialize()serializeArray()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.ajax()jQuery.get()jQuery.getJSON()jQuery,getScript() jQuery.post()
load()
ajaxComplete()ajaxError()ajaxSend()ajaxStart()ajaxStop()ajaxSuccess()
jQuery.ajaxSetup() serialize()serializeArray()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
http://jsbin.com/erase/edit#html
<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script><script>
jQuery.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=jquery&tagmode=all&format=json&jsoncallback=?",function(data){
jQuery.each(data.items, function(i,item){ jQuery("<img/>").attr("src", item.media.m).appendTo("body");
if ( i == 30 ) return false; }); });</script></body></html> http://jsbin.com/ivifa/edit#html
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.supportjQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery,isFunction()
jQuery.trim()
jQuery.param()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.supportjQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery.isFunction()
jQuery.trim()
jQuery.param()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
// returns "hello"jQuery.trim(" hello ");
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
jQuery.supportjQuery.boxModel
jQuery.each(), jQuery.extend(), jQuery.grep(), jQuery.makeArray(), jQuery.map(), jQuery.inArray(), jQuery.merge(), jQuery.unique()
jQuery.isArray(), jQuery.isFunction()
jQuery.trim()
jQuery.param()
Overview of jQuery API
• Core• Selectors• Attributes• Traversing• Manipulation• CSS• Events• Effects• Ajax• Utilities
// returns "name=John&url=ejohn.org"jQuery.param({ name: "John", url: "ejohn.org" });
jQuery and $
var jQuery = window.jQuery = window.$ = function() {}
jQuery and $
jQuery(document).ready(function($) {// ready code
});
or
jQuery(function($) {// ready code
});
jQuery.noConflict()
Plugins
A jQueryplugin in 6 steps
http://jsbin.com/asice/edit
A jQueryplugin in 6 stepsStep 1. create a private scope for $ alias<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
})(jQuery);</script></body></html>
A jQueryplugin in 6 stepsStep 2. attach plugin to fn alias (aka prototype)<!DOCTYPE html><html><body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){$(this).text($(this).text().replace(/hate/g,"love"));
};
})(jQuery);</script></body></html>
A jQueryplugin in 6 stepsStep 2. attach plugin to fn alias (aka prototype)<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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 jQueryplugin in 6 stepsStep 3. add implicit iteration<!DOCTYPE html><html><body><p>I hate jQuery!</p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.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 jQueryplugin in 6 stepsStep 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.3.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 jQueryplugin in 6 stepsStep 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.3.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 jQueryplugin in 6 stepsStep 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.3.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 jQueryplugin in 6 stepsStep 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.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate();</script></body></html>
A jQueryplugin in 6 stepsStep 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.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
A jQueryplugin in 6 stepsStep 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.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(options){ return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
A jQueryplugin in 6 stepsStep 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.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options);return this.each(function(){
$(this).text($(this).text().replace(/hate/g,$.fn.loveNotHate.defaults.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
A jQueryplugin in 6 stepsStep 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.3.2/jquery.min.js"></script><script>(function($){
$.fn.loveNotHate = function(options){ options = $.extend({},$.fn.loveNotHate.defaults, options);return this.each(function(){
$(this).text($(this).text().replace(/hate/g,options.text));
}); }; $.fn.loveNotHate.defaults = {text:"love"};
})(jQuery);jQuery("p").loveNotHate({text:"love-love-love"});</script></body></html>
Plugins are simple,just follow the steps!
jQuery News
• Moving towards a Conservancy (Software Freedom Law Center) owning the code
• Tax-deductible donations• Four conferences next year (Boston, San Francisco,
London, and online)• jQuery.org project site• T-shirts• jQuery Forum moving away from Google Groups• Revamp of the plugin site
?
Thank you!
top related