The document discusses the advantages of using jQuery to simplify DOM manipulation and handle cross-browser compatibility issues. It provides code examples demonstrating various jQuery functionalities, including event handling, attribute manipulation, animations, and AJAX interactions. Additionally, it highlights the importance of separating behavior, structure, and style in web development.

1. Diego Guidi - DotNetMarche

3. DOM tree is clunky to use
No multiple handlers per event
No high-level functions
Browser incompatibilities
= jQuery to the resque!

5. • 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 support
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

6. 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
}

7. $('fieldset.collapsible legend').each(function()
{
... // Do your job
});
$("table tr:nth-child(odd)").addClass("striped");

8. Separate behavior from structure
and style
• HTML => structure
• CSS => style
• JS => behavior

9. <button
type="button"
onclick="alert('behavior!');">
MyBehavior
</button>

10. <script type="text/javascript">
window.onload = function()
{
document.
getElementById('mybutton').
onclick = behavior;
};
function behavior()
{
alert('behavior!');
}
</script>

11. $(document).ready(function()
{
$("#mybutton").
bind('click', function(ev)
{
alert('behavior!');
});
});
document.ready != pageLoad
http://encosia.com/2009/03/25/document-ready-
and-pageload-are-not-the-same

12. 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')

13. 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]')

14. 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

16. 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()

17. $("#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)

18. Unified method for establishing event handlers
Multiple 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")

19. 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)

20. 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});

21. $("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);
}

22. 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

23. $('<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");

24. jQuery UI
http://jqueryui.com
Form plugin
http://plugins.jquery.com/project/form
More and more…
http://plugins.jquery.com
50+ amazing examples
http://www.noupe.com/jquery
jQuery in action
http://www.manning.com/bibeault