SlideShare a Scribd company logo
1 of 84
Download to read offline
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8
Introduction to jQuery at Barcamp London 8

More Related Content

Featured

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Featured (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Editor's Notes

  1. So that’s the official stuff.
  2. But in basic terms, why would we want to use jQuery?
  3. But in basic terms, why would we want to use jQuery?
  4. But in basic terms, why would we want to use jQuery?
  5. But in basic terms, why would we want to use jQuery?
  6. But in basic terms, why would we want to use jQuery?
  7. Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  8. Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  9. Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  10. Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  11. Even if you’ve never seen jQuery before, it’s not hard to see what this code does.
  12. CSS selectors
  13. CSS selectors
  14. CSS selectors
  15. CSS selectors
  16. works with any CSS & CSS3 selectors
  17. works with any CSS & CSS3 selectors
  18. Events - docs are superb reference
  19. Events - docs are superb reference
  20. When binding an event to multiple items (say a list of items) it’s far more efficient to use jQuery’s delegate() function and bind it to the parent of those items - so if anyone is feeling adventurous have a look on the docs and try it out!
  21. Hover function takes 2 arguments
  22. So this is again pretty straight forward - next() is one of many traversal functions. slideToggle() will slide an element into view if it was hidden, or slide it out of view if it was showing. This solves us having to check manually.
  23. Often we may want to stop the link taking the user to a URL if we’re doing JS stuff, so jQuery lets us stop the link doing what it should, by passing in the current event (often use ‘e’) to the function and then stopping the default action
  24. Wait for the document to be ready before we execute any JS
  25. This is identical, just saves a few bytes
  26. So we’ve got our code ready to run when ready, written a nice function to toggle a link, what do we need to do? Include jQuery
  27. So we’ve got our code ready to run when ready, written a nice function to toggle a link, what do we need to do? Include jQuery
  28. You can be specific or not with the version number
  29. Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  30. Animate is incredibly powerful and also very clever - passing in ‘500px’ as width is no issue, it happily figures it all out. Any CSS property that can be animated can be used. By default you can not animate colours with this, but there is a plug in which does it. The callback function will be run once the animation is done, most the effect functions in jQuery let us pass in a callback, and also the speed in milliseconds. There are also some predefined: “slow”, “normal” and “quick”.
  31. Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  32. Just like animate CSS() takes any css property and changes it
  33. This is fine for a few properties but for many it’s better just to create a class in your CSS and add the class. Note you do NOT put the “.” in.
  34. Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  35. Wrap does what you imagine in this case it will wrap an anchor around all imgs. When creating a new element (more on that soon) you can just use <tag /> and jQuery does the rest.
  36. Mention that fadeToggle() has been added as of 1.4.4 - ie a few days ago
  37. You can also add text to this element or edit its inner HTML. text() and html() are jQuery methods that can edit the text or HTML of the element (covering them shortly). So do not put quotes around them. Obviously in real life you would never set both - one or the other
  38. You can also bind events - although as mentioned earlier this way CAN be incredibly in-efficient.
  39. And now we need to add our new div to the page.
  40. We can’t cover them all - the idea is that you see just how much this library can do.
  41. Get current object using $(this)
  42. Because there’s only 3 we’ll go into each one - text() and html() have a difference that is very important
  43. Give it a second parameter and it sets the attribute, only give it the first and it gets it.
  44. text() is useful not only for setting text but for the fact that it strips all HTML out of the content of an element when it gets it. If you add HTML tags when setting text they are escaped.
  45. Give it a second parameter and it sets the attribute, only give it the first and it gets it.
  46. Only got time to go over this really quickly.
  47. In the success function the variable you pass in, in my case ‘d’ will reference the object returned by the Ajax request. Remember that JSON is not cross domain.
  48. Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  49. Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  50. Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  51. Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  52. Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.
  53. Just in case you had not got the message - jQuery’s docs are superb and one of the main reasons it is so popular.