SlideShare a Scribd company logo
Starting with jQuery
-Anil Kumar
codePattern.net/blog
Executive Member
SSS & Educational Society
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
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 , codePattern.net/blog
C#Corner MVP
Who am I ?
3
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

Recommended for you

Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo

The document introduces Dojo, an open source JavaScript toolkit for building modern web applications. It provides core libraries for DOM manipulation, events, Ajax, and more. Dojo also includes pre-built widgets (Dijit) and mechanisms for creating custom widgets. The document discusses Dojo's namespaces, communication capabilities, objects and classes, internationalization support, and themes.

dojo
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery

This session dives deep into the DOM traversal methods of the jQuery API where you will learn the difference between brittle and fluid traversal methods, strategies for structuring your HTML, and how to leverage some of the more obscure jQuery selectors.

Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial

This document provides a tutorial on the Dojo JavaScript framework. It introduces Dojo, describes its key features like widgets, utilities and AJAX libraries. It covers loading and installing Dojo, creating a basic "Hello World" button widget, and compares Dojo to other frameworks like jQuery and YUI.

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
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
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
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

Recommended for you

Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014

A quick overview of AngularJS Framework and Dojo Toolkit. Why use them and when? Why use one instead of the other? Strong points and drawbacks! Plus a hands-on example

#angularjs #dojotoolkit #technology #it #solutions
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates

Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data. jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.

jquerydata linktemplates
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkitRich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit

The Dojo toolkit is a modular JavaScript library designed to ease and speed up the development of JavaScript-/AJAX-based websites and applications. This presentation (given at the FrOSCon 2011) will give an overview over the toolkit together with a short survey over

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
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
Understanding DOM
I have taken this image
from w3.org,
you can find more there
to understand
11
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

Recommended for you

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery

This document provides an introduction to jQuery, including: - A brief overview of what jQuery is and its key facts - Details on learning jQuery through websites, tutorials, and books - Explanations of jQuery syntax, selectors, animations, common operations, and events - Descriptions of related tools like jQuery UI, plugins, and browser developer tools

programmingjqueryjavascript
WebApps e Frameworks Javascript
WebApps e Frameworks JavascriptWebApps e Frameworks Javascript
WebApps e Frameworks Javascript

Visão geral sobre frameworks javascript populares e o uso para desenvolvimento de aplicações web ricas.

webappsframeworksjavascript
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better

Doing it, then doing right and finally improving. Have you ever had the feeling that your jQuery could run faster? And isn’t that the natural evolution of a developer? From new browser features and well known techniques to script breakup, sizzling, chaining and selector comparison... Tuning of any technology requires deep understanding of its core principles. In order not to just guess we need to learn how browsers execute JavaScript and how jQuery is built. If these issues have been bothering you recently – join us to see how or share your experience.

javascriptjqueryscript breakup
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
Solve your all problems
Your coding Chores
What jQuery Will Not Do
14
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
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

Recommended for you

Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j query

The document is an introduction to jQuery presentation. It discusses what jQuery is, how to set it up and include it in a webpage, its core functionality and structure, and how it is used to select and manipulate elements on a page. jQuery is a lightweight JavaScript library that makes HTML document manipulation and event handling easier. It works across browsers and has thousands of plugins. The presentation provides examples of how jQuery simplifies tasks like showing/hiding elements compared to vanilla JavaScript.

jquery
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...

Рано или поздно каждый сайт нуждается в мобильной версии. Существует несколько способов реализации мобильной версии: адаптивный сайт, нативное приложение для iOS, Android etc. В создании нативного приложения нам поможет отличная платформа под названием DrupalGap. DrupalGap - это платформа позволяющая создавать приложения для iOS и Android при помощи Drupal, PhoneGap, jQueryMobile, без непосредственного программирования на языке платформы.

drupalcampdrupalcamp donetskdrupal
Dojo javascript toolkit
Dojo javascript toolkit Dojo javascript toolkit
Dojo javascript toolkit

