diego guidi - dotnetmarche. dom tree is clunky to use no multiple handlers per event no high-level...
TRANSCRIPT
Diego Guidi - DotNetMarche
DOM tree is clunky to useNo multiple handlers per eventNo high-level functions
Browser incompatibilities
= jQuery to the resque!
• John Resig http://twitter.com/jeresig
• jQuery 1.0 out (Aug 2006)• jQuery 1.3.2 latest
• Production 19k – Debug 120k• Cross-browser
• Visual Studio 2008 supporthttp://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
var fieldsets = document.getElementsByTagName('fieldset');var legend, fieldset;for (var i = 0; i < fieldsets.length; i++) {
fieldset = fieldsets[i];if (!hasClass(fieldset, 'collapsible')) continue;legend = fieldset.getElementsByTagName('legend');if (legend.length == 0) continue;legend = legend[0];... // Do your job
}
$('fieldset.collapsible legend').each(function() {
... // Do your job});
$("table tr:nth-child(odd)").addClass("striped");
Separate behavior from structure and style
• HTML => structure• CSS => style• JS => behavior
<buttontype="button"
onclick="alert('behavior!');">MyBehavior
</button>
<script type="text/javascript">window.onload = function() {
document.getElementById('mybutton').
onclick = behavior;};function behavior() {
alert('behavior!');}</script>
$(document).ready(function() {
$("#mybutton").bind('click', function(ev){
alert('behavior!');});
});
document.ready != pageLoadhttp://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same
Supports most CSS 1-3 selectors
Select all elements: $('*')
Select all div elements: $('div')
Select element by id: $('#id')
Select all elements with class: $('.class')
Combined: $('div#id.class')
Ancestor Descendant Selectors Select all paragraphs inside and element: $('#id p') Select all input elements on a form: $('form input')
Parent Child Selectors Find all paragraphs elements of an element: $('#id > p')
Filtering elements based on values of their attributes Find input with name attribute = value: $('input[name=??]') Find anchor tags that start with mailto: $('a[href^=mailto]') Find anchor tags that end with 'pdf': $('a[href$=pdf]')
Convenience pseudo-selectors
:first :last:even :odd:hidden :visible:has :contains:enabled :disabled:animated :selected:not $('div p:not(:hidden)')
Even more! http://docs.jquery.com/selectors
Fun with attributes get attribute values: $("#foo").attr("myattr") set attribute values: $("#foo").attr("myattr", "newval|myfunc")
Fun with styling check if class name is defined: $("#foo").hasClass("myclass") add/remove class names: $("#foo").addClass("class1 class2") toggle class names: $("#foo").toggleClass("class1 class2") get/set css properties: $("#foo").css("width", "newval|myfunc")
Fun with form elements get a value: $("[name=radioGroup]:checked").val()
$("#mydiv") .html("<span>Hello, world!</span>");
$("p").append("<strong>Hello</strong>");$("p").prepend("<strong>Hello</strong>");
$("<p>Hi there!</p>").insertBefore("#mydiv");$("<p>Hi there!</p>").insertAfter("#mydiv ");
$("p").wrap("<div class='wrapped'></div>");
$("p").empty()$("p").clone() - $("p").clone(true)
Unified method for establishing event handlersMultiple handlers for each event type on each element $("#mydiv").bind("eventName", data, listener) $("#mydiv").unbind("eventName") $("#mydiv").one("eventName", data, listener) $("#mydiv").trigger("eventName")
Standard event-type names (click, mouseover…) $("#mydiv").click(function(ev) { ... }) $("#mydiv").click()
Namespaced events $("#mydiv").bind("click", f1).bind("click.edit", f2) $("#mydiv").unbind("click.edit")
A simpler way to animate your page $("div").hide/show() $("div").toggle()
More difficult… $("div").show("slow", function() { ... })
Could I try to… $("div").fadeIn/fadeOut/fadeTo $("div").slideDown/slideUp/slideToggle
I need more! $("div").animate(properties, duration, easing, callback)
Utility functions $.browser $.trim(string) $.getScript(url, callback)
Iterators and filters $.each(array|object, function(index|key, value) { ... }) $.grep(array, function() { //... return true|false; }) var result = $.grep(array, 'a>100');
Extending objects $.extend(target,source1,source2, ... sourceN) var result = $.extend({ }, { a: 1}, { b: 2}, { c: 3}. {d: 4});
$("form input").disable();
$.fn.disable = function() { // this => wrapped-set return this.each(function() { // this => wrapped-set element if (typeof this.disabled != "undefined") this.disabled = true; }); }
$("#address input").readOnly(true);
$.fn.readOnly = function(readonly) { return this.filter("input:text") .attr("readonly", readonly) .css("opacity", readonly ? 0.5 : 1.0);}
Fetch content $("div").load(url, parameters, callback) $("mydiv").load("/url.ashx", {val: 1}, myfunc) $("mydiv").load("/url.ashx?val=1", myfunc)
Get & Post $.get(url, parameters, callback) $.post(url, parameters, callback) $.getJSON(url, parameters, callback) $.getJSON("/url.ashx", {val: 1}, function(data) { alert(data); })
Ajax events ajaxStart ajaxStop ajaxSend ajaxComplete ajaxSuccess ajaxError
$('<div id="loading"><img src="indicator.gif">
</div>').hide().ajaxStart(function() {
$(this).show(); }).ajaxStop(function() {
$(this).hide(); }).appendTo("#container");
$("<div class='foo'>I'm foo!</div> <div>I'm not</div>").filter(".foo").click(function() {
alert("I'm foo!"); }).end().appendTo("#parent");
jQuery UIhttp://jqueryui.com
Form pluginhttp://plugins.jquery.com/project/form
More and more…http://plugins.jquery.com
50+ amazing exampleshttp://www.noupe.com/jquery
jQuery in actionhttp://www.manning.com/bibeault