jquery
Post on 17-May-2015
2.268 Views
Preview:
DESCRIPTION
TRANSCRIPT
By,Para Vaishnav
BASIC IDEA
jQuery is one type of JavaScript library.
Simplify Web development process.
Used widely.
USP OF JQUERY
JQUERY is an Open Source
USP OF JQUERY
JQUERY follows this
For e.g. $(“#deleted”).addClass(“red”).fadeOut(“slow”);
JQUERY supports,Cross-Browser Functionality
USP OF JQUERY
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
$.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
Supports All Versions of CSS Size and Speed Instant Plug-ins Great Documentation Large Community
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?
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>
SELECTORS#header{
margin : 0 }
div{margin :
0px;padding :
0px}
ul.menu li{…..
}
Imagine any CSS file
Selecting By Id
$(“#header”)
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
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()…..
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>
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”);
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
FROM SCRATCH
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>
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
Thank You
top related