SEEM4570 System Design and Implementation Lecture 04 jquery

Size: px

Start display at page:

Download "SEEM4570 System Design and Implementation Lecture 04 jquery"

Rose Sharp
5 years ago
Views:

1 SEEM4570 System Design and Implementation Lecture 04 jquery jquery! jquery is a JavaScript Framework.! It is lightweight.! jquery takes a lot of common tasks that requires many lines of JavaScript code to accomplish, and wraps it into methods that you can call with a single line of code.

2 ! HTML/DOM manipulation! CSS manipulation! HTML event methods! Effects and animations! AJAX! What jquery can do? Other Frameworks

3 Adding jquery into Your Site Method 1! There are two versions of jquery available for downloading:! Production version! Development version! Both versions can be downloaded from jquery.com! The jquery library is a single JavaScript file. To add jquery library into your site, simply type:! <head> <script src="jquery.js"></script> </head> Adding jquery into Your Site Method 2! If you don't want to download and host jquery yourself, you can include it from a CDN (Content Delivery Network).! Google CDN:! <script src=" jquery.min.js"></script>! Microsoft CDN:! <script src=" jquery js"></script>

4 Host vs. CDN! Many users already have downloaded jquery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.! Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time. jquery Syntax! Basic syntax:! $(selector). eventoraction(params)! Explanation:! $ define/access jquery! selector find an element/group of elements! eventoraction event or action to be performed! params parameters required by the event.! Examples:! $("p").hide();! $("p").click(function(){ $("p").hide()

By doing so, we can prevent " codes " from running before the document is finished loading (i.e., ready).

5 Document Ready Event! One of the most important events in HTML is "document ready event" (below all are equivalent):! $(document).ready(myfunction()); function myfunction(){ codes! $(document).ready(function(){ codes! $(function(){ codes Only if you use jquery Document Ready Event (cont'd)! By doing so, we can prevent " codes " from running before the document is finished loading (i.e., ready).! It is good practice to wait for the document to be fully loaded and ready, before working with it.! Examples of actions that can fail if methods are run before the document is fully loaded:! Hide an element that is not created yet! Get the size of an image that is not loaded yet

6 jquery Selector! jquery selectors allow you to select and manipulate HTML element(s).! With jquery selectors you can find elements based on their id, classes, types, attributes, values of attributes and much more!! We will discuss the followings:! Element selector! ID selector! Class selector! Other important selector by examples Element Selector! Selects elements based on their tag names:! $("atagname")! Example:! Select all <p> elements on a page like this:! $("p")

7 ID Selector! Select a specific element based on its ID.! $("#anelementid")! An id should be unique within a page, so you should use the ID selector when you want to find a single, unique element.! Example:! An HTML:! <p id="para1">xxxxxx</p> <p id="para2">xxxxxx</p> <p id="para3">xxxxxx</p>! To select the <p> with id=para1:! $("#para1") Class Selector! Selects elements based on their class names:! $('.aclassname')! Example! Select all elements with the class "myclass":! $(".myclass")

8 More Examples! $("*")! Selects all elements! $(this)! Selects the current HTML element (very useful. Discuss later)! $("p.intro")! Selects all <p> elements with class="intro"! $("p:first")! Selects the first <p> element! $("ul li:first")! Selects the first <li> element from the first <ul>! $("ul li:first-child")! Selects the first <li> element of every <ul> More Examples (cont'd)! $("[href]")! Selects all elements with an href attribute! $("a[target='_blank']")! Selects all <a> elements with a target attribute value equal to "_blank"! $("a[target!='_blank']")! Selects all <a> elements with a target attribute value NOT equal to "_blank"

9 More Examples (cont'd)! $(":button")! Selects all <input> elements of type="button"! $("tr:even")! Selects all even <tr> elements! $("tr:odd")! Selects all odd <tr> elements Events! All the different visitors actions that a web page can respond to are called events (or actions).! Examples:! moving a mouse over an element! selecting a radio button! clicking on an element! The terms such as "fires / on / trigger" are often used with events.! Example:! The keypress event fires when you press a key

10 Some Common jquery Events Mouse Keyboard Form Document/ Window click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload For a full list of all events, see: jquery Events! Example:! To assign a click event to all paragraphs on a page, you can do this:! $("p").click();! To define what should happen during the event fires:! $("p").click(myfunction()); function myfunction(){ };! $("p").click(function(){ // some codes! $("p").click(function(){ alert("you have clicked a paragraph!");

11 jquery Effects! We will discuss some major effects in this lecture note only:! Hide / Show / Toggle! Fade! Slide! Animate! Stop! For a full list:! Hide / Show / Toggle (1)! $(selector).hide([speed], [callback]); $(selector).show([speed], [callback]); $(selector).toggle([speed], [callback]);! speed (optional)! Valid values: "slow", "fast", or milliseconds.! callback (optional)! Function to be executed after the effect completes.! JavaScript are executed line by line. Yet, with effects, the next line of code can be run even though the effect is not finished. This may create errors.! To prevent this, you can create a callback function.

12 Hide / Show / Toggle (2)! Example:! $("p").click(function(){ $("p").toggle();! $("p").click(function(){ $(this).toggle();! $("p").click(function(){ $(this).toggle(1000);! $("p").click(function(){ $(this).toggle(1000, function(){ alert("action done!"); Fade! $(selector).fadein([speed], [callback]); $(selector).fadeout([speed], [callback]); $(selector).fadetoggle([speed], [callback]);! speed (optional)! The speed of animation. Valid values: "slow", "fast", or milliseconds.! callback (optional)! $(selector).fadeto(speed, opacity, [callback]);! Speed (required)! Opacity (required)! Target opacity! callback (optional)

13 Slide! $(selector).slidedown([speed], [callback]); $(selector).slideup([speed], [callback]); $(selector).slidetoggle([speed], [callback]);! speed (optional)! The speed of animation. Valid values: "slow", "fast", or milliseconds.! callback (optional) Slide (cont'd)! Example! <script> $(function(){ $("#flip").click(function(){ $("#content").slidetoggle(1000); </script> <div id="flip">click to slide the content</div> <div id="content" style="display: none; background: yellow">this is the content.</div>

14 Animate! $(selector).animate({params},speed,callback);! params (required) defines the CSS properties to be animated.! speed (optional)! The speed of animation. Valid values: "slow", "fast", or milliseconds.! callback (optional) Animate (cont'd)! Example! <script type="text/javascript"> $(function(){ $("div").click(function(){ $("div").animate({height:'400px',opacity:'0.2'},"slow"); </script> <div style="background:red; height:100px; width:100px; position:absolute; color:yellow; font-weight: bold">seem4570</ div>

15 Animate (cont'd)! Note that animation on the same element is "queued".! Example! <script type="text/javascript"> $(function(){ $("div").click(function(){ $("div").animate({height:'300px',opacity:'0.4'},"slow"); $("div").animate({width:'300px',opacity:'1', 'font-size': '10px'},"slow"); $("div").animate({height:'100px',opacity:'0.4', 'font-size':'50px'},"slow"); $("div").animate({width:'100px',opacity:'1', 'font-size': '16px'},"slow"); </script> <div style="background:red; height:100px; width:100px; position:absolute; color:yellow; font-weight: bold">seem4570</div> Stop! The jquery stop() method is used to stop an animation or effect before it is finished.! It is extremely useful!! $(selector).stop(stopall,gotoend);! stopall (optional)! Specifies whether the animation queue should be cleared. Default is false, which means that only the active animation will be stopped, allowing any queued animations to be performed afterwards.! gotoend (optional)! Specifies whether to complete the current animation immediately. Default is false.

16 jquery Method Chaining! Chaining allows us to run multiple jquery commands, one after the other, on the same element(s) on one line.! This way, browsers do not have to find the same element(s) more than once! More efficient! To chain an action, you simply append the action to the previous one:! $("p").fadein(2000). fadeout(2000); jquery DOM Manipulation! One very important part of jquery is the possibility to manipulate the DOM.! DOM = Document Object Model! The DOM defines a standard for accessing HTML documents:! DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.! jquery comes with a bunch of DOM related methods, that makes it easy to access and manipulate elements and attributes.

17 Get Content! To get the content:! text() Sets or returns the text content of selected elements! html() Sets or returns the content of selected elements (including HTML markup)! Example:! <p id="para1"><b>this is a sentence</b></p> <script> alert($("#para1").text()); alert($("#para1").html()); $("#para1").html("<i>a new sentence</i>"); alert($("#para1").text()); alert($("#para1").html()); </script> Get Attributes! To get the content:! attr() Sets of get the attribute of an element! Example:! <p id="para1"><b>this is a sentence</b></p> <script> alert($("#para1").attr("id")); $("#para1").attr ("id", "paranew"); alert($("#para1").attr()); </script>

18 Add Element! Four major methods:! 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 Add Element (cont'd)! Given:! <div class="container"> <div class="inner">hello</div> <div class="inner">goodbye</div> </div>! Append:! For the following script:! $('.inner').append('<p>test</p>');! Result:! <div class="container"> <div class="inner">hello<p>test</p></div> <div class="inner">goodbye<p>test</p></div> </div>

19 Add Element (cont'd)! After:! For the following script:! $('.inner').after('<p>test</p>');! Result:! <div class="container"> <div class="inner">hello</div> <p>test</p> <div class="inner">goodbye</div> <p>test</p> </div> Remove Element! To remove elements:! remove() - Removes the selected element (and its child elements)! empty() - Removes the child elements from the selected element

CSS! Three methods to interact with CSS:! addclass() - Adds one or more classes to the selected elements! removeclass() - Removes one or more classes from the selected elements!

20 CSS! Three methods to interact with CSS:! addclass() - Adds one or more classes to the selected elements! removeclass() - Removes one or more classes from the selected elements! css() - Sets or returns the style attribute! Example:! $("div").addclass("myclass");! $("div").css({"height": "100px", "background-color": "red" Element Dimensions! To work with dimensions:! width()! height()! innerwidth()! innerheight()! outerwidth()! outerheight()

Webomania Solutions Pvt. Ltd. 2017

Webomania Solutions Pvt. Ltd. 2017 Introduction JQuery is a lightweight, write less do more, and JavaScript library. The purpose of JQuery is to make it much easier to use JavaScript on the website. JQuery takes a lot of common tasks that