Your SlideShare is downloading. ×
0
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Beginning jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beginning jQuery

2,927

Published on

Updated with new exercises - March 2014. Introduction to jQuery (for journalism students) and review of the Code School "Try jQuery" course, Parts 1-3.

Updated with new exercises - March 2014. Introduction to jQuery (for journalism students) and review of the Code School "Try jQuery" course, Parts 1-3.

Published in: Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,927
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
28
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida. UpdatedMarch 2014. COURSE http://try.jquery.com/
  • SOURCE http://jquery.com/
  • SOURCE http://learn.jquery.com/
  • SOURCE https://developers.google.com/speed/libraries/
  • (1) http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ (2) http://stackoverflow.com/questions/1013112/where-should-i-declare-javascript-files-used-in-my-page-in-head-head-or-nea (3) http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ And -- http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jqueryAnd -- http://www.impressivewebs.com/linking-to-jquery/
  • Note the use of a separate folder (directory) to store all JS files. Usually it will be named /scripts/ or /script/. Like an /images/ folder and a /css/ folder, this is standard professional practice for organizing a website’s files and folders in a logical, maintainable way. THE FILE EXTENSION MUST BE .js
  • The stuff above and below the dashed lines is essential, necessary, required. The part that is highlight in YELLOW. All the jQuery must appear BETWEEN those two lines.
  • SOURCE http://try.jquery.com/
  • LINK https://github.com/macloo/jquery_beginners
  • Exercises 1 and 2 in the JS file
  • Exercise 3 in the JS file
  • Exercise 4 in the JS file
  • Append: Within a DIV (or any node) with the class “vacation,” price will be inserted at the end, inside that DIV. Prepend is also inside, but at the top. Before is immediately before the DIV, outside it. After is also outside.
  • appendTo: Within a DIV (or any node) with the class “vacation,” price will be inserted at the end, inside that DIV. prependTois also inside, but at the top. insertBefore is immediately before the DIV, outside it. insertAfter is also outside.
  • SEE live version - http://macloo.github.io/jquery_beginners/adding_things.html
  • Exercise 5 in the JS file
  • Exercise 6 in the JS file
  • An example of the keyword this.
  • Making HTML tables more usable and dynamic is a very common use of jQuery. DOWNLOAD tablesorter.js from http://tablesorter.com/docs/
  • Linked files were copied from "JavaScript: Visual QuickStart Guide, 8th Edition," chapter 15, for demonstration purposes. http://www.peachpit.com/store/javascript-visual-quickstart-guide-9780321772978 http://www.javascriptworld.com/
  • A good jQuery book: http://www.sitepoint.com/store/jquery-novice-to-ninja-new-kicks-and-tricks/
  • CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida. Updated March 2014.
  • Transcript

    • 1. Beginning jQuery Review of the Code School course “Try jQuery” (parts 1–3)
    • 2. What is jQuery? • jQuery is JavaScript library • A “library” in code is the same as the “modules” you used in Python – You import the module, which contains a lot of functions – Then you can “call” (use) those functions in your code • The entire library is written in JavaScript
    • 3. Lots of resources — http://learn.jquery.com/
    • 4. How can you include jQuery in your own Web pages?
    • 5. Step 1: Include a link to jquery.min.js in the HEAD of each HTML file. (Note the Google URL.)
    • 6. Frequently asked questions 1. Why use the jQuery file hosted at Google? You don’t need to download jquery.js, and since many websites do it this way, the file might already be cached by the user’s browser. 2. Why put the SCRIPT tag in the HEAD and not the BODY? There is always a debate about this, including an assertion that the page loads faster if the SCRIPT tag is at the bottom, right before the closing </body> tag. Others say all SCRIPT tags should be in the HEAD. 3. Why start the URL with http:// instead of // alone? You’ll see many pages that leave off the http: in the SCRIPT tag for Google’s jquery.js. This works on a Web server but not locally, when the files are on your hard drive.
    • 7. Step 2: Include a link to your own .js file in the HEAD of the HTML file. Place it after the Google jQuery link.
    • 8. Step 3: Write your own .js file correctly (so it works!).
    • 9. A well-organized website uses folders.
    • 10. What you need to get started 1. An HTML document – With a link to Google’s latest jquery.min.js file – With a link to your own .js file 2. A JavaScript document or file of your own – With all the jQuery code between: $(document).ready(function(){ // and });
    • 11. Review of Levels 1–3 http://try.jquery.com/
    • 12. Download the exercise files! https://github.com/macloo/ jquery_beginners [link]
    • 13. Calling jQuery with $ • Any code statement or instruction that uses jQuery uses the character “$” • This will find the text enclosed in H1 tags: $("h1").text(); • This will change the text enclosed in H1 tags: $("h1").text("ABC123"); It will change all H1 tags on the page. Exercises 1 & 2
    • 14. Find, change an ID or a class $("#wrapper"); // find the ID wrapper $(".item"); // find the class item $("#wrapper").append("<p>Hooray!</p>"); $(".item").append("<p>Hooray!</p>"); Quotation marks may be single or double. Exercise 3
    • 15. Searching the DOM $("#destinations li"); Selects only the LI tags inside the element with the ID “destinations.” (In the example, the element is a UL.) This would also include all LI tags inside any nested list that was inside the “destinations” list. $("#destinations > li"); Selects only “direct descendants.” The greater-than sign limits this to only the LIs that are direct children of the ID “destinations.” No LIs in any nested lists will be affected.
    • 16. Searching the DOM (2) $("#destinations li:first"); $("#destinations li:last"); $("#destinations li:odd"); $("#destinations li:even"); These are called “pseudo classes.” They select just what they say. Can be used to style tables dynamically, for example. Exercise 4
    • 17. “Traversing” the DOM $("#tours").find("li").last(); $("#tours").find("li").first().next(); $("#tours").find("li").first().parent(); This one goes “up” the DOM to find the direct parent of the first LI. $("#tours").children("li"); This finds only the LIs that are the direct children of the list with the ID “tours.”
    • 18. Summary of Levels 1 & 2 • We can use jQuery to target an element that has an ID or a class in the HTML: "#wrapper", ".photo", etc. • We can use jQuery to target any element, using its tag or selector: "h1", "p", "div", etc. • We can use jQuery to “walk” up and down the DOM: next(), first(), parent(), etc.
    • 19. Level 3: Changing things .append(x) // at end, inside .prepend(x) // at top, inside .before(x) // at top, outside .after(x) // at end, outside Example: $('.vacation').append(price); Inside the element with the class vacation, at the bottom, add the value of price. (Hint: price is a variable!)
    • 20. Changing things (2) .appendTo(x) // end, inside .prependTo(x) // top, inside .insertBefore(x) // top, outside .insertAfter(x) // end, outside Example: price.appendTo($('.vacation')); Inside the element with the class vacation, at the bottom, add the value of price. open file adding_things.html
    • 21. Changing things (3) $('button').remove(); We can use jQuery to completely remove an element from the HTML page. In the example at Code School, when we click the button, the button disappears and is replaced by a price. (Note: It will be gone forever.)
    • 22. A function in jQuery $('button').on('click', function() { // some code here }); This function doesn’t have a name. It calls itself when someone clicks the button. Whatever code you write in the middle will run every time the button (any button) is clicked.
    • 23. A function in jQuery (2) $('.choice').on('click', function() { // some code here }); This function is exactly the same as the previous one, but instead of using the name of the HTML tag (button), here we use a class assigned to that button (.choice). Exercise 5
    • 24. The keyword this • When you write a function, often you want it to work for more than one thing. • Example: You want to build a slideshow with a thumbnail image for each photo. Click a thumbnail, and the photo changes. • How can you use the same function for every thumbnail and photo in the set? Exercise 6: open file photos.html
    • 25. $('.big').hide(); var current = $('#pics').find('.big').first(); $(current).show().addClass('view'); $('#pics').before(current); // see below $('.thumb').on('click', function() { $(current).remove(); current = $(this).prev(); $('#pics').before(current); // see below $(current).show().addClass('view'); }); // $(z).before(x) - x at top, outside z Exercise 6
    • 26. When we move an element in the DOM, it really moves. It isn’t in the same place, even though your source HTML does not change. (This is kind of weird.) The large photo disappears from the DOM after it is removed.
    • 27. A little jQuery excitement! • Tablesorter is a free jQuery plugin that helps you make beautiful tables: http://tablesorter.com/docs/#Demo • That’s a fancy demo. Here’s a simpler demo: http://macloo.github.io/jquery_beginners/script05.html The demo comes from JavaScript: Visual QuickStart Guide (8th ed.), chapter 15 [ link ]
    • 28. Beginning jQuery Mindy McAdams University of Florida March 2014

    ×