See also .removeClass()
Basic jQuery
jQuery provides an independent scheduling point after DOM is created and before images are loaded
$(document).ready(doEmph);
Body “onLoad” waits until all images etc are loaded.
Tedious.
No HTML mods for Javascript required. All done
in jQuery.
jQuery Syntax
$.func(…); or
$(selector).func1(…).func2(…).funcN(…);
$ jQuery Object, can be used instead of jQuery
selector Selector syntax, many different selectors allowed func Chainable, most functions return a jQuery object (…) Function parameters
jQuery Selectors
$( html )
Create DOM elements on-the-fly from the provided String of raw HTML. $(‘
I’m a paragraph!
’)
$( expression context )
This function accepts a string containing a CSS or basic XPath selector which is then used to match a set of elements. Default context is document. Used most often for DOM transversal. Selectors will return a jQuery object, which can contain one or more elements, or contain no elements at all.
$( elems )
Wrap jQuery functionality around single or multiple DOM Elements. $(document), $(window), or $(this)
$( fn )
A shorthand for $(document).ready(), allowing you to bind a function to be executed when the DOM document has finished loading. $(function() { alert(“Hello, World!”) })
jQuery CSS Selectors
CSS Element - $(“p”), $(“li”), $(“input”), etc Id - $(“#content”) Class - $(“.brandnew”) Element with an Id - $(“p#content”) Any Descendent - $(“ p a”) Direct Child - $(“p > a”)
jQuery XPath Selectors
XPath Paths - /html/body//div Anchor with an href attr - a[@href] Div with an Ol inside - div[ol] Any anchor with a specific value for the ref attribute //a[@ref='nofollow']
jQuery Selector Example
$(“p span”).css({color: "red"});
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on.
View Example
jQuery Filters
First paragraph - p:first Last list item - li:last Fourth link - a:nth(3) Fourth div - div:eq(3) Every other paragraph - p:even or p:odd Every link after the 4th or up to the 4th - a:gt(3) or a:lt(4) Links that contain the word click - a:contains(‘click’) All radio inputs within the first form - $("input:radio", document.forms[0])
jQuery Filter Example
$(“li:even”).css({background:“gray”});
- First item
- Second item
- Third item
- Fourth item
- Fifth item
View Example
Remember the first object number is “0, “even” would apply to “First item”, “Third Item”, etc
jQuery Core Functions
Change element attributes – attr(key, value) Append content inside elements - .append( content ) Prepend content inside elements - .prepend( content ) Place content after elements - .after( content ) Place content before elements - .before( content ) Sets the text of an element(s) – text( content ) Set the html contents to the specified value - html (
content ) Get the value of an input field – val()
jQuery Core Example
$("#more").before("Introduction.").after("Conclusion.");
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on. Oh wait, here's another span.
View Example
jQuery Events
bind(eventname, function) method ‘click’ ‘change’ ‘resize’ $(“a[@href]”).bind(‘click’,function(){
$(this).addClass(‘red’);}) You can use shortcut methods too …
$(“a”).click(function () { alert(‘hello’);})
jQuery Event Example
$(“span”).mouseover(function(){ $(this).css({background:“red”});});
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on. Oh wait, here's another span.
View Example
jQuery Effects
Show the matched element(s) - .show(speed , callback);
Where speed is ‘slow’, ‘normal’ or ‘fast’
Hide the matched element(s) - .hide();
Slide-show the matched element(s) - .slideDown();
Fade in the matched element(s) - .fadeIn(); Any animation , animate( params , speed , easing ,
callback ),
$("p").animate({ opacity: ‘1.0' }, "slow", “linear");
jQuery Effects Example
$("span:nth(1)").fadeIn("slow").css("background","silver");
This is the first sentence of the paragraph. This is the remainder of the paragraph that goes on and on and on. Surprise, here's another span.
View Example
jQuery & AJAX
jQuery has a series of functions which provide a
common interface for AJAX, no matter what browser you are using. Most of the upper level AJAX functions have a common layout:
$.func(url[,params][,callback]), [ ] optional
url: string representing server target params: names and values to send to server callback: function executed on successful communication.
jQuery AJAX Functions
$.func(url[,params][,callback])
$.ajax, $.ajaxSetup
$.get $.getJSON $.getIfModified $.getScript $.post
$(selector), inject HTML
load loadIfModified
$(selector), ajaxSetup alts
ajaxComplete ajaxError ajaxSend ajaxStart ajaxStop ajaxSuccess
async beforeSend complete contentType data dataType error global ifModified processData success timeout type url
Example – Ajax with jQuery
$.get(“ajax.php", {st: "yes", f: $(this).attr("ID")} );
Example – Form Validation
Requires the Validate plug-in … http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js
View Example
jQuery – UI plug-in
jQuery offers an plug-in extension that adds many other
useful User Interface effects
Interactions Add rich behaviors like drag and drop, resizing, selection and sorting to any element. Draggable , Droppable , Resizable , Selectable , Sortable Widgets Drop full-featured UI controls — each has a range of options and is fully themeable. Accordion , Datepicker , Dialog, Progressbar , Slider , Tabs Effects Create animated transitions and easing with this set of pre-built effects. Effect, Show, Hide, Toggle, Color animation, Add class, Remove class, Toggle class, Switch class
jQuery - Slideshow
View the slide show
jQuery Games?
http://jonraasch.com/blog/jQuery-video-game-
remake-tc-surf-designs
Around 300 lines of code
jQuery Resources
Project website
http://www.jQuery.com
Learning Center
http://docs.jQuery.com/Tutorials
Documentation
http://docs.jQuery.com/Main_Page
jQuery Success Stories
http://docs.jQuery.com/Sites_Using_jQuery
Web Applications 101 links
http://www.meetup.com/Web-Applications-101/ http://pakt.com/webapps101/jquery/intro/