Your SlideShare is downloading. ×
0
By,Para Vaishnav
BASIC IDEA jQuery   is one type of JavaScript  library. Simplify Web development  process. Used widely.
USP OF JQUERYJQUERY is an OpenSource
USP OF JQUERY            JQUERY follows thisFor e.g. $(“#deleted”).addClass(“red”).fadeOut(“slow”);
USP OF JQUERY   JQUERY supports,Cross-Browser Functionality
WHY USE JQUERY?   Ease of use         JQUERY is reusable         -plug and play         It is Compact         -no need of...
var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} els...
   Supports All Versions of CSS   Size and Speed   Instant Plug-ins   Great Documentation   Large Community
HOW TO USE JQUERY?   First Download the latest version of JQUERY.JS file from  http://jquery.com/Documentation from    ht...
KNOW JQUERYS PARTS Find Some Elements  {   $(“DIV”).ADDCLASS(“XYZ”);   jQuery Object      }                      Do someth...
SELECTORS                     #header{Imagine any CSS   file      margin : 0                            }                 ...
FILTERS        Basic Filters :             :first, :last, :even, :odd, …...        Content Filters:             :empty...
JQUERY METHODS   DOM Manipulation       before(), after(), append(), appendTo(), …..   Attributes       css(), addClas...
DOM MANIPULATION EXAMPLE           Move all paragraphs in div with id “contents”                                 <body>   ...
ATTRIBUTE EXAMPLE         Make the texts of last paragraph bold        $(“#contents p:last”).css(“color”, “green”); <body>...
IMPLEMENTING JQUERY     We can implement JQUERY in two ways                  function slideSwitch()                  {   F...
FROM SCRATCH
USING PLUG-INS   Download the plug-in (any version)   Unzip the downloaded file to a folder and put it whichever    appl...
SOURCE   Links :-   jquery.com   http://blog.themeforest.net/   http://code.google.com/apis/libraries/devguide.html#jq...
ThankYou
Upcoming SlideShare
Loading in...5
×

Jquery

2,295

Published on

Introduction to jquery

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,295
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Jquery"

  1. 1. By,Para Vaishnav
  2. 2. BASIC IDEA jQuery is one type of JavaScript library. Simplify Web development process. Used widely.
  3. 3. USP OF JQUERYJQUERY is an OpenSource
  4. 4. USP OF JQUERY JQUERY follows thisFor e.g. $(“#deleted”).addClass(“red”).fadeOut(“slow”);
  5. 5. USP OF JQUERY JQUERY supports,Cross-Browser Functionality
  6. 6. WHY USE JQUERY? Ease of use JQUERY is reusable -plug and play It is Compact -no need of writing long long javascript AJAX support  $(“#comments”).load(“/get_comments.php”); Creates Effects and Animations Next
  7. 7. var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); $.post(} ajax_test.php,xmlhttp.open("POST","ajax_test.asp",true); { fname : Henry, lname : Ford },xmlhttp.setRequestHeader("Content- function(resp) {type","application/x-wwwform- $(#myDiv).html(resp); }urlencoded"); );xmlhttp.send("fname=Henry&lname=Ford"); Wednesday, Septemberxmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status ==200) {document.getElementById("myDiv").innerHTML =xmlhttp.responseText;}};Wednesday, September Back
  8. 8.  Supports All Versions of CSS Size and Speed Instant Plug-ins Great Documentation Large Community
  9. 9. HOW TO USE JQUERY? First Download the latest version of JQUERY.JS file from http://jquery.com/Documentation from http://code.google.com/apis/libraries/devguide.html#jqueryPlug-ins from http://plugins.jquery.com/
  10. 10. KNOW JQUERYS PARTS Find Some Elements { $(“DIV”).ADDCLASS(“XYZ”); jQuery Object } Do something with themFor e.g.$(“p”).addClass(“blue”);<p class=“blue”>Hello Students</p>
  11. 11. SELECTORS #header{Imagine any CSS file margin : 0 } div{ margin : 0px; padding : 0px } ul.menu li{ ….. }Selecting By Id $(“#header”)
  12. 12. 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
  13. 13. 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()…..
  14. 14. DOM MANIPULATION EXAMPLE Move 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>
  15. 15. ATTRIBUTE EXAMPLE Make 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”);
  16. 16. IMPLEMENTING JQUERY We can implement JQUERY in two ways function slideSwitch() { From Scratch var $active = $(#slideshow IMG.active); var $next = $active.next(); $next.addClass(active); $active.removeClass(active); } $(function() { setInterval( "slideSwitch()", 5000 ); });Use ready plug-ins
  17. 17. FROM SCRATCH
  18. 18. 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-ins JavaScript and CSS files inside the header section of your Web page:  For e.g <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script src="star-rating/jquery.rating.js"></script> Change in styles and css according to your needs And you are ready to use your customized plug-ins .
  19. 19. 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
  20. 20. ThankYou
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×