Starting with jQuery


Published on

What is Web Browser, What is DOM, How Events are managed, Event Propagation, jQuery Selectors, jQuery use, jQuery power

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Starting with jQuery

  1. 1. Starting with jQuery -Anil Kumar Executive Member SSS & Educational Society
  2. 2. jQuery(“.jQuerySessionAttendee”).append(“jQuery Expert ! ”); <h2>Greetings</h2> <div class=“DeveloperDay”> <div class=“SQLSessionAttendee”>Lokesh</div> <div class=“jQuerySessionAttendee”>Anil </div> <div class=“jQuerySessionAttendee”>Abhishek</div> … … <div class=“jQuerySessionAttendee”>Pradeep</div> <div class=“jQuerySessionAttendee”>Shrawan</div> </div> Greetings 2
  3. 3. Anil Kumar Social Executive and a programmer by passion Microsoft’s Asp.Net community contributor Member – Career Advice Expert Panel, C#Corner Blogger at : C#Corner , C#Corner MVP Who am I ? 3
  4. 4. Session 1 Introduction, using or installing, understanding Ready function, DOM, Selectors, Basic Events Session 2 Events and CSS manipulation (animation) Session 3 Asynchronous mechanism and practices Session 4 How to write Plugins , Discussing open source useful plugins Learning Resolution 4
  5. 5. Understanding Browsers Understanding DOM What is JavaScript Events and propagation handling Introduction to jQuery Understanding Selectors Start Coding with jQuery [Demo] with jsFiddle Agenda 5
  6. 6. An application for fetching data from server, presenting it with traversing facility Capable o listen users activities and response First browser created in 1990, and in 1993 innovated more as Mosaic(later known as Netscape). In 1995, Microsoft came with IE Famous browsers Chrome, IE, Firefox, Safari, Opera Support HTML, XHTML and provide facility of Cache, Cookies Each Browser bundled with their vendor specific scripting language with extra functionality (in competition of each other)to attract users Understanding Browser 6
  7. 7. All Browsers are not same in terms of Features and commands ex.- ActiveX object works in IE but not in others!!! We don’t know which Browser user will use and so which scripting language. Cross Browser Compatibility issue arises in use of Scripting languages . Whether it is JScript or JavaScript, jQuery take the role for handling this issue. Different Browser, Different Scripting 7
  8. 8. It is the base script that get executed by Browser Created by Netscape as “LiveScript” for their browser version 2.0. Later they renamed it with "Java Script". Dynamic Type support Runtime Evaluation What is JavaScript ? 8
  9. 9. Host computer resources can’t be access (except cookies) Follow same origin policy (jQuery uses JSONP to avoid same origin policy) File upload value is not handled Limitations of JavaScript 9
  10. 10. Well written & Tested functions by experts Many libraries have documents on how to use There are many popular JavaScript Libraries- jQuery Mootools Prototype Dojo Toolkit Ext ….. And many more…. What is JavaScript Library 10
  11. 11. Understanding DOM I have taken this image from, you can find more there to understand 11
  12. 12. DOM – Document Object Model (Hierarchical structure of our web-page) A Web Page is basically a tree structure in terms of nodes & attributes Node? Each HTML element is treated as a node and these nodes can have many attributes On the fly, we can add, delete DOM elements change the properties of DOM elements Browsers are programmed to recognize the user actions like page loading, clicking, mouse movement etc. We write programs to respond these events Key Concepts 12
  13. 13. Multiple event listeners can be assigned on an element Execution order of these listeners can’t be relied When triggered, the event propagates From top to down (capure phase) From bottom to up (bubble phase) Browser vendors handle event propagation in different way ex.- IE doesn’t supports capture phase Browsers as Event Listeners 13
  14. 14. Solve your all problems Your coding Chores What jQuery Will Not Do 14
  15. 15. Documentation, Resource availability and community support Evolution : Continuous upgrade and bug removal by dedicated team Lightweight Open Source Free Developed by John Resig in 2005 and released in 2006 jQuery Introduction 15
  16. 16. Much easier to use compare to JavaScript Cross Browser compatibility Simplifies AJAX development Lightweight Now supported by Microsoft also A lot of third party Plugins available Support Unobtrusive JavaScript Separation of style from Behavior (CSS) Free Why jQuery ? 16
  17. 17. Event handling of HTML element Usage of Common Utilities written in jQuery Easy AJAX calls with flexible options (raw Ajax with many customized APIs) CSS handling Applying effects and animations DOM/Html elements manipulations DOM traversal and modifications DOM filtering APIs Use of Chaining and Call-back functionality Access to third parties well written/developed plug-ins for more beautification. Multi browser support Power of jQuery 17
  18. 18. Re-usable jQuery code? Create own package of it. It is now a Plugin because it will run on plug into jQuery core. There are many thousands famous free plugins from experts over the internet. What is jQuery Plugin? 18
  19. 19. Simplicity Flexibility Maintainability Power Why so popular 19
  20. 20. MooTools (Created by Valerio Proietti and released in September 2006. It has gained much popularity due to its plugins. Bing and Joomla are using this library framework. Its Plugins are widely being used on Wordpress blogging platform. It is little bit harder to use as compare to jQuery) Prototype (Created by Sam Stephenson in February 2005 for Ajax support in "Ruby on Rails" . It supports XMLHttpRequest protocol that reduce entire webpage reload at browser for dynamic web pages. Ex. used in Ruby on Rails) Dojo Toolkit (Created by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004. This library is providing much more than other libraries in terms of Classes, Constructors, and inheritance in JavaScript. It is also gaining more popularity since it's released from 2004/05 year. It comes with 3 components: Dojo core, Dijit and DojoX. It is little bit harder to use as compare to jQuery) Ext (Created by Jack Slocum in 2008 as an add-on library extension of YUI. Now don't have any dependency on other library. This is known for its compatibility with jQuery and Prototype though its syntax is differing. It has predefined UI objects and easily can be called into web pages. This gives rich controls handling like radio buttons, toolbars etc.) (Created by by Thomas Fuchs in June 2005. It is built on the "Prototype JavaScript Framework" and has very rich set of effects functionality. Used on Ruby on Rails platform.) Few Other Popular Libraries 20
  21. 21. jQuery library file is shipped with Visual Studio. Intelligence is available Microsoft actively contribute to jQuery Templates How Microsoft support? 21
  22. 22. Just reference to its library file and start using. Reference can be given to – Local / self hosted or stored file CDN (Content Delivery Network) How to use it? (setup) <script src=""></script> <script src="Scripts/jQuery.min.js"></script> 22
  23. 23. jQuery(select_Item).CallOrDoSomeOperation(); jQuery(selector, [ context ]) By default context if not provided => DOM var c = $(); alert( $.isEmptyObject(c) ); ================= Output : False jQuery Syntax 23
  24. 24. jQuery functions always return an array like object(even for ID based selectors) => jQuery object. $("#myElementId")[0]; OR $("#myElementId").get(0); If not found matched selectors = > an empty jQuery-object I var emptyJqueryObject = $([]); Some destructive methods like find() and filter() that change the object others returns itself as object Use of returning jQuery Object => method calls can be chained and minimize the code $('div').css ('color','red').find ('.myCSSname').css ('color','yellow'); jQuery Object 24
  25. 25. jQuery =window.jQuery = window.$ = $ There are two variant of jQuery usage- (1) jQuery.fn namespace and (2) jQuery namespace 1) jQuery(context).functioncall (works on jQuery object) 2) jQuery.functioncall (works globally and not on jQuery object, generally all utility functions are accessed in this way) jQuery Notation & Namespaces $('#myDivID').css('color','green').add('p').addClass('myClass').slideDown('down'); $.support.ajax 25
  26. 26. It does not fires until the DOM is ready Its differ with JavaScript’s window.onload which waits for all content to be fully loaded including images. This Document ready events further can be kept on hold by using jQuery hold !!! jQuery Ready function 26
  27. 27. Jquery(function(){…};) jquery().ready(function(){…};) jquery(document).ready(function(){…};); Different style of writing DOM ready 27
  28. 28. Document / Window Events Load , Resize Form Events Submit, Reset, focus, blur change Keyborad Keydown, keypress etc. Mouse Click, dbClick, mouseup, mousedown etc. Important Events 28
  29. 29. Event .target .type .data There are many other properties and we can get their values as well Event properties 29
  30. 30. .stopPropogatioin() .preventDefault() Its better than old fashion: return false; No form submit, no hyperlink etc Advisable Trigger Do you thing it actually triggers the event? No, It just call the appropriate function as called on actual event. Event Method 30
  31. 31. How to Stop normal event actions 31
  32. 32. Selectors play important roles to find or select DOM elements Elements can be selected based on their tagname, ID, classes, attributes, attribute’s value, types etc. jQuery is very rich in terms of selectors Selectors 32
  33. 33. Element type $('div') , $('p') etc ID based $('#ctl00_cpMain_myUserNameFieldID').val(‘abc'); $('[id$=myUserNameFieldID]').val('abc'); $('[id^=myUserNameFieldID]').val('abc'); $('[id*=myUserNameFieldID]').val('abc'); $(‘input[id$=myUserNameFieldID]').val('abc'); Selectors Example 33
  34. 34. Demo : How to using jQuery in application Demo 1 : Using element tag as selector Demo 2 : Using element id as selector Demo3 : Using class name as selector Demo4 : Using attribute as selector Demo 5 : Using type with group-name and attribute as selector Demo 6 : Validating a from on submit Demo 7 : Checking for Numeric value for an input field Let’s talk Less, Code more… 34
  35. 35. Demo 5 Using element type, name and attribute as a selector 35
  36. 36. .trim() should be also used!!! Validating a form on Submit 36
  37. 37. Check an input field for Numeric 37
  38. 38. How we do magic – Identifying the element (using selector) Assign an event (binding event) Create a function that will run when event will occur JQuery is simply a library of JavaScript-functions. It contains well written and tested common functions. We can also add our methods/functions to it. ECMAScript is a standard and JavaScript is one of its dialects. Like other libraries, jQuery is not standardized by ECMAScript. Key Concepts 38
  39. 39. Follow Twitter : AnilAwadh Facebook : Anil.Awadh Technology Blog : Questions/Discussion 39