1 / 44

jQuery: The Fast and Feature-Rich JavaScript Library for Web Development

jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversal, manipulation, event handling, animation, and AJAX. With an easy-to-use API that works across various browsers, jQuery has transformed how millions write JavaScript, enhancing versatility and extensibility. This library provides tools for seamless HTML/DOM manipulation and powerful animations. It includes production and development versions, enabling efficient use in live or test environments. Explore jQuery to elevate your web development experience with clean and concise code.

brigid
Download Presentation

jQuery: The Fast and Feature-Rich JavaScript Library for Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. http://jquery.com/ • What is jQuery? • jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

  2. jQuery library • HTML/DOM manipulation • CSS manipulation • HTML event methods • Effects and animations • AJAX • Utilities

  3. jQuery download • Production version - this is for your live website because it has been minified and compressed • Development version - this is for testing and development (uncompressed and readable code) • jQuery 1.x • http://code.jquery.com/jquery-1.11.1.js • http://code.jquery.com/jquery-1.11.1.min.js • jQuery 2.x • http://code.jquery.com/jquery-2.1.1.js • http://code.jquery.com/jquery-2.1.1.min.js

  4. jQuery install • <head><script src="jquery-1.11.1.min.js"></script></head> • GOOGLE CDN(Content Delivery Network): • <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></head> • Microsoft CDN: • <head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script></head>

  5. jQuery Syntax • Basic syntax is: $(selector).action() • A $ sign to define/access jQuery • A (selector) to "query (or find)" HTML elements • A jQuery action() to be performed on the element(s) • Examples: • $(this).hide() - hides the current element. • $("p").hide() - hides all <p> elements. • $(".test").hide() - hides all elements with class="test". • $("#test").hide() - hides the element with id="test".

  6. Document Ready Event • $(document).ready(function(){// jQuery methods go here...}); • $(function(){// jQuery methods go here...});

  7. jQuery Selectors • All selectors in jQuery start with the dollar sign and parentheses: $(). • The element Selector: $("p") • The #id Selector: $("#test") • The .class Selector: $(".test")

  8. jQuery Event Methods $("p").click(function(){  // action goes here!!});

  9. jQuery Effects - Hide and Show • $(selector).hide(speed,callback); • $("#hide").click(function(){ $("p").hide(); }); • $(selector).show(speed,callback); • $("#show").click(function(){ $("p").show(); }); • $(selector).toggle(speed,callback); $("button").click(function(){$("p").toggle();});

  10. jQuery Effects - Fading • $(selector).fadeIn(speed,callback); • $(selector).fadeOut(speed,callback); • $(selector).fadeToggle(speed,callback); • $(selector).fadeTo(speed,opacity,callback);

  11. jQuery Effects - Sliding • $(selector).slideDown(speed,callback); • $(selector).slideUp(speed,callback); • $(selector).slideToggle(speed,callback);

  12. jQuery Animations - The animate() Method • $(selector).animate({params},speed,callback); • $("button").click(function(){  $("div").animate({    left:'250px',    height:'+=150px',    width:'+=150px'  });}); • $("button").click(function(){  $("div").animate({height:'toggle'  });}); 

  13. jQuery stop() animation Method • $(selector).stop(stopAll,goToEnd); • $("#stop").click(function(){  $("#panel").stop();});

  14. <script> • $(document).ready(function(){ • $("#start").click(function(){ • $("div").animate({left:'100px'},5000); • $("div").animate({fontSize:'3em'},5000); • }); • $("#stop").click(function(){ • $("div").stop(); • }); • $("#stop2").click(function(){ • $("div").stop(true); • }); • $("#stop3").click(function(){ • $("div").stop(true,true); • }); • }); • </script>

  15. Simultaneous animations $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px', fontSize:'3em'},5000); //$("div").animate({fontSize:'3em'},5000); });

  16. jQuery Callback Functions • $(selector).hide(speed,callback); • $("button").click(function(){  $("p").hide("slow",function(){    alert("The paragraph is now hidden");  });}); • $("button").click(function(){  $("p").hide(1000);  alert("The paragraph is now hidden");});

  17. jQuery Method Chaining • $("#p1").css("color","red").slideUp(2000).slideDown(2000);

  18. jQuery DOM Manipulation • text() - Sets or returns the text content of selected elements • html() - Sets or returns the content of selected elements (including HTML markup) • val() - Sets or returns the value of form fields • $("#btn1").click(function(){alert("Text: " + $("#test").text());}); • $("#btn2").click(function(){alert("HTML: " + $("#test").html());}); • $("#btn1").click(function(){alert("Value: " + $("#test").val());}); • $("button").click(function(){alert($("#w3s").attr("href"));});

  19. Set Content - text(), html() and val() • $("#btn1").click(function(){ $("#test1").text("Hello world!");}); • $("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");}); • $("#btn3").click(function(){$("#test3").val("Dolly Duck");});

  20. Callback Function for text(), html(), and val() • $("#btn1").click(function(){  $("#test1").text(function(i,origText){    return "Old text: " + origText + " New text: Hello world!    (index: " + i + ")";   });}); • $("#btn2").click(function(){  $("#test2").html(function(i,origText){    return "Old html: " + origText + " New html: Hello <b>world!</b>    (index: " + i + ")";   });});

  21. Set Attributes - attr() • $("button").click(function(){  $("#w3s").attr("href","http://www.w3schools.com/jquery");}); • $("button").click(function(){  $("#w3s").attr({    "href" : "http://www.w3schools.com/jquery",    "title" : "W3Schools jQuery Tutorial"  });}); • $("button").click(function(){  $("#w3s").attr("href", function(i,origValue){    return origValue + "/jquery";   });});

  22. jQuery - Add Elements Add New HTML Content • append() - Inserts content at the end of the selected elements • prepend() - Inserts content at the beginning of the selected elements • after() - Inserts content after the selected elements • before() - Inserts content before the selected elements

  23. $("p").append("Some appended text."); • $("p").prepend("Some prepended text."); • function appendText(){vartxt1="<p>Text.</p>";               // Create element with HTML  vartxt2=$("<p></p>").text("Text.");   // Create with jQueryvartxt3=document.createElement("p");  // Create with DOM txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3);         // Append the new elements } • $("img").after("Some text after");$("img").before("Some text before");

  24. jQuery - Remove Elements /Content • remove() - Removes the selected element (and its child elements) • empty() - Removes the child elements from the selected element • $("#div1").remove(); • $("#div1").empty(); • $("p").remove(".italic");

  25. jQuery Manipulating CSS • jQuery Manipulating CSS • addClass() - Adds one or more classes to the selected elements • removeClass() - Removes one or more classes from the selected elements • toggleClass() - Toggles between adding/removing classes from the selected elements • css() - Sets or returns the style attribute

  26. .important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;} • $("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");});

  27. $("button").click(function(){  $("#div1").addClass("important blue");}); • $("button").click(function(){  $("h1,h2,p").removeClass("blue");}); • $("button").click(function(){  $("h1,h2,p").toggleClass("blue");});

  28. jQuery css() Method • css("propertyname"); • $("p").css("background-color"); • css("propertyname","value"); • $("p").css("background-color","yellow"); • css({"propertyname":"value","propertyname":"value",...}); • $("p").css({"background-color":"yellow","font-size":"200%"});

  29. jQuery Dimension Methods • width() • height() • innerWidth() • innerHeight() • outerWidth() • outerHeight()

  30. $("button").click(function(){var txt="";  txt+="Width: " + $("#div1").width() + "</br>";  txt+="Height: " + $("#div1").height();  $("#div1").html(txt);}); • $("button").click(function(){var txt="";  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";  txt+="Inner height: " + $("#div1").innerHeight();  $("#div1").html(txt);});

  31. $("button").click(function(){var txt="";  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";  txt+="Outer height: " + $("#div1").outerHeight();  $("#div1").html(txt);}); • $("button").click(function(){var txt="";  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);  $("#div1").html(txt);}); • $("button").click(function(){  $("#div1").width(500).height(500);});

  32. jQuery Traversing

  33. Traversing Up the DOM Tree • parent() • $("span").parent().css({"color":"red","border":"2px solid red"}); • parents() • $("span").parents().css({"color":"red","border":"2px solid red"}); • $("span").parents("ul").css({"color":"red","border":"2px solid red"}); • parentsUntil() • $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

  34. Traversing Down the DOM Tree • children() • $("div").children().css({"color":"red","border":"2px solid red"}); • $("div").children("p.1").css({"color":"red","border":"2px solid red"}); • find() • $("div").find("span").css({"color":"red","border":"2px solid red"}); • $("div").find("*").css({"color":"red","border":"2px solid red"});

  35. Traversing Sideways in The DOM Tree • siblings() • next() • nextAll() • nextUntil() • prev() • prevAll() • prevUntil()

  36. $("h2").siblings().css({"color":"red","border":"2px solid red"}); • $("h2").siblings("p").css({"color":"red","border":"2px solid red"}); • $("h2").next().css({"color":"red","border":"2px solid red"}); • $("h2").nextAll().css({"color":"red","border":"2px solid red"}); • $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

  37. Narrow Down The Search For Elements • jQuery first() Method • $("div p").first().css("background-color","yellow"); }); • jQuery last() Method • $("div p").last().css("background-color","yellow"); }); • jQuery eq() method • $("p").eq(1).css("background-color","yellow"); }); • jQuery filter() Method • $("p").filter(".intro").css("background-color","yellow"); }); • jQuery not() Method • $("p").not(".intro").css("background-color","yellow"); });

More Related