1 / 20

Introduction to jQuery: A Powerful JavaScript Library for Easy Web Development

jQuery is a lightweight, cross-browser JavaScript library designed to simplify HTML document manipulation, event handling, and AJAX interactions. Downloadable from jQuery.com, it offers two versions (production and development). With CSS-like selectors, strong event handling support, and powerful utility methods, jQuery allows developers to create dynamic web applications with ease. Utilize the library by linking directly to it in your HTML or downloading it. Learn various methods for DOM manipulation and event handling to enhance user experiences in web applications.

ranit
Télécharger la présentation

Introduction to jQuery: A Powerful JavaScript Library for Easy 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. The jQuery library

  2. What is jQuery ? A javascript lightweight library Is very easy to use Is powerful Is cross-browser compatible Downloadable from jQuery.com, 2 versions (a production version and a development version)

  3. jQuery features DOM structure/nodes and CSS manipulation CSS-like selectors Strong event handling support Effects, transitions and animations AJAX and simple data support Javascript utility methods

  4. Linking to the jQuery library Use a downloaded version: <head> <script src=jquery.min.js></script> </head> Use an online version: <head> <script src=“//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”> <script> </head>

  5. jQuery code location $(document).ready(function() { … jquery code .. }); the document ready event is fired when the DOM is fully loaded a short-hand alternative: $(function() { … jquery code .. });

  6. jQuery method call syntax methods called on jQuery selections are in the $.fn namespace, and automatically receive and return the selection as this. Ex.: $(“p”).html(“Test paragraph”); $(“div#id”).remove(); methods in the $ namespace are generally utility-type methods, and do not work with selections Ex.: $.each([ "foo", "bar", "baz" ], function( idx, val ) {console.log( "element " + idx + " is " + val ); });

  7. Methods called on jQuery selections Simple syntax: $(selector).action(params) Ex.: $(“div.class1”).hide(); Chain syntax: $(selector).action1(params).action2(params)… Ex.: $( "#content" ).find( "h3" ).html( "new text for the h3!" ); or $( "#content" ) .find( "h3" ) .html( "new text for the third h3!" ); these methods return the jQuery object

  8. jQuery selectors Has a CSS-like syntax for selectors: $(“*”) – selects all elements $(“#someid”) – selects element with ID attribute=someid $(“.someclass”) – selects element with Class attribute=someclass $(“div”) – selects all the DIV elements $(“.class1.class2”) – selects elements with classes class1 and class2 $(“div p”) – selects all <p> elements that are inside a <div> $(“p:first”) – selects the first p element $(“p:last”) – selects the last p element $(“tr:even”) – selects all even tr elements $(“tr:odd”) – selects all odd tr elements $(“ul li:eq(2)”) - selects the 3rd element from an unordered list $(“:contains(‘some text’)”) – select all elements containing the text

  9. jQuery Selectors (2) $(this) – selects the current html element $(“#div1 ul li .innerdiv”) – compound CSS selector $(“h1,h2,h3”) – selects all h1, h2 or h3 elements $(“div:first-child”) – selects div elements that are the first child of their parents $(“div:first-of-type”) - selects div elements that are the first div child of their parents $(“div:last-child”) - selects div elements that are the last child of their parents $(“div:last-of-type”) - selects div elements that are the last div child of their parents $(“div:nth-child(3)”) - selects div elements that are the 3rd child of their parents $(“div:nth-of-type(3)”) - selects div elements that are the 3rd div child of their parents $(“div > p”) – selects elements p which are direct child of a div

  10. jQuery Selectors (3) $("div + p") – selects p elements that are the nearest siblings of a div element $("div ~ p") – selects p elements that are siblings of div elements $("ul li:eq(3)") – selects list elements with a list index of 3 $("ul li:gt(3)") – selects list elements with a list index greater than 3 $("ul li:lt(3)") – selects list elements with a list index less than 3 $(“[attribute]”) – selects elements with a specific attribute $(“[attribute=value]”) – selects elements having an attribute equal to a specific value $(“[attribute!=value]”) - selects elements having an attribute different than a specific value $(“[attribute$=value]”) - selects elements with an attribute ending with a specific value $(“[attribute^=value]”) - selects elements with an attribute starting with specific value $(“[attribute*=value]”) – attribute contains value

  11. jQuery events has support for most html events mouse events: click(), dblclick(), focus(), focusin(), focusout(), blur(), hover(), mousedown(), mouseenter(), mouseleave(), mousemove(), mouseout(), mouseover(), mouseup() keyboard events: keypress(), keyup(), keydown() form events: submit(), change() window events: load(), resize(), ready(), scroll(), unload()

  12. Binding events to handling functions $(selector).event(function() { …. }); Ex.: $(“div”).dblclick(function() { $(this).hide(); }); $(selector).bind(“event”, function() { … }); Ex.: $(“li”).bind(“click”, function() { console.log(“list item was clicked”); }); $(selector).unbind() – remove all event handlers from selected elements $(selector).on(“event1 event2..”, function() { …}); Ex.: $(“p”).on(“click”, function() { $(this).css(“background-color: red”); }); $(selector).off(“event”) $(selector).one(“event”, function) – run event only once

  13. The jquery event object is passed to the event handling function along with this (the selected element) $(“form”).on(“submit”, function(eventObj) { // cancel default functionality for specific event (e.g. form submit) eventObj.preventDefault(); … }); properties of eventObj: pageX, pageY – mouse position type – type of event data – data can be passed to handling function when evt is bound target – DOM element that initiated the event

  14. jQuery and css getting css properties: $(“p”).css(“background-color”) setting css properties: $(“p”).css(“font-size”, “14px”) $(“p”).css({color: “red”, width: “100%”, height: “100%”}) adding, removing, toggling css classes: css code: .fancy { border: 1px dotted #00eeff; background: url(“pic.jpg”); } jquery code: $(“#div1”).addClass(“fancy”); $(“#div1”).removeClass(“fancy”); $(“#div1”).toggleClass(“fancy”);

  15. jQuery effects – hide/show $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; toggle() toggles between hide() and show() Ex.: $("button").click(function(){ $(“p”).hide(20); $(“p#id1”).show(“slow”); }); $("button").click(function(){$("p").toggle();});

  16. jQuery effects - fading $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; fadeTo() fades to an opacity Ex.: $(“button”).click(function() { $(“#div1”).fadeIn(“2000”); });

  17. jQuery effects - sliding $(selector).slideUp(speed,callback); $(selector).slideDown(speed,callback); $(selector).slideToggle(speed,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; Ex.: $(“button”).click(function() { $(“#div1”).slideUp(“2000”); });

  18. jQuery effects - animations $(selector).animate({params},speed,callback); where speed is “slow”, “fast” or miliseconds and callback is a function called after the effect is done; Ex.: $(“button”).click(function() { $(“#div1").animate({left:’100px’, top: ’75px’}); }); $(“button”).click(function() { $(“#div1”).animate({ left: ‘500px’, opacity: ‘0.3’, height: ‘100px’, width: ’60px’ }); });

  19. Getting/setting html content text() - sets or returns the text content of selected elements console.log($(“p”).text()); $(“p”).text(“Test..”); html() - sets or returns the content of selected elements (including HTML markup) console.log($(“div”).html()); $(“div”).html(“<p>Test</p>”); val() - sets or returns the value of form fields attr() – get or set attribute values console.log($(“a#id1”).attr(“href”)); $(“a#id1”).attr(“href”, “http://www.cs.ubbcluj.ro”);

  20. Adding/removing html content $("p").append("Some appended text."); $("p").prepend("Some appended text."); $("p").after(“<div>test</div>"); $("p").before(“<div>test</div>"); $("p").remove(); $("p").empty();

More Related