Jquery library

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.

Typing Speed
Week

Target Achieved

1

40

25

2

35

28

3

35

29

Jobs Applied
#

Company

Designation

Applied Date

1

HashInclude
Technologies

Web Designer

09-Aug-2013

2

HashInclude
Technologies

PHP developer

09-Aug-2013

3

Current Status

jQuery
write less, do more

SUHAIL K.P
suhailkp007@gmail.
com
www.facebook.com
/suhilkp007
twitter.com/suhilk
p007

What is jQuery?

• library of JavaScript Functions.
• Takes a lot of common tasks that require many lines of JavaScript
code to accomplish, and wraps them into methods that can call
with a single line of code.
• simplifies complicated things from JavaScript, like AJAX calls and
DOM manipulation.
• The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Why jQuery?
• There are lots of other JavaScript frameworks like
MooTools, YUI , Dojo etc but jQuery seems to be
the most popular, and also the most extendable.
• Many of the biggest companies on the Web use
jQuery, such as:
Google
Microsoft
IBM
Netflix

How to install jQuery ?
• You can download jQuery library from jQuery.com
•

•

If you don't want to store the jQuery library on your own computer, you can use
the hosted jQuery library from Google ,Microsoft or jQuery website.
Google

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

•

Microsoft

src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>

•

jQuery

src=" http://code.jquery.com/jquery-latest.js">
</script>

How to use jQuery library?
include jquery library in your HTML file as follows

<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript“ src="jquery1.3.2.min.js“ >
</script>
<script type="text/javascript">
// you can add our javascript code here </script>
</head>
<body> ........ </body>
</html>

How to call a jQuery library
functions?
you want an event to work on your page, you should call it
inside the $(document).ready() function. Everything inside it
will load as soon as the DOM is loaded and before the page
contents are loaded.
To do this, we register a ready event for the document as follows:

$(document).ready(function()
{
// do stuff when DOM is ready
});

jQuery Syntax
• The jQuery syntax for selecting HTML elements and perform
some action on the element(s).
• Basic syntax is: $(selector).action()
– A dollar sign to define jQuery(synonym of jQuery())
– A (selector) to "query (or find)" HTML elements
– A jQuery action() to be performed on the element(s)

• Examples:
–
–
–
–

$(this).hide() - hides current element
$("p").hide() - hides all paragraphs
$("p.test").hide() - hides all paragraphs with class="test"
$("#test").hide() - hides the element with id="test"

Selectors
• jQuery selectors allow you to select and manipulate
HTML element(s).
• You can instantiate the jQuery object simply by writing
jQuery() or even shorter using the jQuery shortcut
name: $(). Therefore, selecting a set of elements is as
simple as this:
$(<query >)
• With the jQuery object returned, you can then start
using and altering the element(s) you have matched.

SELECT DOM ELEMENTS

• Selecting DOM elements through
document based on the css selectors.
• The #id selector
$(document).ready(function() {
$(“#d1").text("Test");
});

• This code will be applied on only one
element whose ID attribute is d1.

SELECT DOM ELEMENTS(CONT’D)


The .class selector

$(“.para").text("Test");
});


This code will be applied on all elements with the
.para class

SELECT DOM ELEMENTS(CONT’D)


The element selector

$(“div").text("Test");
});


This code will be applied on all <div> tags

SOME MORE EXAMPLES
Syntax

Description

$(this)

Current HTML element

$("p")

All <p> elements

$("p.intro")

All <p> elements with class="intro"

$("p#intro")

All <p> elements with id="intro"

$("p.intro:first")

The first <p> element with class="intro"

$(".intro")

All elements with class="intro"

$("#intro")

The first element with id="intro"

$("ul li:first")

The first <li> element of the first <ul>

$("ul li:first-child")

The first <li> element of every <ul>

$("[href$='.jpg']")

All elements with an href attribute that ends with
".jpg"

$("div#intro .head")

All elements with class="head" inside a <div>
element with id="intro"

JQUERY






EVENTS

The jQuery event handling methods are core functions in jQuery.
Event handlers are method that are called when "something happens"
in HTML
$("button").click(function() {..some code... } )
EX:


$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

JQUERY


EVENTS(CONT’D)

Here are some examples of event methods in jQuery:

Event Method

Description

$(document).ready(function)

Binds a function to the ready event of a
document
(when the document is finished loading)

$(selector).click(function)

Triggers, or binds a function to the click event of
selected elements

$(selector).dblclick(function)

Triggers, or binds a function to the double click
event of selected elements

$(selector).focus(function)

Triggers, or binds a function to the focus event
of selected elements

$(selector).mouseover(function)

Triggers, or binds a function to the mouseover
event of selected elements

jQuery - DOM Traversing

• which provides a variety of DOM traversal methods to help
us to select elements in a document.
• DOM Traversal Methods do not modify the jQuery object
and they are used to filter out elements from a document
based on given conditions.

For Example :

<html>
<head>
<title>the title</title>
</head><body><div>
<ul>
<li>list item 1</li>
</ul> </div> </body> </html>

Above every list has its own index, and can be located directly by using
eq(index),
Eg: $("li").eq(1)

jQuery - AJAX
•jQuery provides several methods for AJAX functionality.
jQuery load() Method

 The load() method loads data from a server and puts the
returned data into the selected element.

Syntax:

$(selector).load(URL,data,callback);
•The required URL parameter specifies the URL you wish to load.
•The optional data parameter specifies a set of querystring key/value pairs to send
along with the request.
•The optional callback parameter is the name of a function to be executed after the
load() method is completed.

Form Validation Example
example

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

Jquery library

Related slideshows

More Related Content

Jquery library