J Query - Your First Steps
Download as PPTX, PDF0 likes989 views
The document provides an introductory guide to jQuery, covering topics such as adding jQuery to a webpage, the importance of loading it after the DOM is ready, and how to use basic selectors and events. It includes code examples for implementing various effects, such as hiding, showing, sliding, and fading elements, along with chaining techniques. Additionally, it points to resources for further learning and encourages engagement with a WordPress meetup group.
J Query - Your First Steps
- 1. jQuery:Love at first sight...or site!Bronson Quicksennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
- 2. What we’ll coverThe basicsA brief intro into the jQuery including: Adding jQuery to a web page Calling jQuery after the DOM has loaded Basic selectors Basic events & callback functions ChainingSlide 2 of 14rethink | redesign | results
- 3. Adding jQueryGive it to me jQuery! Uhuh, Uhuh!Use Google’s CDN<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>Given the number of pages using jQuery these days there is a good chance that jQuery will be already cached on the users browser.Speed up the page load time!See if it’s working:$('<p>Oh god yes!</p>').appendTo('body');Before we use get to fool around with the awesomeness that is jQuery we have to tell the browser what we’re talking ‘about!Locally or from a CDNWhere is your page going to be viewed? Locally (Offline)
- 4. Online
- 5. Highly secured networkOnce you know the environment then you will know if you have to ship your app/page with jQuery or if you can use a Content Delivery Network (CDN).Slide 3 of 14rethink | redesign | results
- 6. Using jQueryI was used!Use Google’s CDN<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>Given the number of pages using jQuery these days there is a good chance that jQuery will be already cached on the users browser.Speed up the page load time!Before we can add some jQuery sexiness we need to let the browser know that we are going to do something!The long way$(document).ready(function(){ alert(‘The world is a vampire!’);});The ‘quick’ way$(function(){ alert(‘The world is a vampire!’);});Slide 4 of 14rethink | redesign | results
- 7. SelectorsID, classes & elementsGet element by class name<ul><li class="awesome">Google Search</li><li class="awesome">Google Docs</li><li>Google Chrome</li></ul>$(function(){ $(“.awesome").css({ 'backgroundColor':'#652D90', 'color': '#fff' });});<div id=“yo”><p>I like stuff. Do you like stuff?</p></div>Get an element by ID$(function(){ $("#yo").css({ 'backgroundColor':'#652D90', 'color': '#fff' });});Slide 5 of 14rethink | redesign | results
- 8. SelectorsID, classes & elementsPseudo class selectors<table><tr><td>I'm even!</td></tr><tr><td>I'm odd!</td></tr><tr><td>I'm even!</td></tr><tr><td>I'm odd!</td></tr></table>$(function(){ $("td:even").css({ 'backgroundColor':'#652D90', 'color': '#fff' });});<h1>I am a heading!</h1>$(function(){ $(“h1").css({ 'backgroundColor':'#652D90', 'color': '#fff' });});Remember:This will get all HTML elements on the page so if you had multiple <h1>’s this change would apply to all of them.A great list of pseudo class selectorshttp://css-tricks.com/pseudo-class-selectors/Slide 6 of 14rethink | redesign | results
- 9. EventsLets interact with somethingSome handy events.click().dblclick().focus().keypress().mouseover().hover()<h1>I am a heading!</h1>$(function(){ $("h1").click(function(){ $(this).css({ 'backgroundColor':'#652D90', 'color': '#fff' }); });});The full list of eventshttp://api.jquery.com/category/events/Slide 7 of 14rethink | redesign | results
- 10. EffectsPeek a boo!Fast, slow or milliseconds.hide(‘fast’);.hide(‘slow’);.hide(4000);$(function(){ $("#hide").click(function(){ $("h1").hide('fast'); }); $("#show").click(function(){ $("h1").show(‘slow’); });});<h1>I am a heading!</h1><a href=“#” title=“Hide heading” id=“hide”>Hide heading</a><a href=“#” title=“Show heading” id=“show”>Show heading</a>$(function(){ $(“#hide”).click(function(){ $(“h1”).hide(); }); $(“#show”).click(function(){ $(“h1”).show(); });});Slide 8 of 14rethink | redesign | results
- 11. EffectsSlide up, slide down, toggleFast, slow or milliseconds$(function(){ $(“#up”).click(function(){ $(“#box”).slideUp(‘fast’); }); $(“#down”).click(function(){ $(“#box”).slideDown(‘slow’); });});<div id=“box”>I’m a box!</div><a href=“#” title=“Slide up” id=“up”>Slide up</a><a href=“#” title=“Slide down” id=“down”>Slide down</a>$(function(){ $(“#up”).click(function(){ $(“#box”).slideUp(); }); $(“#down”).click(function(){ $(“#box”).slideDown(); });});Slide 9 of 14rethink | redesign | results
- 12. EffectsI’m fading away to nothing!Fast, slow or milliseconds$(function(){ $(“#in”).click(function(){ $(“#box”).fadeIn(‘slow’); }); $(“#out”).click(function(){ $(“#box”).fadeOut(‘fast’); });});<div id=“box”>I’m a box!</div><a href=“#” title=“Fade In” id=“in”>Fade In</a><a href=“#” title=“Fade Out” id=“out”>Fade Out</a>$(function(){ $(“#in”).click(function(){ $(“#box”).fadeIn(); }); $(“#out”).click(function(){ $(“#box”).fadeOut(); });});The full list of effectshttp://api.jquery.com/category/effects/Slide 10 of 14rethink | redesign | results
- 13. ChainingAlice in Chains!<div id="box">I'm a box!</div><a href="#" title="Chaining” id="chain">Chained</a>$(function(){ $("#chain").click(function(){ $("#box").fadeOut('slow').fadeIn(4000).slideUp(); });});Slide 11 of 14rethink | redesign | results
- 14. LinksSome useful jQuery linkshttp://jquery.com/http://api.jquery.com/http://jqueryui.com/Slide 12 of 14rethink | redesign | results
- 15. Thanks & QuestionsBlatant plug for our WordPress Meetup groupWordPress Brisbanehttp://www.meetup.com/WordPress-BrisbaneSlide 13 of 14rethink | redesign | results