jQuery - PUCIT | ACM Student Chapter
jQuery - PUCIT | ACM Student Chapter
jQuery - PUCIT | ACM Student Chapter
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>jQuery</strong> j y<br />
Write Less Do More<br />
Kashif Munir Mazhar<br />
Software Engineer, i2c Inc.
Today’s y Goals !!!<br />
1<br />
2<br />
3<br />
4<br />
5<br />
What is <strong>jQuery</strong>?<br />
Why <strong>jQuery</strong>?<br />
How to use <strong>jQuery</strong>?<br />
Master yourself y … (if you do not mind :P)<br />
But First …<br />
Kashif Munir Mazhar
Intended Audience<br />
<strong>Student</strong>s *<br />
Developers (S/W) *<br />
TTeachers h *<br />
*can be any one who have a little bit knowledge of HTML CSS and JavaScript<br />
Kashif Munir Mazhar
Lets Know Our Audience ?<br />
Kashif Munir Mazhar
What is <strong>jQuery</strong><br />
<strong>jQuery</strong> is fast and concise<br />
JavaScript library which is used for<br />
the creation of ...<br />
Animations<br />
Communication to server<br />
Document traversing<br />
Event handling<br />
Kashif Munir Mazhar
Why <strong>jQuery</strong><br />
<strong>jQuery</strong> j y makes writingg JavaScript p much easier<br />
DOM navigation (CSS-like syntax)<br />
Apply methods to sets of DOM elements<br />
Extensible and tons of libraries<br />
Cross browser<br />
Server provides data<br />
<strong>jQuery</strong> provides presentation on client<br />
Kashif Munir Mazhar
Above All ...<br />
Write Less Do More<br />
Kashif Munir Mazhar
Pros and Cons<br />
1. Great Documentation<br />
2. Simple p Event Handling g<br />
3. Excellent DOM<br />
Manipulation<br />
4. Cross browser<br />
5. Ajax support<br />
<strong>jQuery</strong><br />
1 . Support<br />
22. No Direct Widgets<br />
3. <strong>jQuery</strong> JavaScript<br />
File Required<br />
Kashif Munir Mazhar
<strong>jQuery</strong> Library Features<br />
The <strong>jQuery</strong> library contains the following features:<br />
* HTML element selections<br />
* HTML element manipulation<br />
* CSS manipulation<br />
* HTML event functions<br />
* JavaScript effects and animations<br />
* HTML DOM traversal and modification<br />
* AJAX<br />
* Utilities<br />
Kashif Munir Mazhar
Master Yourself<br />
<strong>jQuery</strong><br />
Function<br />
HTML<br />
Done<br />
Isn’t it easy ? Looks Like<br />
Kashif Munir Mazhar
Adding <strong>jQuery</strong> Library<br />
Can be added with following mark-up:<br />
*
<strong>jQuery</strong> Syntax<br />
$(Selector).action();<br />
* A dollar sign to define <strong>jQuery</strong><br />
* A (selector) to "query query (or find)" find) HTML elements<br />
* A <strong>jQuery</strong> action() to be performed upon the element(s)<br />
Kashif Munir Mazhar
Example<br />
$(Selector).action();<br />
<br />
<br />
<br />
$(d $(document).ready(function(){<br />
) d (f i (){<br />
$("#hide").click(function(){<br />
$("p").hide();<br />
$("#changeColor").hide();<br />
g<br />
});});<br />
function setColor() {$("p").css('background','gray');}<br />
$(function() {alert('Start of Script: Like smart window.onload. Explained in next<br />
section section.');});<br />
');});<br />
<strong>jQuery</strong> Hide FunctionThis is a paragraph.This is another<br />
paragraph.<br />
<br />
<br />
<br />
Kashif Munir Mazhar
The Document Ready Function<br />
You might have noticed that all <strong>jQuery</strong> functions, in our<br />
examples, p , are inside a document ready y function But we can<br />
write it outside too:<br />
$(document).ready(function(){<br />
--- <strong>jQuery</strong> functions go here ----<br />
});<br />
Kashif Munir Mazhar
<strong>jQuery</strong> Reference<br />
<strong>jQuery</strong> Selectors<br />
<strong>jQuery</strong> Events<br />
<strong>jQuery</strong> Effects<br />
<strong>jQuery</strong> HTML<br />
<strong>jQuery</strong> j y<br />
CSS<br />
Kashif Munir Mazhar
AJAX and <strong>jQuery</strong><br />
<strong>jQuery</strong> provides a rich set of methods (functions) for AJAX<br />
web development development. With <strong>jQuery</strong> AJAX AJAX, you can request<br />
TXT<br />
HTML<br />
JSON<br />
data from a remote sever using both HTTP/S Get and<br />
HTTP/S Post.And you can load remote data directly into<br />
selected HTML elements of your web page!<br />
Kashif Munir Mazhar
AJAX and <strong>jQuery</strong><br />
<strong>jQuery</strong> AJAX Requests Request Description<br />
$(selector) $(selector).load(url,data,callback) load(url data callback) Load remote data into selected elements<br />
$.get(url,data,callback,type)<br />
GET<br />
Load remote data using HTTP<br />
$.post(url,data,callback,type) Load remote data using HTTP<br />
POST<br />
$.getJSON(url,data,callback)<br />
Load remote JSON data using<br />
HTTP GET<br />
$ $.getScript(url,callback)<br />
getScript(url callback) Load and execute a remote<br />
JavaScript file<br />
Kashif Munir Mazhar
Selectors<br />
URL :<br />
The URL (address) of data to be loaded<br />
Data :<br />
Key/value pairs of data to send to the server<br />
CCallback: llb k<br />
Function to be executed when data is loaded<br />
Type:<br />
Type of data to be returned (html,xml,json,script,text)<br />
Options:<br />
All key/value pairs of options for a complete AJAX request<br />
Kashif Munir Mazhar
Kashif Munir Mazhar<br />
Edit your company slogan<br />
Software Engineer, i2c Inc.
Contact me…<br />
Email: kashifmirza7@gmail.com<br />
Web: http://about.me/kashifmirza<br />
Kashif Munir Mazhar<br />
Edit your company slogan<br />
Software Engineer, i2c Inc.
Change language