75 %
25 %
Information about Jquery

Published on January 8, 2013

Author: Umesh

Source: authorstream.com

Jquery : Jquery An intro and basic usage Varinder Singh Nov 27, 2012 Preliminary requirements: Preliminary requirements Javascript A scripting language(client side mostly) DOM The way browser manipulates a web page in memory HTML A markup language for web page Most popular libraries: Most popular libraries YUI Prototype Dojo Jquery Mootools ExtJS Underscore Advantages: Advantages Easy DOM Manipulation Cross Browser Event Management Simplified AJAX Animations How it works: How it works Select some elements Do something Selecting elements from DOM and do operations on them(DOM manipulation) Jquery Wrapper: Jquery Wrapper Applying selector returns the J query Wrapper wrapper is object which wraps all selected elements Has a length property which tells no. of matches Closely resembles arrays Selectors(Traversing DOM): Selectors(Traversing DOM) Element selectors Selects elements by tag name Example div, p, span, input …. Add ‘martop10’ class to all div elements Select all anchors , input fields and change font color to red Selectors continued…: Selectors continued… ID Selectors Selects an element from DOM(document) Analogous to document.getElementById () in plane javascript Prepend has # before selector ID Finds the element having id ‘ maincontent ’ and fades it out nicely Selectors continued…: Selectors continued… Class Selectors Selects all element from having a particular class set Prepend has . (dot) before class name Finds all the elements having class ‘ fleft ’ and fades them out Selectors continued…: Selectors continued… Child Selector ( ‘parent > child’ ) Selects all immediate children of parent Insert > between parent and child selector Find anchors that are immediate children of a div and apply yellow background color Selectors continued…: Selectors continued… Next adjacent Selector ( ‘E + F’ ) Selects all F elements that are preceded by E Insert > between parent and child selector Find all anchors that come exactly after a span and apply red background on them Selectors continued…: Selectors continued… Attribute Selectors ( [] ) E[A] select all E ’s having A attribute(value don’t matter) E[A=V] all E’s with attribute A = V E[A*= V ] all E’s with attribute values starting with V E[A$=V] all E’s with attribute value ending with V e.g. Find external links Basic Selectors Reference: Basic Selectors Reference http://www.w3.org/TR/CSS21/selector.html Pseudo Selectors: Pseudo Selectors Used in conjunction with other selectors Always start with colon(:) :first, :last, :not(), :visible, :hidden, :contains() , : eq … All divs not having class fleft Change text of first textarea Selectors Exercise: Selectors Exercise Count no. of links on classes page Disable all radio buttons on create test page Hide All images on classes page On content page change anchor text to ‘hello world’ of all anchors w hich appear inside a p (at any level) Count images that have and that do not have an alt attribute separately Most useful function on selectors: Most useful function on selectors Toggle visibility toggle(), hide(), show() slideUp (), slideDown () fadeIn (), fadeOut () Takes optional arguments ‘transition speed’ and callback Most useful function on selectors: Most useful function on selectors CSS manipulation css (), addClass (), removeClass (), toggleClass () Most useful function on selectors: Most useful function on selectors Modifying content such as textbox value or inner HTML h tml(),text(), val () Gets value if not argument is given. Sets value to new value in argument Utility functions: Utility functions Perform simple utility tasks Trimming string, matching patterns, manipulating arrays etc . Executed directly on Jquery Wrapper No selectors needed Trimming a string parse string to JSON API Reference: API Reference Events: Events Respond to user interaction Click, mouseover , mouseout , blur, change, focus, mouseenter , mouseleave , keyup , keydown , keypress … Binding some code to run on an event Or shorthand notation Best Practices: Best Practices The Web Standards Project describes four benefits of unobtrusive DOM scripting in their JavaScript Manifesto . Usability: An unobtrusive DOM script does not draw the attention of the user - visitors use it without thinking about it. Graceful degradation: Do not generate error messages, in any browser, even when they fail. If features cannot be presented properly, they silently disappear. Accessibility: If any script fails, the page still delivers its core functions and information via the markup, stylesheets and/or server-side scripting. Separation: For the benefit of other and future web developers, all JavaScript code is maintained separately, without impacting other files of script, markup or code Check code quality: Check code quality JSLint http://www.jslint.com / Checks code quality Proper use of variable scope Further reading…: Further reading… Extending Jquery/Plugins Advanced Selectors References: References http://www.w3.org/TR/CSS21/selector.html http://api.jquery.com / http://www.jslint.com / http://www.webstandards.org/

Add a comment

Related presentations

Related pages


jQuery: The Write Less, Do More, JavaScript Library
Read more

jQuery – Wikipedia

Eine typische Manipulation von DOM-Elementen beginnt mit der $- oder jQuery-Funktion, die als Parameter einen CSS-ähnlichen Selektor erwartet.
Read more

jQuery Foundation

Coordinate development on our open source projects, including jQuery, jQuery UI, jQuery Mobile, QUnit, and Sizzle.
Read more

jQuery Tutorial - W3Schools Online Web Tutorials

jQuery References. At W3Schools you will find a complete reference of all jQuery objects and methods. jQuery Reference
Read more

jQuery UI

jQuery: The Write Less, Do More, JavaScript Library
Read more

Download jQuery | jQuery

link Downloading jQuery. Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or ...
Read more

jQuery-Tutorial für Anfänger - HTML lernen und die ...

jQuery – das Framework um schmerzfrei mit JavaScript zu arbeiten. Wie kann man jQuery für Anfänger vorstellen. jQuery bietet sehr viel – und das ...
Read more

jQuery API Documentation

search Search jQuery API Documentation. jQuery API. jQuery is a fast, small, and feature-rich JavaScript library.
Read more

jQuery Plugin Registry

jQuery: The Write Less, Do More, JavaScript Library ... The jQuery Plugin Registry is in read-only mode. New plugin releases will not be processed.
Read more

jQuery Learning Center

Books. Learning jQuery Fourth Edition Karl Swedberg and Jonathan Chaffer; jQuery in Action Bear Bibeault, Yehuda Katz, and Aurelio De Rosa
Read more