Vishal Kumar 06131 A 1258 Introduction Why youre

Introduction Why you’re going to love j. Query!

Introduction �What we want to create? Dynamic Live Websites Effects filled Fast, responsive sites

The Solution : j. Query �What is j. Query? j. Query is a fast

History of j. Query �Developed by John Resig �Released v 1. 0 on November

Features of j. Query �DOM element selections using the cross- browser open source selector

A Few Examples �Forms �Chatboxes �Menus �Dropdowns �Sliders �Tabs �Slideshows �Games

Technical Implementation Because, after all, we are I. T. folks.

j. Query Object �The j. Query Object Contains a reference to the DOM element

Using j. Query �Download the. JS file (23 KB otal, minified) �Use the j.

j. Query Syntax $(document). ready(function() { $("a"). click(function(event) { alert("Thanks for visiting!"); });

The $ Symbol �$ is the Shortcut for the j. Query Global Class �Use

DOM Traversing �Document Object Model: The way of representing the Elements of a Document

Chainable Functions �Chainable events: find this, do several things in succession $('#message 2'). fade.

j. Query Animations � � Animations Built in � fade. In() fade. Out() hide()

When is the DOM Ready? �When is DOM ready? �We can use the ready()

CSS & Attribute Matching �Search with Tags and CSS: $('p'); $('p. message'); $('#message. text');

j. Query Events �Don't add "onclick" to your markup: use j. Query to find

j. Query with Other Frameworks �Mootools �Prototype, etc �Other frameworks also use the $

AHAH !? ! �AHAH style (Asynchronous HTML and HTTP) �Easiest way of creating Asynchronous

AJAX with j. Query �Asynchronous Javascript and XML �AJAX - Processing the feed $('#demo

Live Examples I can’t believe its not Flash!

Links � � � � � Facebook Search: http: //demos. 9 lessons. info/auto. htm

Who’s using j. Query? �Google �Dell �Bank of America �Mozilla �Drupal �Net. Flix �NBC

How can I learn and use j. Query �Check out j. Query. com Documentation

Closing Remarks Thank you for listening. If you have any queries, please feel free

References �j. Query: www. j. Query. com �j. Query 1. 4 Reference Guide(Jan 2010),

Slides: 31

Download presentation

Vishal Kumar 06131 A 1258

Introduction Why you’re going to love j. Query!

Introduction �What we want to create? Dynamic Live Websites Effects filled Fast, responsive sites �What do we have? Flash Javascript

The Solution : j. Query �What is j. Query? j. Query is a fast and concise Java. Script Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. j. Query is designed to change the way that you write Java. Script.

History of j. Query �Developed by John Resig �Released v 1. 0 on November 26 th, 2006 �Maintained as an Open Source software (dual licensed under MIT and GNU GPL) �Microsoft planning to integrate into Microsoft Visual Web Developer �Nokia planning to integrate into Web Run. Time platform �Currently on Version 1. 4, released

Features of j. Query �DOM element selections using the cross- browser open source selector engine Sizzle �DOM traversal and modification �Events �CSS manipulation �Effects and animations �AJAX �Extensibility through plugins �Utilities - such as browser version and the each function.

A Few Examples �Forms �Chatboxes �Menus �Dropdowns �Sliders �Tabs �Slideshows �Games

j. Query Enhanced Forms

Menus and Dropdowns

Sliders and Slideshows

Technical Implementation Because, after all, we are I. T. folks.

j. Query Object �The j. Query Object Contains a reference to the DOM element Has properties of the DOM element, like text, html, tags Can be used to manipulate the DOM directly Can be nested �Every j. Query Function Should return the same j. Query object

Using j. Query �Download the. JS file (23 KB otal, minified) �Use the j. Query file hosted on Google’s Code servers <html> <head> <script type="text/javascript" src="jquery. js"> </script> <script type="text/javascript"> </script> </head> <body> <a href="http: //jquery. com/">j. Query</a> </body> </html>

j. Query Syntax $(document). ready(function() { $("a"). click(function(event) { alert("Thanks for visiting!"); });

The $ Symbol �$ is the Shortcut for the j. Query Global Class �Use it to access any part of the DOM �Search by CSS to get the element. �Returns a j. Query object which can be futher manipulated

DOM Traversing �Document Object Model: The way of representing the Elements of a Document as Objects Way we represent HTML, XHTML From BODY, P, DIV, SPAN, etc. Any element can be accessed from its DOM structure

Chainable Functions �Chainable events: find this, do several things in succession $('#message 2'). fade. In('slow'). add. Class('alert'). html('Validate your markup!'); �Allows us to create complex yet easy to understand chains of actions

j. Query Animations � � Animations Built in � fade. In() fade. Out() hide() show() slide. Down() slide. Up() toggle() slide. Toggle() fade. To() animate() See also: Easing Plug-in j. Query User Interface: http: //ui. jquery. com

When is the DOM Ready? �When is DOM ready? �We can use the ready() function to find out $(document). ready(function() { // Write Code Here });

CSS & Attribute Matching �Search with Tags and CSS: $('p'); $('p. message'); $('#message. text'); $('ul#menu > li'); $('ul#menu ul'); �Attribute Matching: $('img[@alt]'); $('a[@href*=google]');

j. Query Events �Don't add "onclick" to your markup: use j. Query to find assign events �$('#control'). click(function() { $('#message'). show(). add. Class('alert'); }); �$('#control'). toggle(function() { $('#message'). show(). add. Class('alert'); }, function(){ $('#message'). remove. Class('alert'). hide(); });

j. Query with Other Frameworks �Mootools �Prototype, etc �Other frameworks also use the $ shortcut �Add code like this before making any j. Query calls: �var foo = j. Query. no. Conflict(); �Then use it like this: �foo('#message'). show();

AHAH !? ! �AHAH style (Asynchronous HTML and HTTP) �Easiest way of creating Asynchronous sites $('#control'). click(function() { $('#message'). load('current. php'); });

AJAX with j. Query �Asynchronous Javascript and XML �AJAX - Processing the feed $('#demo 5 -1'). click(function() { $('#headline-container'). html(''); $. get('headlines. xml', function(rss){ $(rss). find('item title'). each(function(index) { $('#headline-container'). append('<p>' + $(this). text() + '</p>'); }); });

Live Examples I can’t believe its not Flash!

Links � � � � � Facebook Search: http: //demos. 9 lessons. info/auto. htm Photoslider: http: //css-tricks. com/examples/Anything. Slider/#panel-5 Tabbed Manu: http: //www. queness. com/resources/html/tabmenu/jquery-tabbed -menu-queness. html Flip: http: //lab. smashup. it/flip/ Gallery: http: //visuallightbox. com/photo-gallery-with-lightboxsimple-html-demo. html Zoom image: http: //www. hotajax. org/demo/jquery/zoomimage/index. html Mac Dock: http: //nettuts. s 3. cdn. plus. org/358_jquery/example%20 files/allexamples. html Site with j. Query: http: //pupunzi. com/#welcome. html 3 d Sphere in j. Query: http: //www. devirtuoso. com/Examples/3 DEngine/sphere. html Chat Noir: www. vishalkumar. in/works/jscat

Conclusion Impressed?

Who’s using j. Query? �Google �Dell �Bank of America �Mozilla �Drupal �Net. Flix �NBC �Digg

How can I learn and use j. Query �Check out j. Query. com Documentation �Sites like www. jquerytutorials. com �Plugins for many of the features �Apply it to any web based application �Change the way you develop websites, and bring life to the online experience!

Closing Remarks Thank you for listening. If you have any queries, please feel free to ask. If you want to know how you can use a particular module of technology for your project or application, contact me at vishalkumar@gmail. com +91 9985 463 469

References �j. Query: www. j. Query. com �j. Query 1. 4 Reference Guide(Jan 2010), Pack Publishing �www. noupe. com �www. jquerytutorials. com �http: //www. webdesignerwall. com/tutorials/jq uery-tutorials-for-designers/ �www. google. com/images (search “jquery <feature>”)