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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Jquery library

Similar to Jquery library (20)

More from baabtra.com - No. 1 supplier of quality freshers

More from baabtra.com - No. 1 supplier of quality freshers (20)

Recently uploaded

Recently uploaded (20)

Jquery library