jquery
DESCRIPTION
Introduction to jqueryTRANSCRIPT
![Page 1: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/1.jpg)
By,Para Vaishnav
![Page 2: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/2.jpg)
BASIC IDEA
jQuery is one type of JavaScript library.
Simplify Web development process.
Used widely.
![Page 3: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/3.jpg)
USP OF JQUERY
JQUERY is an Open Source
![Page 4: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/4.jpg)
USP OF JQUERY
JQUERY follows this
For e.g. $(“#deleted”).addClass(“red”).fadeOut(“slow”);
![Page 5: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/5.jpg)
JQUERY supports,Cross-Browser Functionality
USP OF JQUERY
![Page 6: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/6.jpg)
WHY USE JQUERY?
Ease of use
JQUERY is reusable-plug and playIt is Compact-no need of writing long long javascript
AJAX support $(“#comments”).load(“/get_comments.php”);
Creates Effects and AnimationsNext
![Page 7: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/7.jpg)
$.post('ajax_test.php',{ fname : 'Henry', lname : 'Ford' },function(resp) { $('#myDiv').html(resp); });Wednesday, September
var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-wwwform-urlencoded");xmlhttp.send("fname=Henry&lname=Ford");xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {document.getElementById("myDiv").innerHTML =xmlhttp.responseText;}};Wednesday, September
Back
![Page 8: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/8.jpg)
Supports All Versions of CSS Size and Speed Instant Plug-ins Great Documentation Large Community
![Page 9: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/9.jpg)
First Download the latest version of JQUERY
.JS file from http://jquery.com/
Documentation from http://code.google.com/apis/libraries/devguide.html#jquery
Plug-ins from http://plugins.jquery.com/
HOW TO USE JQUERY?
![Page 10: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/10.jpg)
KNOW JQUERY'S PARTS
$(“DIV”).ADDCLASS(“XYZ”);
Do something with them
{
}jQuery Object
Find Some Elements
For e.g. $(“p”).addClass(“blue”);
<p class=“blue”>Hello Students</p>
![Page 11: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/11.jpg)
SELECTORS#header{
margin : 0 }
div{margin :
0px;padding :
0px}
ul.menu li{…..
}
Imagine any CSS file
Selecting By Id
$(“#header”)
![Page 12: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/12.jpg)
FILTERS Basic Filters :
:first, :last, :even, :odd, …... Content Filters:
:empty , :contains(text), :has(selector), ….. Attribute Filters:
[attribute], [attribute=value], [attribute!=value], …..
For e.g.$(“#students tr:even”).css(“background-color”, “#dde”)
It selects even elements and change BGcolor of that <td> (index starts from zero)Name Class Roll No. Comment
Raju XII 2 Good
Masud IX 1 Good
Apu XII 3
![Page 13: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/13.jpg)
JQUERY METHODS
DOM Manipulation before(), after(), append(), appendTo(), …..
Attributes css(), addClass(), attr(), html(), val(), …..
Events click(), bind(), unbind(), live(), …..
Effects hide(), fadeOut(), toggle(), animate(), …..
Ajax load(), get(), ajax(),.ajaxStart()…..
![Page 14: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/14.jpg)
DOM MANIPULATION EXAMPLEMove all paragraphs in div with id “contents”
<body> <h1>jQuery</h1><p>jQuery is good</p><p>jQuery is better</p><div id=“contents”></div><p>jQuery is the best</p>
</body>
$(“p”).appendTo(“#contents”); will append <p> in <div id=“contents”> <h1>jQuery</h1>
<div id=“contents”><p>jQuery is
good</p><p>jQuery is
better</p><p>jQuery is the
best</p></div>
</body>
![Page 15: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/15.jpg)
ATTRIBUTE EXAMPLEMake the texts of last paragraph bold
$(“#contents p:last”).css(“color”, “green”);
<body> <h1>jQuery Dom Manipulation</h1> <div id=“contents”>
<p >jQuery is good</p><p>jQuery is better</p><p style=“color:green”>jQuery is the best</p></div>
</body>
Also we can Get or Set the values of attributes :
Set : $(“img.logo”).attr(“align”, “left”);
Get : var allignment = $(“img.logo”).attr(“align”);
![Page 16: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/16.jpg)
IMPLEMENTING JQUERY
We can implement JQUERY in two waysfunction slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next(); $next.addClass('active'); $active.removeClass('active');
} $(function() { setInterval( "slideSwitch()", 5000 ); });
Use ready plug-ins
From Scratch
![Page 17: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/17.jpg)
FROM SCRATCH
![Page 18: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/18.jpg)
USING PLUG-INS
Download the plug-in (any version) Unzip the downloaded file to a folder and put it
whichever application you are using. Add the plug-in's JavaScript and CSS files inside the
header section of your Web page: For e.g
Change in styles and css according to your needs And you are ready to use your customized plug-ins .
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script src="star-rating/jquery.rating.js"></script>
![Page 19: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/19.jpg)
SOURCE
Links :- jquery.com http://blog.themeforest.net/ http://code.google.com/apis/libraries/
devguide.html#jquery http://en.wikipedia.org/wiki/JQuery#Etymology
E-Books :- JQUERY NOVICE TO NINJA
-earle castledine & craig sharkie
![Page 20: Jquery](https://reader035.vdocument.in/reader035/viewer/2022070316/5558befcd8b42aa52a8b511c/html5/thumbnails/20.jpg)
Thank You