Jquery

Information about Jquery

Published on January 8, 2013

Author: Umesh

Source: authorstream.com

Content

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/

Related presentations


Other presentations created by Umesh

See Himachal Pradesh in India
30. 08. 2007
0 views

See Himachal Pradesh in India

Nice Images
03. 04. 2008
0 views

Nice Images

NASA images of Ramayana Bridge
09. 04. 2007
0 views

NASA images of Ramayana Bridge

397804_634835397418834678
11. 01. 2013
0 views

397804_634835397418834678

Spirit of life
07. 02. 2009
0 views

Spirit of life

A journalist's day at work
06. 02. 2009
0 views

A journalist's day at work

Lunar Eclipse
05. 02. 2009
0 views

Lunar Eclipse

15  Cars  i  Would  Own  One  Day!
02. 06. 2008
0 views

15 Cars i Would Own One Day!

Creative Ads
28. 09. 2007
0 views

Creative Ads

Hubble Images
17. 03. 2008
0 views

Hubble Images

Ana Ivanovic
09. 06. 2007
0 views

Ana Ivanovic

Getting started with authorPOINT
03. 05. 2007
0 views

Getting started with authorPOINT