Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

JQuery

By Sandeep Wategave
by

sandeep wategave

on 17 May 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of JQuery

JavaScript
where ?
why
All big companies on the web use JQuery.
*
It is a Collection of predefined javascript functions.
<script src="file///:JQ/JQuery.1.9.0.js" language="javascript">
</script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
jQuery("#btnHide").click(function(){
jQuery("#divId1").hide();
})
jQuery("btnShow").click(function(){
jQuery("divId1").show();
})
})
</script>
*
It is an open source javascript library.
*
It is used for rapid web development.
*
JQuery is a like javascript toolkit.
JQuery is fast, small and feature ritch javascript library.
It supports all major browsers. e.g. Crome,
Firefox, IE, Opera, Safari etc.
Features :
1. Dom Element Selection
2. Dom Element Traversal & Manipulation
3. Dom Element Attribute Handling
4. Event Handling
5. CSS Handling
6. Effects and Animations
7. Ajax Interactions
8. JQuery-UI
9. Extensibility with plugins.
DOM Element Selection
Dom
represents page. e.g. .html, .aspx, Visualforce page etc...
DOM stands for
Document Objact Model
.
jQuery provides a simple interface for doing various kind of amazing effects.
animate( params, [duration, easing, callback] ),
toggle( speed, [callback] ),
slideToggle( speed, [callback] ),
slideUp( speed, [callback] ) etc...
?
Example :
Hide all <div>
javascript code :-
divs = dicument.getElementByTagName('div');
for(i=0; i<divs.length; i++){
divs[i].style.display = 'none';
}
JQuery code :-
$('div').hide();
Production Version (minified version) or
Compressed version.
* JQuery-1.9.1-min.js
Developer Version or UnCompressed version.
* JQuery-1.9.1.js
*
JQuery is created by 'John Resig' in 2005 and
released in jan 2006.
*
It is developed in 'BAR CAMP, NewYork'.
what ?
Syntax :- jQuery(selector).action();
JQuery function ($)
e.g. <div>, <p>, <span>, <body>, <head>,
<input type = "text"> etc...
method or event, e.g.
hide(), show(), mouseover(),
click(), blur(), find(),
*val(), *html() etc...
In this image tag <img id="myImage" src="image.gif" alt="An image"
class="someClass" title="This is an image"/>
attr( properties ), hasClass( class ),
html( ), removeClass( class ),
toggleClass( class ), val( ) etc...
Some of the most basic components we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements..
load(), change(),
click(), focus(),
mouseover(), mouseout(),
keydown(), keyup(),
blur(), submit(), etc...
We have the ability to create dynamic web pages by using events.
Events are actions that can be detected by your Web Application.
Page is a collection of elements.
The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.
DOM Traversal & Manipulation
DOM Element Attribute Handling
Event Handling
CSS Handling
Effects and Animations
Definition
JQuery is a light weight, cross browser javascript library.
Versions :
Introduction
Page is a collection of
elements
. e.g.html <div>, <p>, <span>, <input type="radio">, <img>, <a> etc...
Selectors
are used to filter dom elements. e.g.html <div>, <p>, <span>, <input type="radio">, <img>, <a> etc...
Few imp selectors :
("TagName"), (".className"), ("#Id") e.g. ("p>*"), ("#divId p"), ("p .className"),
("input [type='radio']"),
(":text"),
("li:contains('salesforce')")
DOM Traversal Methods are used to filter out elements from a document based on given conditions.
eq(index), next(selector),
filter(selector) , not (selector). slice(selector), add(selector),
end(selector), find(selector), nextAll([selector]) etc...
jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method.
Example :- hide() and show()
css(name, value), height(val),
width(val), positions(),
scrollLeft(val), scrollTop(val),
innerWidth(), innerHeight(),
outerWidth(), outerHeight(),
jQuery methods allow us to quickly apply commonly used effects with a minimum configuration.
Example : animate();
Full transcript