J query

Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .
Ltd

jQuery Validation
Atheendrh Kakkothh
atheendrh@gmail.com
www.facebook.com/atheend
rhkakkoth
twitter.com/username
in.linkedin.com/in/atheendr
h kakkoth
9633734876

Typing Speed
Week

Target Achieved

1

30

2
3

28

What is jQuery?
• JavaScript Library
• jQuery is a lightweight, "write less, do more",
JavaScript library.
• The purpose of jQuery is to make it much easier to use
JavaScript on your website
• The jQuery library contains the following features:






HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX

Why jQuery?
• Cross-browser support (IE 6.0+, FF 1.5+, Safari
2.0+, Opera 9.0+)
• CSS-like syntax – easy for developers/nondevelopers to understand
• Active developer community

JQuery
• Powerful JavaScript library
– Simplify common JavaScript tasks
– Access parts of a page
• using CSS or XPath-like expressions

–
–
–
–
–
–

Modify the appearance of a page
Alter the content of a page
Change the user’s interaction with a page
Add animation to a page
Provide AJAX support
Abstract away browser quirks

A Few Examples
•
•
•
•
•
•
•
•

Forms
Chatboxes
Menus
Dropdowns
Sliders
Tabs
Slideshows
Games

Using jQuery
• Adding jQuery to Your Web Pages
 There are several ways to start using jQuery on your
web site. You can:
 Download the jQuery library from jQuery.com
 Include jQuery from the file

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

The Document Ready Event
•

You might have noticed that all jQuery methods in our examples, are inside a
document ready event:

$(document).ready(function(){
// jQuery methods go here...
});

•
•

This is to prevent any jQuery code from running before the document is finished
loading (is ready).
This also allows you to have your JavaScript code before the body of your
document, in the head section.

jQuery Selectors
• jQuery selectors allow to select and manipulate HTML
element(s).
• jQuery selectors are used to "find" (or select) HTML elements
based on their id, classes, types, attributes, values of
attributes and much more. It's based on the existing CSS
Selectors, and in addition, it has some own custom selectors.
• All selectors in jQuery start with the dollar sign

The element Selector
jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")

The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want
to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the
element:
$("#test")
The .class Selector
The jQuery class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the
class:
$(".test")

What are Events?
• All the different visitor's actions that a web page can respond
to are called events.
• An event represents the precise moment when something
happens.
• Examples:
 moving a mouse over an element
 selecting a radio button
 clicking on an element

Click() event
$("p").click(function(){
$(this).hide();
});

Before
validation

After
validation

jQuery Animations
• Animations
• Built in
–
–
–
–
–
–
–
–
–
–

fadeIn()
fadeOut()
hide()
show()
slideDown()
slideUp()
toggle()
slideToggle()
fadeTo()
animate()

• See also:
– Easing Plug-in
– jQuery User Interface: http://ui.jquery.com

Who’s using jQuery?
•
•
•
•
•
•

Google
Dell
Bank of America
Mozilla
NetFlix
NB

If this presentation helped you, please visit our
page facebook.com/baabtra and like it.

Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com

Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550

Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com

NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550

J query

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a J query

Similar a J query (20)

Más de baabtra.com - No. 1 supplier of quality freshers

Más de baabtra.com - No. 1 supplier of quality freshers (20)

Último

Último (20)

J query