This document provides information about the Dojo JavaScript toolkit, including what it is, its features, architecture, and how to get started with it. Some key points: - Dojo is an open source JavaScript toolkit that provides components for building rich web applications. It includes widgets, utilities, and AJAX libraries. - Its core provides functionality like remote calls, DOM manipulation, and CSS handling. Dijit is its widget library, and DojoX contains extensions. - Dojo supports asynchronous loading, internationalization, accessibility, and can build desktop-like web apps. It uses the Asynchronous Module Definition (AMD) API.

scriptingjavascriptdojo
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
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
Simplicity
Flexibility
Maintainability
Power
Why so popular
19
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.)
Script.aculo.us (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

Recommended for you

JQuery Comprehensive Overview
JQuery Comprehensive OverviewJQuery Comprehensive Overview
JQuery Comprehensive Overview

This document provides an overview and introduction to jQuery. It covers: - What jQuery is and why it's useful - Installing jQuery - Basic jQuery syntax using selectors to find and manipulate elements - Common jQuery events - Effects like hide/show, fade, slide, and animate to transition elements - The stop method to halt animations

jquery
Dojo toolkit
Dojo toolkitDojo toolkit
Dojo toolkit

Dojo Toolkit is a powerful JavaScript framework that provides a small and fast core along with modules for widgets, grids, mobile development, graphics, and visualization. It allows including modules asynchronously and supports backward compatibility. Examples demonstrate adding visual effects and waiting for the DOM to load before manipulating elements.

dojo toolkit
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js

This document discusses structuring web applications with Backbone.js. It begins with an introduction to Backbone.js and how it provides structure for client-side JavaScript code. The document then covers the basic components of Backbone, including Models, Collections, Views, templates and routers. It provides examples of how each component is defined and used. Finally, it discusses best practices for structuring a Backbone application, including organizing code into modular files and folders using Require.js.

backbonearchitecturajavascript
jQuery library file is shipped with Visual Studio.
Intelligence is available
Microsoft actively contribute to jQuery Templates
How Microsoft support?
21
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="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script src="Scripts/jQuery.min.js"></script>
22
jQuery(select_Item).CallOrDoSomeOperation();
jQuery(selector, [ context ])
By default context if not provided => DOM
var c = $(); alert( $.isEmptyObject(c) );
=================
Output : False
jQuery Syntax
23
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

Recommended for you

How dojo works
How dojo worksHow dojo works
How dojo works

Basic Introduction to Dojo JavaScript toolkit. Find Video tutorial at http://www.youtube.com/watch?v=Q3S3yb8OlTU

toolkitjavascriptdojo
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js

The document provides an introduction to Vue.js, a progressive framework for building user interfaces. It discusses Vue's core concepts like the Vue instance, templates, components, and the ecosystem of libraries that support Vue like Vuex for state management and Vue Router for routing. The document compares Vue to Angular and React, noting Vue aims for a balance between rich features and clean code. It promotes Vue as a good option for both beginners and experienced developers looking for a new view on single-page apps.

vuevue.jsreact
As business network 2013_rev.1
As business network 2013_rev.1As business network 2013_rev.1
As business network 2013_rev.1
automotivelistinopubblicità banner
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
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
Jquery(function(){…};)
jquery().ready(function(){…};)
jquery(document).ready(function(){…};);
Different style of writing DOM ready
27
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

Recommended for you

You can do it
You can do itYou can do it
You can do it

Social Jitney developed a to-do list iPhone app called You Can Do It that allows users to easily add and manage tasks, postpone or end tasks, and share daily activities on Facebook. The app provides effective time management and helps users schedule and organize their workload.

AS business network 2015_rev. 1
AS business network  2015_rev. 1AS business network  2015_rev. 1
AS business network 2015_rev. 1

Listino Pubblicità e network di Automotive Space per il 2015

pubblicitàautolistino
미디어 교육 필요성 발표자료
미디어 교육 필요성 발표자료미디어 교육 필요성 발표자료
미디어 교육 필요성 발표자료

저는 초등학교 과정부터 미디어를 교육해야 한다고 생각합니다. 그 이유는 첫째.. 소셜 미디어등이 주요한 소통의 수단으로 발전할 것이므로 소통을 가르치는 측면이 있고 둘째로 우리아이들은 문자 보다는 영상에서 정보를 채득하는 비디오 세대이기 때문이며, 세째로 아바타의 예처럼 영상 콘텐츠의 산업적 부가가치가 더욱 커질것이라고 보기 때문입니다. 얼마전 서울 서부 교육청 교사 연구회에서 발표한 자료를 올립니다. 참고하세요....

Event
.target
.target.id
.type
.data
There are many other properties and we can get their
values as well
Event properties
29
.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
How to Stop
normal event actions
31
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

Recommended for you

Vmobile best networking
Vmobile best networkingVmobile best networking
Vmobile best networking

The document discusses a mobile marketing business called VMobile that allows existing cell phone users to become "technopreneurs" by selling prepaid load credits. It describes how technopreneurs can earn money through direct sales incentives by recruiting new members and receiving commissions on their sales. It also outlines VMobile's power of 2 strategy where technopreneurs endorse 2 others and receive a percentage of their earnings in order to build their sales force exponentially over time. Some examples are given of top earning technopreneurs making over 100,000 pesos per month through the program.

vmobileeasy moneymillions
You can do it
You can do itYou can do it
You can do it

Social Jitney developed the "You Can Do It" app, a to-do list and time management tool for iPhone users. The app allows users to add and schedule tasks, share tasks on Facebook, and trash, postpone, or end tasks. Social Jitney is a mobile app development agency that provides app development, community management, and app marketing services.

to-do listnew apptask manager
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
Demo : How to using jQuery in asp.net 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
Demo 5
Using element type, name and attribute as a selector
35
.trim() should be also used!!!
Validating a form on Submit
36

Recommended for you

The Ceo Refresher Storytelling And Storymaps
The Ceo Refresher   Storytelling And StorymapsThe Ceo Refresher   Storytelling And Storymaps
The Ceo Refresher Storytelling And Storymaps

This document discusses how storytelling and storymaps can be used for organizational change. It argues that stories engage people in a unique way and help give meaning to human activities. For business, stories can express a leader's passion for vision and build commitment. The document then discusses how storymaps in particular, which combine words, images and photos to visually depict a narrative, are an even more powerful communication tool that help illustrate complex changes [in 3 sentences or less].

persitiwa-ganyang-malaysia-1963
persitiwa-ganyang-malaysia-1963persitiwa-ganyang-malaysia-1963
persitiwa-ganyang-malaysia-1963

Konfrontasi Indonesia-Malaysia terjadi antara 1962-1966 akibat keinginan Malaysia untuk menggabungkan Brunei, Sabah dan Sarawak dengan Persekutuan Tanah Melayu pada 1961 yang ditentang oleh Presiden Soekarno. Perang ini melibatkan serangan dan sabotase oleh sukarelawan Indonesia ke wilayah Malaysia. Perang berakhir setelah terjadinya kudeta di Indonesia pada 1965 yang mengurangi keinginan Indonesia untuk meneruskan konfrontasi. Perjanjian damai ditandatangani pada

Photo Project Nissan Juke Nismo 4WD MCVT
Photo Project Nissan Juke Nismo 4WD MCVT Photo Project Nissan Juke Nismo 4WD MCVT
Photo Project Nissan Juke Nismo 4WD MCVT

The document outlines a photo shoot for a Nissan Juke Nismo 4WD MCVT to be held in Firenze, Italy on March 15, 2018. Pietro Montagna is the project manager, Edoardo Mascalchi is the photographer, and Elena Rossi is the assistant. Photos will be shared on various social media platforms including Twitter, Facebook, Google+, Pinterest, Flickr, Youtube, Slideshare, and LinkedIn.

photoautomotive4wd
Check an input field for Numeric
37
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
Follow Twitter : AnilAwadh
Facebook : Anil.Awadh
Technology Blog : codePattern.net/blog
Questions/Discussion
39

More Related Content

What's hot

Complete Dojo
Complete DojoComplete Dojo
Complete Dojo
Girish Srivastava
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz
 
Building native Win8 apps with YUI
Building native Win8 apps with YUIBuilding native Win8 apps with YUI
Building native Win8 apps with YUI
Tilo Mitra
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo
yoavrubin
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
Doug Neiner
 
Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial
Girish Srivastava
 
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Endava
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
BorisMoore
 
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkitRich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit
alexklaeser
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Alek Davis
 
WebApps e Frameworks Javascript
WebApps e Frameworks JavascriptWebApps e Frameworks Javascript
WebApps e Frameworks Javascript
meet2Brains
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better
Ivo Andreev
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j query
thewarlog
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalCampDN
 
Dojo javascript toolkit
Dojo javascript toolkit Dojo javascript toolkit
Dojo javascript toolkit
Predhin Sapru
 
JQuery Comprehensive Overview
JQuery Comprehensive OverviewJQuery Comprehensive Overview
JQuery Comprehensive Overview
Mohamed Loey
 
Dojo toolkit
Dojo toolkitDojo toolkit
Dojo toolkit
Vanessa Me Tonini
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
Diego Cardozo
 
How dojo works
How dojo worksHow dojo works
How dojo works
Amit Tyagi
 
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
Zachary Klein
 

What's hot (20)

Complete Dojo
Complete DojoComplete Dojo
Complete Dojo
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
Building native Win8 apps with YUI
Building native Win8 apps with YUIBuilding native Win8 apps with YUI
Building native Win8 apps with YUI
 
Introduction To Dojo
Introduction To DojoIntroduction To Dojo
Introduction To Dojo
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
 
Dojo tutorial
Dojo tutorialDojo tutorial
Dojo tutorial
 
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
Angularjs vs Dojo toolkit | SuperSpeaker@CodeCamp Iasi 2014
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
Rich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkitRich internet application development using the dojo toolkit
Rich internet application development using the dojo toolkit
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
WebApps e Frameworks Javascript
WebApps e Frameworks JavascriptWebApps e Frameworks Javascript
WebApps e Frameworks Javascript
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better
 
Introduction to j query
Introduction to j queryIntroduction to j query
Introduction to j query
 
DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...DrupalGap. How to create native application for mobile devices based on Drupa...
DrupalGap. How to create native application for mobile devices based on Drupa...
 
Dojo javascript toolkit
Dojo javascript toolkit Dojo javascript toolkit
Dojo javascript toolkit
 
JQuery Comprehensive Overview
JQuery Comprehensive OverviewJQuery Comprehensive Overview
JQuery Comprehensive Overview
 
Dojo toolkit
Dojo toolkitDojo toolkit
Dojo toolkit
 
Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.js
 
How dojo works
How dojo worksHow dojo works
How dojo works
 
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.jsRoom with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
 

Viewers also liked

As business network 2013_rev.1
As business network 2013_rev.1As business network 2013_rev.1
As business network 2013_rev.1
Automotive Space
 
You can do it
You can do itYou can do it
You can do it
Shehper Hasan
 
AS business network 2015_rev. 1
AS business network  2015_rev. 1AS business network  2015_rev. 1
AS business network 2015_rev. 1
Automotive Space
 
미디어 교육 필요성 발표자료
미디어 교육 필요성 발표자료미디어 교육 필요성 발표자료
미디어 교육 필요성 발표자료
laurent1004
 
Vmobile best networking
Vmobile best networkingVmobile best networking
Vmobile best networking
princessashanti16
 
You can do it
You can do itYou can do it
You can do it
Shehper Hasan
 
The Ceo Refresher Storytelling And Storymaps
The Ceo Refresher   Storytelling And StorymapsThe Ceo Refresher   Storytelling And Storymaps
The Ceo Refresher Storytelling And Storymaps
Anne Merkelson
 
persitiwa-ganyang-malaysia-1963
persitiwa-ganyang-malaysia-1963persitiwa-ganyang-malaysia-1963
persitiwa-ganyang-malaysia-1963
Tank Tonk
 
Photo Project Nissan Juke Nismo 4WD MCVT
Photo Project Nissan Juke Nismo 4WD MCVT Photo Project Nissan Juke Nismo 4WD MCVT
Photo Project Nissan Juke Nismo 4WD MCVT
Automotive Space
 
AS business network(eng) 2015_rev. 1
AS business network(eng)  2015_rev. 1AS business network(eng)  2015_rev. 1
AS business network(eng) 2015_rev. 1
Automotive Space
 
Katie bucknell q5
Katie bucknell q5Katie bucknell q5
Katie bucknell q5
katieb123bob
 
Maverick Billionaires Vmobile best networking
Maverick Billionaires Vmobile best networkingMaverick Billionaires Vmobile best networking
Maverick Billionaires Vmobile best networking
princessashanti16
 
Evidence of original images (for media blog)
Evidence of original images (for media blog)Evidence of original images (for media blog)
Evidence of original images (for media blog)
tom94
 
проект
проектпроект
проект
Svet55
 
The Ceo Refresher Storytelling And Storymaps
The Ceo Refresher   Storytelling And StorymapsThe Ceo Refresher   Storytelling And Storymaps
The Ceo Refresher Storytelling And Storymaps
Anne Merkelson
 
Research into film websites
Research into film websitesResearch into film websites
Research into film websites
katieb123bob
 
Josie Adele Portfolio
Josie Adele PortfolioJosie Adele Portfolio
Josie Adele Portfolio
josieadele
 

Viewers also liked (20)

As business network 2013_rev.1
As business network 2013_rev.1As business network 2013_rev.1
As business network 2013_rev.1
 
You can do it
You can do itYou can do it
You can do it
 
AS business network 2015_rev. 1
AS business network  2015_rev. 1AS business network  2015_rev. 1
AS business network 2015_rev. 1
 
미디어 교육 필요성 발표자료
미디어 교육 필요성 발표자료미디어 교육 필요성 발표자료
미디어 교육 필요성 발표자료
 
Animals
AnimalsAnimals
Animals
 
Vmobile best networking
Vmobile best networkingVmobile best networking
Vmobile best networking
 
You can do it
You can do itYou can do it
You can do it
 
The Ceo Refresher Storytelling And Storymaps
The Ceo Refresher   Storytelling And StorymapsThe Ceo Refresher   Storytelling And Storymaps
The Ceo Refresher Storytelling And Storymaps
 
persitiwa-ganyang-malaysia-1963
persitiwa-ganyang-malaysia-1963persitiwa-ganyang-malaysia-1963
persitiwa-ganyang-malaysia-1963
 
Photo Project Nissan Juke Nismo 4WD MCVT
Photo Project Nissan Juke Nismo 4WD MCVT Photo Project Nissan Juke Nismo 4WD MCVT
Photo Project Nissan Juke Nismo 4WD MCVT
 
AS business network(eng) 2015_rev. 1
AS business network(eng)  2015_rev. 1AS business network(eng)  2015_rev. 1
AS business network(eng) 2015_rev. 1
 
Katie bucknell q5
Katie bucknell q5Katie bucknell q5
Katie bucknell q5
 
Maverick Billionaires Vmobile best networking
Maverick Billionaires Vmobile best networkingMaverick Billionaires Vmobile best networking
Maverick Billionaires Vmobile best networking
 
Evidence of original images (for media blog)
Evidence of original images (for media blog)Evidence of original images (for media blog)
Evidence of original images (for media blog)
 
проект
проектпроект
проект
 
Utrykk med parentes
Utrykk med parentesUtrykk med parentes
Utrykk med parentes
 
Animals
AnimalsAnimals
Animals
 
The Ceo Refresher Storytelling And Storymaps
The Ceo Refresher   Storytelling And StorymapsThe Ceo Refresher   Storytelling And Storymaps
The Ceo Refresher Storytelling And Storymaps
 
Research into film websites
Research into film websitesResearch into film websites
Research into film websites
 
Josie Adele Portfolio
Josie Adele PortfolioJosie Adele Portfolio
Josie Adele Portfolio
 

Similar to Starting with jQuery

jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
Catherine Beltran
 
Jquery
JqueryJquery
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
William Myers
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
WebStackAcademy
 
J query presentation
J query presentationJ query presentation
J query presentation
akanksha17
 
J query presentation
J query presentationJ query presentation
J query presentation
sawarkar17
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
BlackCatWeb
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Collaboration Technologies
 
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | EdurekaTop 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
Edureka!
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
Jquery
JqueryJquery
Ise312 Ec Presentation Jquery
Ise312 Ec Presentation JqueryIse312 Ec Presentation Jquery
Ise312 Ec Presentation Jquery
duygut
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
Perttu Myry
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
Bhushan Mulmule
 
Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQuery
Laurence Svekis ✔
 
J Query
J QueryJ Query
J Query
ravinxg
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
 
J Query(04 12 2008) Foiaz
J Query(04 12 2008) FoiazJ Query(04 12 2008) Foiaz
J Query(04 12 2008) Foiaz
testingphase
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
jeresig
 

Similar to Starting with jQuery (20)

jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
Jquery beltranhomewrok
Jquery beltranhomewrokJquery beltranhomewrok
Jquery beltranhomewrok
 
Jquery
JqueryJquery
Jquery
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
J query presentation
J query presentationJ query presentation
J query presentation
 
J query presentation
J query presentationJ query presentation
J query presentation
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | EdurekaTop 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
 
JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)JavaScript Library Overview (Ajax Exp West 2007)
JavaScript Library Overview (Ajax Exp West 2007)
 
