Introduction to jQuery

M o d u l e - 1
I n t r o d u c i n g j Q u e r y
www.edureka.co/jquery-ui-development

Objectives
Slide 2 www.edureka.co/jquery-ui-development
By the end of this module, you will be able to understand:
Introduction to jQuery & History
The jQuery Object($)
Basic DOM HTML Document/Page Types
CSS Selectors
IDE's for jQuery, jQuery CDN & Installation
jQuery Functions, Selectors, Querying DOM, Traversing the DOM
jQuery Selectors, jQuery Basic Functions, DOM Traversing

Intro to HTML, CSS &JS
HTML (Hyper Text Markup Language): It is markup language for talking with web browsers which used to
develop web pages
CSS (Cascading Style Sheets): It is a style sheet to format your language look and feel, which is used to design
your web pages
JS (JavaScript): It is a scripting language to add interaction to you web pages
JavaScript (Behavioral)
CSS (Presentational)
HTML (Structural)

Basic DOMStructure
<!DOCTYPE html> <html>
<head>
<title>jQuery Training</title>
</head>
<body>
<h1>jQueryIntro</h1>
<p>Plan your jQuery TrainingNow</p>
<ul>
<li>I am a list item in HTML</li>
<li>I am also a list item</li>
</ul>
</body></html>
DOCUMENT
html
title
jQuery Training
body
h1
jQuery Intro…
p
Plan your…
head

http://jsfiddle.net/avinay/weq70hbL/2/
DOM Scripting
JavaScript is a scripting language to interact with the DOM
Unobtrusive
Based on web standards
Browsers behave differently

DOM Scripting (Contd.)
Each browser has a slightly different DOM interface

DOM Scripting (Contd.)

Intro to jQuery & History
A fast, concise, JavaScript library that simplifies how to traverse HTML documents, handle events, perform
animations, and AJAX for web development
jQuery has changed the way that millions of people write JavaScript
» It is a free and open source JavaScript library, first released in 2006
» Most popular, cross-browser support
» Lightweight
» Improves developer efficiency
» Easy to learn using familiar CSS syntax and intuitive
» Current release is 1.9 and 2.1

Why jQuery
jQuery is a JavaScript library designed to simplify the client-side scripting of HTML
 jQuery helps to create powerful dynamic web pages and web applications
 Is intuitive and easy to learn
 It integrates with Visual studio IDE with ease
 Helps in loading pages faster and is SEO friendly
 Helps in creating animated pages like flash

Document Type in HTML is a DOCTYPE, this informs the validator which version of (X)HTML you’re using, and
it must appear at the very beginning of every web page
DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate withoutthem
HTML4/XHTML1.0 – DOCTYPE
HTML5 – DOCTYPE
<!DOCTYPE html>
HTML DocumentTypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

CSS Selectors
Selectors are used to select an element based on names, attribute, position
» TagName Selectors
» ID Selectors
» Class Selectors
» Pseudo-classes Selectors
» Selectors based on relationships
» Attribute Selectors
» Multiple Selectors

The jQuery Object($)
jQuery(<code>): It is a jQueryFunction
$(<code>): Is also an alternative name of jQuery function
$(document): jQuery function usually takes a single argument, in this example “document”
A jQuery Object is like an array, which contains zero or more indexes. It also contains object methods like:
» Length
» Context
» Selector

IDE’s for jQuery
Editors
• Sublime Text2
• Atom
• Dreamweaver
• Browser console etc.
Online Editors
• Jsfiddle
• Jsbin
• Cloud 9
Debuggers
• Firebug
• Chrome Web Inspector

jQuery CDN & Installation
There are different ways of installing jQuery into you web project
Download from www.jquery.com and include in the web page using <script>
» <script type="text/javascript" src=”/dir/1.9.1/jquery.min.js"></script>
Including reference to jQuery library file using CDN (Content Delivery Network)
» <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
» A benefit of using a CDN hosted version is that it is reliable, fast, and potentially cached
Minified & Full Source Code versions

jQuery Functions
$(document).ready(): This is called DocumentReady, which is executed as soon as the document is ready for
DOM manipulation
We assign our function to the ready event, to tell jQuery that as soon as the document is ready, we want it to
call our function
» E.g.

