Scribd
Upload
81 views

Tutorial: Basant Namdeo Iips, Davv

This document provides an overview of jQuery, a JavaScript library. It discusses that jQuery simplifies tasks like DOM manipulation, event handling, animation, and Ajax. It is lightweight, free to use, and has cross-browser support. The document demonstrates how to select elements, handle events, modify CSS, and work with forms using jQuery. It provides examples of mouseover, click, and blur events as well as changing styles and validating forms. jQuery allows for easy animation, DOM manipulation, and event handling across browsers.

Uploaded by

Madhvi Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
81 views

Tutorial: Basant Namdeo Iips, Davv

This document provides an overview of jQuery, a JavaScript library. It discusses that jQuery simplifies tasks like DOM manipulation, event handling, animation, and Ajax. It is lightweight, free to use, and has cross-browser support. The document demonstrates how to select elements, handle events, modify CSS, and work with forms using jQuery. It provides examples of mouseover, click, and blur events as well as changing styles and validating forms. jQuery allows for easy animation, DOM manipulation, and event handling across browsers.

Uploaded by

Madhvi Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

Tutorial

Basant Namdeo
IIPS, DAVV
What is jQuery?
 JavaScript Library

 Functionality
• DOM scripting & event handling
• Ajax
• User interface effects
• Form validation
Why jQuery?
 Lightweight– 14kb (Minified and Gzipped)
 It is free to use.
 Simplifies the task of creating highly responsive web
pages.
 Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+,
Opera 9.0+)
 CSS-like syntax – easy for developers/non-developers
to understand
 Active developer community
 Extensible - plugins
 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
 Events
• Browsers are preprogrammed to recognize
certain actions such as clicking, page loading,
mouse movements etc.
• You write programs to respond to these events
• Two Step process
 Identify the element that you want to respond to the
event
 Assign an event and create a function to run when
event occurs
 Mouse Events
• Click, dblclick, mousedown, mouseup,
mouseover, mouseout, mousemove
 Document/Window Events
• Load, resize
 Form Events
• Submit, reset, change, focus, blur
 Keyboard Events
• Keypress, keydown
 Techniques for using Events
• Inline Events
 < a href=“somepage.html” onmouseover =“alert(‘Some
Message’);”>Link Message</a>
 Add the word “on” to the event
 Add directly inside of HTML
 Downside: JS is now scattered throughout your HTML
• Traditional Technique
 Assign the event to an element but stay out of the HTML
 Within the <script> tags in head or body add
window.onload=message;
 Here a function called message is called after the page loads
Example – Show/Hide the old way
In HTML:
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle
visibility of #foo</a>

In JavaScript Function is :
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Example – Show/Hide with jQuery
$(document).ready(function(){
$("a").click(function(){
$("#more").toggle("slow");
return false;
});
});
By this When the document is ready a anonymous function is
attached to all the anchors(<a> tag) on the page. This code will simply
toggle the visibility of the element whose id is more.
 How to use jQuery?
1) Download the latest jQuery javascript file from the
http://jquery.com/download/ site.
2) Add this .js file to your webpage
<head>
<script src=“jqueryFileName.js"></script>
</head

3) Now we can use the jQuery effects and other methods in our regular
javascript block.
<body>
……..Regular HTML Tags………….
<script language=“javascript”>
JavaScript Statements……….
</script>
</body>
 Techniques for using Events
• Previous techniques only allow one function
assigned to an event per element ( tag)
 JQuery Way
• Select element - $(‘a’)
• Assign an event - $(‘a’).mouseover()
• Pass function to event or use anonymous function
- $(‘a’).mouseover(MyFunction,[callBackFunction])
We can also bind the callBack Function to the event. This function will execute
after the MyFunction
Another Way of Adding Events
 bind(eventname, function,callBack)
method
• ‘click’, ‘change’, ‘resize’, ‘mousemove’,
‘mouseover’ , ‘mouseenter’, ‘mouseout’ ,
‘keydown’, ‘keypress’, ‘keyup’, ’submit’, ‘focus’
etc……
• Event list can be found on :
http://api.jquery.com/category/events/
 For Example :
 $(“a[href^=http://www.google]”).bind(‘click’,function(){
$(this).addClass(‘red’);});
this will select all a (anchor) whose href attribute value start with
http://www.google
 Effects….
• The jQuery library provides several techniques for adding animation
to a web page. These include simple, standard animations that are
frequently used, and the ability to craft sophisticated custom effects.
• Some of them are:
fadeIn(), fadeOut(), fadeTo(), show(), hide(),
slideUp(), slideDown(), toggle(), animate()
 Complete list can be found on
 http://api.jquery.com/category/effects/
 JqueryExample of mouseover event that
shows a submenu when menu selected:
$(‘#menu’).mouseover(function() {
$(‘#submenu’).show();
});
 Stopping a mormal event action
• Example: when a link is clicked the URL is
followed
 To stop that action:
 The action is part of the event object
 We can reference the event object and call
.preventDefault();
$(‘#menu’).click(function(evt){
……. JS code here………….
evt.preventDefault();
});
 Changing CSS
.css(‘property’, ‘value’)
.css({‘prop1’:‘value1’, ‘prop2’:’value2’…})
 E.g.

$(‘#d1’).css(‘color’, ‘red’)

$(‘#d1’).css({‘color’ :‘red’,’background-color’:’rgb(150,140,130)’})
 Forms
• Form example
 Selecting Form Elements
• Assign an ID to it
 <input name=“user” type=“text” id=“user”>
 var userfield = $(‘#user’);
• Manipulating Selected form element
 .val will get the value of the element:
 var userfield = $(‘#user’).val();
 Selecting all form elements of certain type:
• $(‘:text’)
• Selects all text fields
• Use with :input ( all form elements), :password, :radio,
:checkbox, :submit, :image, :reset, :button, :file, :hidden
• Can use descendant selectors too $(‘#signup : text’)
 Set the value of a form element
• var fieldvalue = $(‘#total’).val(Yourvalue);
 Determining if box is checked
if ($(‘#total’).attr(‘checked’)) {
Do stuff if box is checked
}
else {
Do stuff if box is not checked
}
 Form Events
Submit
$(document).ready(function() {
$(‘#signup’).submit(function() {
if ($(‘#username’).val() ==‘’) {
alert (‘Please supply name to name field’);
return false;
}
});
});
 Focus
• Example: Auto erases default text in a field when it gets
the focus

• <input name=“username” type=“text” id=“username”


value=“Please type your user name”>

$(‘#username’).focus(function() {
var field = $(this);
if(field.val()==field.prop(‘defaultValue’)) {
field.val(‘’);
}
});
 Blur
 In HTML
 <input name=“quantity” type=“text” id=“quantity”>
 In JavaScript
$(‘#quantity’).blur(function) {
var fieldValue=$(this).val();
if (isNaN(fieldValue)) {
alert(‘Please enter a number’);
}
});
 Click
• If any radio button is clicked
$(‘:radio’).click(function() {
do stuff
});
 Canadd focus to the first element of the
form:
• $(‘username’).focus;
Find more Information on
 www.jquery.com
 http://www.w3schools.com/jquery/

Thanks

You might also like