Jquery

299 views

Published on

Websites: https://www.designveloper.com
Visit our blog: https://www.designveloper.com/blog
Like Facebook page: https://www.facebook.com/designveloper/
Youtube: http://bit.ly/29PTtFS

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
299
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery

  1. 1. Designveloper JQUERY Write less, do more
  2. 2. Jquery ▪ jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. (jQuery.com) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  3. 3. Documentation & Support  API: api.jquery.com  Forum: forum.jquery.com  IRC: irc.freenode.net, #jquery  http://www.codecademy.com/en/courses/you- and-jquery/0/1  https://www.codeschool.com/courses/try- jquery Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  4. 4. Simple Concept ▪ Find something ▪ Do something Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  5. 5. FIND SOMETHING “select” elements in document
  6. 6. Find something Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  7. 7. Find something // id selector var elem = $("#myid"); // group selector var elems = $("#myid p"); // context selector var elems = $("#myid > div p"); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  8. 8. jQuery / javascript comparison Javascript jquery getElementById(“id”) $(“#id”) getElementByClassName(“class”) $(“.class”) getElementByName(“somename”) $(“[name=„somename‟]”) getElementByTagName(“tag”) $(“tag”) querySelector(“selector”) $(“selector”) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  9. 9. Do something
  10. 10. Do something 1.Let elements "listen" for something to happen  the document is ready  user does something  another "listener" acts  a certain amount of time elapses Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  11. 11. Do something 2.… and then do something  Manipulate elements  Animate elements  Communicate with the server Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  12. 12. Dev Tools
  13. 13. Text Editors ▪ Eclipse / Aptana ▪ Notepad++ ▪ Visual Studio ▪ NetBean ▪ and so on. Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  14. 14. Firefox: firebug ▪ Console ▪ DOM Viewer ▪ JavaScript debugger ▪ Net view ▪ Lots of extensions http://getfirebug.com/wiki/index.php/Firebug _Extensions Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  15. 15. Chrome Developer tools ▪ In many ways, leapfrogging Firebug ▪ Live debugging, code changing ▪ Lots of "hidden" goodies ▪ http://code.google.com/chrome/devtools/ ▪ Paul Irish screencast: http://youtu.be/nOEw9iiopwI Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  16. 16. The Basic Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  17. 17. The basic ▪ Strings: textual content. wrapped in quotation marks (single or double). ▪ Numbers: integer (2) or floating point (2.4) ▪ Booleans: true or false Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  18. 18. The basic ▪ Arrays: simple lists. indexed starting with 0 – ['Karl', 'Sara', 'Ben', 'Lucia'] – ['Karl', 2, 55] – [ ['Karl', 'Sara'], ['Ben', 'Lucia']] ▪ Objects: lists of key, value pairs – {firstName: 'Karl', lastName: 'Swedberg'} – {parents: ['Karl', 'Sara'], kids: ['Ben', 'Lucia']} Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  19. 19. The basic ▪ Always declare your variables! ▪ If you don't, they will be placed in the global scope . –bad: myName = 'Karl'; –good: var myName = 'Karl'; –still good: var myName = 'Karl‟, myName = 'Joe'; Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  20. 20. The basic ▪ conditionals: – if, else – switch ▪ operators: – +, -, *, %, ++, -- – >, <, ==, !=, >=, <=, ===, !== – !, &&, || Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  21. 21. The basic LOOP ▪ The two most common loops... – for loops — for general-purpose iteration. Used with arrays or array-like objects) – for-in loops — used with arrays or objects (but don't use with arrays) ▪ The other two are... – while loops – do-while loops Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  22. 22. function
  23. 23. function ▪ Functions allow you to define a block of code, name that block, and then call it later as many times as you want. – function myFunction( ) { /* code goes here */ } // defining – myFunction( ) // calling the function myFunction Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  24. 24. function ▪ You can define functions with parameters –function myFunction(param1, param2 ) { /* code goes here */ } ▪ You can call functions with arguments: –myFunction('one', 'two') Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  25. 25. Install
  26. 26. Download http://jquery.com/download/ <script src="//code.jquery.com/jquery- 1.11.0.min.js"></script> Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  27. 27. Tips
  28. 28. Tips ▪ Store selectors used more than once in variables ▪ Use length property to check existence – ...but often no need for the check ▪ var listItems = $('li'); ▪ var numItems = $listItems.length //no need for length check $listItems.addClass('pretty'); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  29. 29. Tips Concatenate to pass in a variable $('#menu li').each(function(index) { $(this).click(function() { $('#footer li:eq(' + index + ')').addClass('active'); }); }); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  30. 30. Tips ▪ Avoid jQuery's custom selectors when possible // bad $(':checkbox') // better $('input:checkbox') // best $('input[type="checkbox"]') Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  31. 31. Tips // uncool $('div:first') // cool $('div').first(); Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  32. 32. Tips // slower $('li:eq(3)') $('li:lt(3)') // faster $('li').eq(3) $('li').slice(0, 3) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  33. 33. The end Thank you for listening Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

×