Your SlideShare is downloading. ×
  • Like
Jquery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

Introduction to jquery

Introduction to jquery

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,212
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
62
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. By,Para Vaishnav
  • 2. BASIC IDEA jQuery is one type of JavaScript library. Simplify Web development process. Used widely.
  • 3. USP OF JQUERYJQUERY is an OpenSource
  • 4. USP OF JQUERY JQUERY follows thisFor e.g. $(“#deleted”).addClass(“red”).fadeOut(“slow”);
  • 5. USP OF JQUERY JQUERY supports,Cross-Browser Functionality
  • 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. 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.  Supports All Versions of CSS Size and Speed Instant Plug-ins Great Documentation Large Community
  • 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. 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. SELECTORS #header{Imagine any CSS file margin : 0 } div{ margin : 0px; padding : 0px } ul.menu li{ ….. }Selecting By Id $(“#header”)
  • 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. 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. 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. 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. 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. FROM SCRATCH
  • 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. 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. ThankYou