jQuery Functions (Contd.)
jQuery function Chaining: Chaining is one of the most powerful feature of jQuery where it can perform multiple
methods on the same set of elements, it saves us and the browser from having to find the same elements more
than once
» E.g.

jQuery Functions (Contd.)
Custom Functions: There are several different ways to declare functions using JavaScript/jQuery
» Basic Function Declaration:
» Custom jQueryFunction:

Querying DOM
Selecting one or more elements from your document object model (DOM) to work with them
In jQuery we query the DOM using the CSS selectors
<ul id=“fruits”>
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<script>
$(document).ready(function()
{
$(“#fruits”).text();
$(“#ul#fruits”).text();
$(“#ul”).text();
$(“#fruits li”).text();
console.log($(#fruits”));
});
</scriptl>

jQuery Selectors
A jQuery Selector is a function which uses power of Cascading Style Sheets (CSS) selectors find out matching
elements from a DOM
jQuery Selectors let us quickly and easily access HTML elements or groups of elements
Types of Selectors:
» ID Selectors: This uses the ID attribute of a HTML tag to select the desired element from DOM. An ID
should be unique, so you should only use this selector when you want to select a single and unique
element
»E.g.

jQuery Selectors (Contd.)
Class Selectors: This uses class attribute to select elements with a specific class can be matched by writing a
character followed by the name of the class
»E.g.

Element Selectors: This type uses HTML tags to select required elements. It is best practice to use tag name
before using class selector. it's also faster for jQuery to process
» E.g.

Attribute Selectors: With this you can select elements using elements attribute
» E.g.
Universal Selectors
» E.g.

Position Selectors & Psuedo-classes Selectors:
» E.g.

Traversing the DOM
In jQuery, “Traversing” lets us to move through the DOM/HTML Elements in the web page
With “Query Selectors” we make initial selection then move using Traversing functions
Having a strong command of the most common traversal functions will speed up your development time
Most Commons functions:
»find(): Finds all matching elements
» children(): It is same as find, but moves only onelevel down
» closest(): moves up the DOM tree, until it finds the matching element
» parent(): parent also moves up the DOM tree but to a single level
» next(): moves down and targets the immediately following sibling
» prev(): moves just like .next(), but moves up, targeting the immediately preceding sibling
» siblings(): It targets move up and down, targeting all siblings
» first(): Gets the first elements from the selected set
» last(): Gets the last element from the selected set

Traversing the DOM (Contd.)
 find(): This function finds all matching elements from the DOM
» E.g.
Children(): It is same as find, but moves only one level down
» E.g.

closest(): moves up the DOM tree, until it finds the matching element in the DOM
» E.g.
parent(): parent also moves up the DOM tree but to a single level
» E.g.

next(): moves down and targets the immediately following sibling
» E.g.
prev(): moves just like .next(), but moves up, targeting the immediately preceding sibling
» E.g.

siblings(): It targets move up and down, targeting all siblings
» E.g.
first(): Gets the first elements from the selected set
» E.g.
last(): Gets the last element from the selected set
» E.g.

LAB

Hello There!!
My name is Annie.
I love quizzes and
puzzles and I am here to
make you guys think and
answer my questions.
Annie’s Introduction

Annie’s Question
Question: What is $ in jQuery? And why it is used?

Annie’s Answer
AQnusewsteior:n
» In jQuery the $ is simply a function and alias for the
function called jQuery
» It is used in different scenarios depending on what
arguments it is passed

Assignment
Create a webpage with anchor links and form fields and use jQuery selectors to add some styling dynamically
Try to use Below Selectors:
1. Tag Selector
2. Attribute Selector
3. Class selector

Pre-work for Next Module
Learn basics of jQuery Filters and jQuery Effects

Agenda for Next Module
In the next module, you will be able to understand
Adding and Removing DOM elements
 Iterating with each(), DOM elements
 Modifying Properties andAttributes
jQuery Filters
 jQuery Effects, hide/show, fading methods, chaining
Animate Function

Q u est io n s

Your feedback is important to us, be it a compliment, a suggestion or a complaint. It helps us to make
the course better!
Please spare few seconds to take the survey after the webinar.
Survey

Introduction to jQuery

Recommandé

Recommandé

Contenu connexe

Plus de Edureka!

Plus de Edureka! (20)

Dernier

Dernier (20)

Introduction to jQuery