A to Z about JQuery - Become Newbie to Expert Java Developer
Download as PPTX, PDF0 likes73 views
El documento detalla el uso de jQuery, una biblioteca de JavaScript que simplifica el scripting del lado del cliente, facilitando la manipulación de elementos HTML, eventos, animaciones y peticiones AJAX. Se explican las características clave, como su ligereza, facilidad de aprendizaje y amplia gama de complementos disponibles, así como su compatibilidad con diversos navegadores. También se menciona el desarrollo de plugins y la extensión de jQuery mediante jQuery UI, que proporciona más capacidades y widgets para mejorar la interfaz de usuario.
![More selectors
Full list at http://www.w3.org/TR/css3-selectors/
Pattern Meaning
* any element
E an element of type E
E[foo] an E element with a "foo" attribute
E[foo^="bar"]
an E element whose "foo" attribute value begins
exactly with the string "bar"
E:nth-child(n) an E element, the n-th child of its parent
E:first-child an E element, first child of its parent
E:empty
an E element that has no children (including text
nodes)
E:link
E:visited
an E element being the source anchor of a hyperlink
of which the target is not yet visited (:link) or
already visited (:visited)
E > F an F element child of an E element
an F element immediately preceded by an E](https://image.slidesharecdn.com/jquerydoc-180808131128/85/A-to-Z-about-JQuery-Become-Newbie-to-Expert-Java-Developer-13-320.jpg)
![jQuery Templates (2)
Container for the template can be
var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes
Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear:
"1976" } ];
var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";
// Compile the markup as a named template
$.template( "movieTemplate", markup );
// Render the template with the movies data and insert
// the rendered HTML under the "movieList" element
$.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" );](https://image.slidesharecdn.com/jquerydoc-180808131128/85/A-to-Z-about-JQuery-Become-Newbie-to-Expert-Java-Developer-39-320.jpg)
A to Z about JQuery - Become Newbie to Expert Java Developer
- 1. A-Z About JQuery : Become Expert Developer from Newbie
- 2. What we’ll be looking at... Why jQuery? jQuery fundamentals Creating and manipulating elements Events Animations and effects Talking to the server- Ajax jQuery UI Writing plugins Breaking news around new releases Using the CDN
- 3. Hi, jQuery jQuery is Most popular, cross-browser JavaScript library Focusing on making client-side scripting of HTML simpler Easy navigating the DOM(Data Object Model) Handling events Working with Ajax Open-source, released in 2006
- 4. Why jQuery? Many JavaScript frameworks try bending the language out of its natural form jQuery aims at CSS, HTML and JavaScript Advantages Lightweight Easy to learn using familiar CSS syntax Many plugins available Easy to extend and compatible It’s on Microsoft’s radar Rich community
- 5. You are not alone! Many LARGE companies use jQuery for their sites, including:
- 6. Microsoft and jQuery Microsoft is contributor to jQuery Proposed (and accepted) templating, data linking and globalization
- 7. Script, don’t get in my way! jQuery helps us writing JavaScript code This will become a heavy job without jQuery!
- 8. jQuery fundamentals: the ready handler Script execution should wait until DOM elements are ready You say: window.onload? Sadly, this waits for everything to be loaded, including images etc Script execution is too late Instead, we need to wait only until the DOM tree is created Can be difficult in cross-browser situations Easy-peasy with jQuery
- 9. jQuery fundamentals: $ $ function (aka jQuery() function) returns A JavaScript object containing an array of DOM elements In the order they were found in the document Matching a specified selector (for example a CSS selector) It returns the same group of elements, can be chained
- 10. jQuery fundamentals: selectors At the core of jQuery lies its selector engine Can be used to select elements based on names, attribute, position...
- 11. jQuery fundamentals: selectors Most basic: CSS selectors Can be combined Child selector Attribute selector
- 12. jQuery fundamentals: selectors Position Psuedo-classes (CSS filter selectors & custom selectors)
- 13. More selectors Full list at http://www.w3.org/TR/css3-selectors/ Pattern Meaning * any element E an element of type E E[foo] an E element with a "foo" attribute E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" E:nth-child(n) an E element, the n-th child of its parent E:first-child an E element, first child of its parent E:empty an E element that has no children (including text nodes) E:link E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) E > F an F element child of an E element an F element immediately preceded by an E
- 14. jQuery fundamentals: creating elements $(‘...’) selects an element <> $(‘<li>’) creates an element Attributes can be passed using JavaScript object
- 15. Working with the result of $ (2) A wrapped set is like an array of elements, normal “array operations” can be done on it Check the size Access an indiviual element Loop over the elements
- 16. Working with the result of $ (3) Set operations (continued) Add and remove elements Filter elements Remember that we are always returning the set Chaining is always possible!
- 17. Attributes When we want to change how an element looks, we can change its attributes jQuery provides the attr() method 2 variations based on number and types of parameters Read a specified property from first element in wrapped set Set a property on all elements in the wrapped set (0 or more) Can also accept a function Attr() helps us dealing with browser-dependencies (again)
- 18. Attributes (2) jQuery makes it easy to apply and remove CSS classes addClass(), removeClass(), toggleClass() and hasClass() Changing indiviual CSS elements is supported css() can be used to get or set CSS on an element When there is a checkbox selection or Radio Button selection , use a prop instead of the attr. *$(':radio').first().attr("checked", true); *$(':radio').first().prop("checked", true); $('#mydiv').css("background-color","yellow");
- 19. Working with elements html() can be used to get or set the content of an element text() can retrieve combined textual content of all elements, including their children If the elements are form elements, we need to use val() $('input:checkbox:checked').val(); $('#mydiv').html();
- 20. jQuery events bind() is where it all starts Binds a function to any event on any DOM element Works in any browser Possible to bind more than one event handler for an event on on element unbind() removes the event.
- 21. Live and let die bind() is OK for existing elements live() allows us to create event handlers for elements that don’t exist (yet) die() removes the live()-created event handlers$('.someClass') .live('click', function() { //do something }); $(".someClass").die("click")
- 22. Animations and effects Core jQuery has some basic effects More are available in jQuery UI Should be used with caution! Most basic ‘animation’ is hiding/showing an element hide(): sets display:none on the element show(): sets display to inline/block toggle(): sets visible is hidden and vice-versa Methods are overloaded, accepting Speed Callback
- 23. Animations and effects (2) Elements can also be gradually added/removed slideDown() and slideUp() Fading in is supported as well fadeIn() and fadeOut() animate() is mother of all animations Using ‘target values’ for style properties, jQuery will animate the transition
- 24. Ajax in the past When we were all young (in 1998), Microsoft introduced the ability to perform asynchronous requests from script (ActiveX) Later, other browsers implemented a standard, the XMLHttpRequest IE6 uses an ActiveX object Result is that we need to do checks Again... jQuery to the rescue! if(window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
- 25. Ajax with jQuery Basic functionality to load content from a server-side resource: load() url parameters: data to be passed (string, object...). If provided, a POST is executed, otherwise a GET callback (optional) Next to load, we can also use $.get()/$.getJson() or $.post() $('#someDiv') .load('test.html', function() { alert('Load was performed.'); });
- 26. Ajax with jQuery(2) If we need all control over the Ajax request we can get: $.ajax() options: defines an object containing all the properties for the Ajax request List of options is huge, therefore $.ajaxSetup options: defines an object containing all the properties for the Ajax request, becoming the default for Ajax requests
- 27. Ajax with jQuery(3) Throughout the Ajax request, we can get feedback Local events from the $.ajax() call (callbacks) Global events Are broadcast to every element within the DOM, can be attached on any element ajaxStart ajaxSend ajaxSuccess ajaxError ajaxComplete
- 28. jQuery UI Huge extension of jQuery, providing more UI capabilities Contains number of UI features we’d logically need Includes Effects: more advanced than core effects Interactions: drag and drop Widgets (aka controls): date picker... All can be themed jqueryui.com contains tool to configure download and “ThemeRoller” tool Code included in jquery-ui.js
- 29. Effects jQuery core contains some basic effects Based on the effect(type, options, speed, callback) method Has several animation types such as puff, highlight and shake (even explode exists) Also allows to do animations with colors (not possible with animate()) backgroundColor, color... Visibility methods (show()...) are extended Class methods (addClass()...) are extended position() method is added for advanced positioning $('#someElement').position({ my: 'top center', at: 'bottom right'});
- 30. Interactions Interactions focus on allowing users to directly interact with elements, which isn’t possible with standard HTML controls They add advanced behaviors to our pages related to mouse interactions Available interactions: Dragging Dropping Sorting Resizing Selecting
- 31. Dragging Easy-peasy (again) with jQuery draggable() is your friend (heavily overloaded once again) Allows making elements draggable, possible with options (opacity...) Overloaded so it also support enabling, disabling... Draggable
- 32. Widgets: controls on steroids New controls (based on existing ones) Contents Buttons Sliders Progress bars Autocompletion Date picker Tabs Accordion Dialog box
- 33. Date picker Have you noticed that entering dates is a difficult thing for end users? Some will always get it wrong! jQuery UI’s DatePicker can help $.datepicker() creates the control for you Has numerous options, mostly default will do $.datepicker.setDefaults() can be used to share defaults
- 34. Dialog Box In fact, a dialog box is nothing more that a DIV with a higher z-index and some custom chrome jQuery will handle the nasty details for us (once again) About every element can become the content of the dialog box On a wrapped set, use .dialog() to make it appear as such Triggers some events, such as close, drag and resize Adds classes on the elements ui-dialog ui-dialog-title ...
- 35. Something missing in jQuery? 2 options: Use an existing plugin jQuery plugin repository: plugins.jquery.com Google code: code.google.com SourceForge: sourceforge.net GitHub: github.com Write a plugin yourself Custom utility function Create wrapper functions
- 36. Writing your own plugins Write a plugin to add it yourself! Possible to write your own utility functions and wrapper methods Creating new wrapper methods: Add the method as a property on the fn object in the $ namespace
- 37. Breaking news! October 4th 2010: jQuery has accepted 3 plugins from Microsoft jQuery Templates jQuery Data Link jQuery Globalization Are now official plugins Templates will be standard part of next major jQuery version (1.5)
- 38. jQuery Templates Template is HTML markup (containing tags) 3 plugins: .tmpl(): renders the template .tmplItem(): find the template item .template(): compile the template <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script> $("#movieTemplate").tmpl(movies) .appendTo("#movieList");
- 39. jQuery Templates (2) Container for the template can be var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>"; // Compile the markup as a named template $.template( "movieTemplate", markup ); // Render the template with the movies data and insert // the rendered HTML under the "movieList" element $.tmpl( "movieTemplate", movies ) .appendTo( "#movieList" );
- 40. jQuery Globalization Includes globalization information for over 350 (!) cultures Currencies Date formatting (month names) Number formatting
- 41. jQuery Globalization (2) $.format() Formats date, currencies and numbers Accepts value and format specifier (D, c...) $.preferCulture(“nl-BE”) Sets default culture $.cultures() Returns all available cultures $.parseDate() Converts string into JavaScript date
- 42. Where to get your stuff? Use a CDN? Microsoft Google Put scripts locally as well with a fallback mechanism <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"> </script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='/Scripts/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E")); } </script>
- 43. Summary Where does all the (l) for jQuery come from? Light-weight library that uses JavaScript as JavaScript, relying on CSS Cross-browser compatible, hides the details (ready handler) Easy eventing model Can work with MVC & WebForms Easily extensible to fit your needs, tons of plugins already available
- 44. Kanhasoft.com Services: Web Application Development iOS App Development Android App Development .Net Application Development PHP Web Development Hybrid App Development CRM Software Development ERP Software Development Django Application Development Custom Amazon Seller Tools For Sales Inquiry: India: +91 99133-44050 USA: +1 618-300-1610