HTML5 and CSS3 The jquery Library Page 1 1 HTML5 and CSS3 THE JQUERY LIBRARY 8 4 5 7 10 11 12 jquery1.htm Browser Compatibility jquery should work on all browsers The solution to cross-browser issues is written into the jquery library (except IE6) Adding jquery to a Website The jquery library can be: Downloaded from jquery.com and installed on the local client computer; or Imported during execution of the web page CDN s (Content Delivery Network) Alternately the jquery library can be imported from a CDN (e.g. from Google or Microsoft) at runtime without installing it locally by referencing a URL address From the Google CDN: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> From the Microsoft CDN: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.0.min.js"></script> jquery Syntax Page 1 jquery statements are placed inside a <script> block The basic syntax of a jquery statement is: $(selector).action() The $ specifies that this is a jquery statement The selector is used to find (query) HTML elements The action() is the method or function (action to be performed on the element or elements) or an event (defines function to be executed when an event occurs) jquery Syntax Page 2 Examples: $(this).hide() hide the current element $(document).hide() hide all elements in the document $("button").hide() hide all <button> elements The Document Ready Event Page 1 All jquery methods are located inside a document ready event within which is an anonymous function This prevents any jquery code from running before the document is finished loading:
HTML5 and CSS3 The jquery Library Page 2 $(document).ready( function () jquery methods are inserted here 13 16 15 17 19 The Document Ready Event Page 2 Because the document ready event is so common, an even shorter method for it exists: $( function () jquery methods are inserted here Element Selectors Element selectors select elements based on their HTML element type/name $("elementtype") All CSS selectors are in "quotes" $("button") Selects all button elements The jquery Selectors jquery selectors are used to find (query/select) HTML elements Can be based on name, id, classes, types, attributes, values of attributes, etc. Based on existing CSS (style sheet) selectors as well as some of jquery s own custom selectors All selectors start with the format: $(selector) The #id Selector The #id selector selects elements based on the id attribute of the element or elements $("#idname") All CSS selectors are in "quotes" $("#greentext") Selects all elements whose id="greentext" More Selector Examples Some examples of valid jquery selectors are: $(*)
HTML5 and CSS3 The jquery Library Page 3 Select all elements since * is a wildcard $(this) Select the current HTML element $("p.redtext") Select the <p> element with class="redtext" $("ul li") Select all <li> elements within a <ul> block 20 21 23 25 26 jquery2.htm Event Methods An event is the moment when something happens jquery responds to most JavaScript events: Mouse events click, dblclick, mouseenter, mouseleave Keyboard events keydown, keyup, keypress (combination key down and release) Form events submit, change, focus, blur Document/window events load, resize, scroll, unload Defining the Event Handler Page 1 An event includes a function inside (parentheses) which is the event handler that is performed when the named event occurs $(selector).eventname( function () // Actions performed The click Event The click event is executed when the user clicks on an HTML element $(selector).click( function () $("button").click( function () $(this).text("you clicked me"); The dblclick Event The dblclick event is executed when the user double clicks on an HTML element
HTML5 and CSS3 The jquery Library Page 4 $(selector).dblclick( function () $("button").dblclick( function () $(this).hide(); 28 31 32 33 37 The mouseleave Event The mouseleave event is executed when the mouse leaves an HTML element $(selector).mouseleave( function () $("button").mouseleave( function () alert("you left the paragraph"); jquery3.htm Hiding and Showing Elements The methods for hiding and showing HTML elements are: hide() hides an HTML element show() brings a hidden HTML element into view toggle() goes back and forth (toggles) between hide to show each time a function executes for HTML element The hide() Method Page 1 The hide() method makes an element disappear $(selector).hide(speed, callback); The optional speed argument specifies how long before the element hide or is completed Fast or slow or in milliseconds The optional callback argument is the name of a function to be executed after the hide is complete The toggle() Method Page 1 The toggle() method makes an element appear and disappear (like an on/off toggle switch, e.g. light switch) in an single event handler
HTML5 and CSS3 The jquery Library Page 5 $(selector).toggle(speed, callback); The optional speed and callback arguments have the same meaning as for the show() and hide() methods 38 40 41 43 44 The toggle() Method Page 2 $("button").click( function () $("p").toggle("slow"); Fading Elements In and Out Fading is defined as hiding and showing HTML elements gradually: fadein() fade in a currently hidden element fadeout() fade out a currently visible element fadetoggle() toggles between the fadein() and fadeout() method functionality fadeto() fades out to a given opacity (transparency) The fadein() and fadeout() Methods Page 1 The fadein() method makes elements appear (fade in) gradually The fadeout() method makes elements disappear (fade out) gradually Formats: $(selector).fadein(speed, callback); $(selector).fadeout(speed, callback); The optional speed and callback arguments have the same meaning as for the show() and hide() methods The fadetoggle() Method The fadetoggle() method makes elements appear and disappear (like an on/off toggle switch) gradually in an single event handler $(selector).fadetoggle(speed, callback); The optional speed and callback arguments have the same meaning as for the show() and hide() methods $("button").click( function () $("div2").fadetoggle("slow"); The fadeto() Method Page 1 The fadein() method makes elements appear (fade in) gradually to a specific level of opacity (transparency)
HTML5 and CSS3 The jquery Library Page 6 $(selector).fadeto(speed, opacity, callback); The optional speed and callback arguments have the same meaning as for the show() and hide() methods The opacity is the degree of transparency (0.0 which is invisible to 1.0 which is not transparent at all) 45 46 47 49 50 52 The fadeto() Method Page 2 $("button").click( function () $("div2").fadeto("fast", 0.40); Fades in just to 40% opacity jquery5.htm Sliding Down and Up Sliding is defined as hiding and showing HTML elements as they slide: slidedown() appears as it slide down into view slideup() disappears from view as it slides up slidetoggle() toggles between the slidedown() and slideup() method functionality The slidedown() and slideup() Methods Page 2 Examples: $("#down").click( function () $("#hellodownup").slidedown(); $("#up").click( function () $("#hellodownup").slideup(); The slidetoggle() Method Page 1 Makes elements appear as they slide down and disappear as the slide up (like an on/off toggle switch) in an single event handler $(selector).slidetoggle(speed, callback); The optional speed and callback arguments have the same meaning as for the show() and hide() methods
HTML5 and CSS3 The jquery Library Page 7 jquery6.htm 53 54 55 57 58 59 62 jquery Callback Functions Page 1 Animation methods like hide, show, fadein, fadeout, slidedown, slideup, etc. have an optional element referred to as the callback argument Names a function that will execute after the animation function (which may take some time) is completed The callback function will only execute after the function is completely finished executing jquery Callback Functions Page 2 $(selector).functionname(speed, callback); The callback argument is the function that executes after the function defined in the functionname has completed jquery Callback Functions Page 3 $("#callback").click( function () $("#div1").slidetoggle(1000, function () $("#div2").slidetoggle(1000); jquery Method Chaining Page 2 $(selector).method1(args).method2(args).etc.; $("#p3").text("now I am red!").css("background-color", "red"); jquery7.htm The text() Method Page 1 The text() method gets (retrieves) or sets (updates) the content of a text based HTML element such as a <p> or heading element The html() Method Page 1 The html() method gets (retrieves) or sets (updates) the content of a text based HTML element such as a <p> or heading element Unlike the text element, the content can include HTML elements as part of the content string
HTML5 and CSS3 The jquery Library Page 8 65 jquery8.htm 66 72 69 70 73 84 85 The val() Method Page 1 The val() method gets (retrieves) or sets (updates) the content of an HTML form element The css() Method Page 3 Format to set style (takes two arguments the CSS property and its assigned value): $(selector).css("property", "value") $("#p1").css("background-color", "red") ; jquery9.htm The css() Method Page 1 The css() method gets (retrieves) or sets (updates) one or more CSS style properties for an HTML element The css() Method Page 4 To set multiple properties, continue with additional property/value arguments Format (notice colon (:) between each property and value and the entire expression contained within braces}: $(selector).css( "property1": "value1", "property2": "value2", } ) $("#p2").css( "background-color": "green", "font-family": "Comic Sans MS" } ) ; The load() Method Page 3 Format 2: $(selector).load("url, #selector"); The #selector is part of the URL string and identifies the ID attribute of one element in the file (just part of the document is downloaded) Example 2: $("#div2").load("test.htm, #subdocument"); The load() Method Page 4 Format 3: $(selector).load("url", callback); The callback parameter is a function to be executed after the load() method has complete executing Example 3: $("#div2").load("test.htm", function()
HTML5 and CSS3 The jquery Library Page 9 }) alert("success!") 86 75 76 77 78 The load() Method Page 5 Format 4: $(selector).load("url", function(responsetext, statustext, ) The callback has three optional parameters: responsetext a string with the HTML content downloaded or the HTML content of an error report statustext a string either success or error indicating whether or not the load() succeeded Adding and Removing CSS Classes Methods for adding and removing predefined CSS classes on HTML elements are: addclass() adds class(es) to an HTML element removeclass() remove class(es) from an HTML element toggleclass() goes back and forth (toggles) between adding and removing class(es) for an HTML element The addclass() and removeclass() Methods Page 1 Adds classes and removes classes from HTML element Formats: $(selectors).addclass("classname"); $(selectors).removeclass("classname"); The selectors can be a list of more than one selector The optional classname argument specifies the name of the predefined CSS class The addclass() and removeclass() Methods Page 2 Examples: $("#addbutton").click( function () $("h1, h2, p1").addclass("red"); $("#removebutton").click( function () $("p2").removeclass("green"); The toggleclass() Method Page 1 Goes back and forth (like an on/off toggle switch) between adding and removing class(es) for an HTML element in an single event handler $(selectors).toggleclass("classname");
HTML5 and CSS3 The jquery Library Page 10 The selectors can be a list of more than one selector The optional classname argument specifies the name of the predefined CSS class