Jquery

Abdul Raouf N

[email protected]

www.facebook.com/Abdul Raouf

twitter.com/Abdul Raouf

in.linkedin.com/in/Abdul Raouf

Typing speed:28wpm

JQUERY

http://www.facebook.com/

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

What is jQuery?

jQuery is not a language, but it is a well written JavaScriptcode.

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

jQuery takes a lot of common tasks that require many lines ofJavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Download the jQuery Library

Download a package from jQuery.com and then install a libraryof scripts on your server.

There are two versions of jQuery available for downloading

Production version

Development version

http://docs.jquery.com/Downloading_jQuery

How jQuery Works ?

The jQuery syntax is used to select HTML elements and perform some action on those element(s).

Basic syntax: $(selector).action()

A dollar sign to define jQueryA (selector) to find HTML elementsAn action() to be performed on the element(s)

Syntax Description

$(this) Current HTML element

$("p") All <p> elements

$("p.intro") All <p> elements with class="intro"

$(".intro") All elements with class="intro"

$("#intro") The first element with id="intro"

$("ul li:first") The first <li> element of each <ul>

jQuery Selectors

Event Method Description

$(selector).click(function)Invokes a function when the selected elements are clicked

$(selector).dblclick(function)Invokes a function when the selected elements are double-clicked

$(selector).focus(function)Invokes a function when the selected elements receive the focus

$(selector).mouseover(function)Invokes a function when the mouse is over the selected elements

$(selector).keypress(function)Invokes a function when a key is pressed inside the selected elements

jQuery Events

Function Description

$(selector).hide() Hide selected elements

$(selector).show() Show selected elements

$(selector).toggle()Toggle (between hide and show) selected elements

$(selector).slideDown() Slide-down (show) selected elements

$(selector).slideUp() Slide-up (hide) selected elements

$(selector).slideToggle()Toggle slide-up and slide-down of selected elements

$(selector).fadeIn() Fade in selected elements

$(selector).fadeOut() Fade out selected elements

$(selector).fadeTo() Fade out selected elements to a given opacity

$(selector).fadeToggle() Toggle between fade in and fade out

jQuery Effects

Example

<!DOCTYPE html>

<html><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

});

</script></head>

<body>

<p>If you click on me, I will disappear.</p>

</body>

</html>

Advantages

Lightweight and fast

Open source library

Easy to learn and flexible

THANK YOU...

Want to learn more about programming or Looking to become a good programmer?

Are you wasting time on searching so many contents online?

Do you want to learn things quickly?

Tired of spending huge amount of money to become a Software professional?

Do an online course @ baabtra.com

We put industry standards to practice. Our structured, activity based courses are so designedto make a quick, good software professional out of anybody who holds a passion for coding.

http://baabtra.com/

Follow us @ twitter.com/baabtra

Like us @ facebook.com/baabtra

Subscribe to us @ youtube.com/baabtra

Become a follower @ slideshare.net/BaabtraMentoringPartner

Connect to us @ in.linkedin.com/in/baabtra

Thanks in advance.

www.baabtra.com | www.massbaab.com |www.baabte.com

http://twitter.com/baabtra

http://facebook.com/baabtra

https://www.youtube.com/user/baabtra

http://www.slideshare.net/BaabtraMentoringPartner

in.linkedin.com/in/baabtra

http://www.baabtra.com/

http://www.massbaab.com/

http://www.baabte.com/

Contact Us

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

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

Cafit Square,Hilite Business Park,Near Pantheerankavu,Kozhikode

Start up VillageEranakulam,Kerala, India.

Email: [email protected]

Technology

Jquery