Jquery
JqueryJquery
Jquery
 
Ise312 Ec Presentation Jquery
Ise312 Ec Presentation JqueryIse312 Ec Presentation Jquery
Ise312 Ec Presentation Jquery
 
Modern Web Technologies
Modern Web TechnologiesModern Web Technologies
Modern Web Technologies
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
 
Web Development Introduction to jQuery
Web Development Introduction to jQueryWeb Development Introduction to jQuery
Web Development Introduction to jQuery
 
J Query
J QueryJ Query
J Query
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
 
J Query(04 12 2008) Foiaz
J Query(04 12 2008) FoiazJ Query(04 12 2008) Foiaz
J Query(04 12 2008) Foiaz
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 

Recently uploaded

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 

Recently uploaded (20)

Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 

Starting with jQuery

  • 1. Starting with jQuery -Anil Kumar codePattern.net/blog Executive Member SSS & Educational Society
  • 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. 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 , codePattern.net/blog C#Corner MVP Who am I ? 3
  • 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. 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. 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. 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. 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. 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. 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. Understanding DOM I have taken this image from w3.org, you can find more there to understand 11
  • 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. 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. Solve your all problems Your coding Chores What jQuery Will Not Do 14
  • 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. 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. 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. 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
  • 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.) Script.aculo.us (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. jQuery library file is shipped with Visual Studio. Intelligence is available Microsoft actively contribute to jQuery Templates How Microsoft support? 21
  • 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="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> <script src="Scripts/jQuery.min.js"></script> 22
  • 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. 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. 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. 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
  • 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. Event .target .target.id .type .data There are many other properties and we can get their values as well Event properties 29
  • 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. How to Stop normal event actions 31
  • 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. 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. Demo : How to using jQuery in asp.net 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. Demo 5 Using element type, name and attribute as a selector 35
  • 36. .trim() should be also used!!! Validating a form on Submit 36
  • 37. Check an input field for Numeric 37
  • 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. Follow Twitter : AnilAwadh Facebook : Anil.Awadh Technology Blog : codePattern.net/blog Questions/Discussion 39