J Query - Your First Steps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

J Query - Your First Steps

on

  • 1,761 views

A basic intro into jQuery talk I prepared for a Meetup.com talk. You can grab the code here: http://www.sennza.com.au/jQuery-intro.zip

A basic intro into jQuery talk I prepared for a Meetup.com talk. You can grab the code here: http://www.sennza.com.au/jQuery-intro.zip

Statistics

Views

Total Views
1,761
Views on SlideShare
1,761
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

J Query - Your First Steps Presentation Transcript

  • 1. jQuery:
    Love at first sight...or site!
    Bronson Quick
    sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza
  • 2. What we’ll cover
    The basics
    A 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
    Chaining
    Slide 2 of 14
    rethink | redesign | results
  • 3. Adding jQuery
    Give 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 CDN
    Where is your page going to be viewed?
    • Locally (Offline)
    • 4. Online
    • 5. Highly secured network
    Once 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 14
    rethink | redesign | results
  • 6. Using jQuery
    I 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 14
    rethink | redesign | results
  • 7. Selectors
    ID, classes & elements
    Get 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 14
    rethink | redesign | results
  • 8. Selectors
    ID, classes & elements
    Pseudo 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 selectors
    http://css-tricks.com/pseudo-class-selectors/
    Slide 6 of 14
    rethink | redesign | results
  • 9. Events
    Lets interact with something
    Some 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 events
    http://api.jquery.com/category/events/
    Slide 7 of 14
    rethink | redesign | results
  • 10. Effects
    Peek 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 14
    rethink | redesign | results
  • 11. Effects
    Slide up, slide down, toggle
    Fast, 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 14
    rethink | redesign | results
  • 12. Effects
    I’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 effects
    http://api.jquery.com/category/effects/
    Slide 10 of 14
    rethink | redesign | results
  • 13. Chaining
    Alice 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 14
    rethink | redesign | results
  • 14. Links
    Some useful jQuery links
    http://jquery.com/
    http://api.jquery.com/
    http://jqueryui.com/
    Slide 12 of 14
    rethink | redesign | results
  • 15. Thanks & Questions
    Blatant plug for our WordPress Meetup group
    WordPress Brisbane
    http://www.meetup.com/WordPress-Brisbane
    Slide 13 of 14
    rethink | redesign | results
  • 16. bronson@sennza.com.au
    http://www.sennza.com.au/
    http://www.youtube.com/user/BronsonQuick
    Twitter: @sennza
    rethink | redesign | results