JQuery Training Manual V0.4

JQUERYTRAINING MANUAL

VER.0.4

Copyright

Copyright © 2010 MitraisAll rights reserved.

ConfidentialityThis document contains confidential information of Mitrais.This document can be used and copied within Mitrais for use in relation to this project. However, this document, including copies of it, must not be disclosed to any person who is not a director, officer, employee, consultant or agent of Mitrais without the prior written approval.

Document controlThis document is deemed to be controlled only as long as the project to which it relates is active. Controlled copies will be automatically updated. Once the project is completed or terminated, this document will revert to an uncontrolled document status. No further advice will be provided, and each recipient may either destroy the document or mark it as obsolete and retain it for future personal reference. All copies of this document will be issued electronically.

DistributionCopies of this document will be made available to Mitrais.

document.doc4 Mitrais © 2014 2/19

REVISION HISTORY

Date Version Description Author4 Oct 2010 0.1 First Release Putu Eka Doddy S.09 April 2012 0.2 Added some modules for

AJAX and JSON object.I Gst A.G Bayu Puspa Nugraha

23 April 0.3 Updated exercise Yulianto Adi6 Jan 2014 0.4 Updated jQuery API Anggi Putri Pertiwi


TABLE OF CONTENTS

Copyright________________________________________________________________________________2REVISION HISTORY____________________________________________________________________31. INTRODUCTION____________________________________________________________________5

1.1. Pre-Requisites__________________________________________________________________51.2. Hardware / Software___________________________________________________________51.3. Target for the Audience’s (After Training)_______________________________________51.4. Purposes_______________________________________________________________________51.5. Schedule_______________________________________________________________________5

2. JQUERY SYNTAX___________________________________________________________________62.1. What is jQuery Syntax?_________________________________________________________6

3. JQUERY SELECTORS_______________________________________________________________63.1. JQuery Element Selectors______________________________________________________63.2. JQuery Attribute Selectors______________________________________________________63.3. JQuery CSS Selectors___________________________________________________________6

4. JQUERY EVENT FUNCTIONS_______________________________________________________84.1. What is jQuery Event Functions?_______________________________________________8

5. JQUERY HTML_____________________________________________________________________105.1. Changing HTML Content______________________________________________________105.2. Adding HTML Content_________________________________________________________10

6. JQUERY CSS_______________________________________________________________________106.1. What is jQuery CSS?__________________________________________________________106.2. JQuery css() method__________________________________________________________116.3. JQuery height() & width() methods____________________________________________11

7. JQUERY AJAX______________________________________________________________________117.1. What is AJAX?_________________________________________________________________117.2. What is JSON?_________________________________________________________________117.3. AJAX and jQuery______________________________________________________________12

8. EXERCISE_________________________________________________________________________149. REFERENCES______________________________________________________________________1910. TRAINING PROVIDER_____________________________________________________________19


1. INTRODUCTIONJQuery is a library of javascript functions. It is a lightweight “ write less, do more” javascript library. It contains the following features: HTML element selections HTML element manipulation CSS manipulation Javascript effects and animations HTML DOM traversal and modification AJAX Utilities

1.1. Pre-RequisitesFamiliar with the HTML, CSS, javascript.

1.2. Hardware / Software Pentium IV, 3 GHz IE 6.0 or FireFox 1.5 browser Visual Studio 2003 or later, notepad, Text pad, Ultra edit

1.3. Target for the Audience’s (After Training)Understand how to use JQuery in implementation.

1.4. Purposes It comprehensive provides an overview of JQuery. This training is preparing the candidates basic knowledge about JQuery.

1.5. ScheduleDescription Man-daysLearn JQuery Selectors & Events 0.25Learn JQuery HTML 0.125Learn JQuery CSS 0.125Learn JQuery AJAX 0.25Final Test 0.25


2. JQUERY SYNTAX

2.1. What is jQuery Syntax?The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is; $(selector).action() A dollar sign to define jQuery A(selector) to “query (or find)” HTML elements A jQuery action() to be performed on element(s)

Examples:$(this).hide() – hides current element$(“p”).hide() – hides all paragraphs$(“p.test”).hide() – hides all paragraphs with class=”test”$(“#test”).hide() – hides all element with id=”test”

3. JQUERY SELECTORSIn previous chapter we looked at some examples of jQuery syntax which contains selector and action. JQuery selectors is a key point to learn how jQuery selects the elements you want to apply an action to. JQuery uses a combination of Xpath and CSS selector syntax.

3.1. JQuery Element SelectorsJQuery uses CSS selectors to select HTML elements.$(“p”) selects all <p> elements.$(“p.intro”) selects all <p> elements with class=”intro”$(“p#demo”) select all <p> elements with id=”demo”

3.2. JQuery Attribute SelectorsJQuery uses XPath expressions to select HTML elements with given attribute.$(“[href]”) selects all elements with an href attribute.$(“[href=’#’]”) selects all elements with an href value equal to “#”.$(“[href!=’#’]”) selects all elements with an href value not equal to “#”.$(“[href$=’#’]”) selects all elements with an href value that ends with “#”.

3.3. JQuery CSS SelectorsJQuery CSS Selectors can be used to change CSS properties for HTML elements.

Example : $(“p”).css(“background-color”, “yellow”);

Some more examples of jQuery selector:Selector Example Selects* $("*") All elements#id $("#lastname") The element with id=lastname.class $(".intro") All elements with class="intro"element $("p") All <p> elements.class.class $(".intro.demo") All elements with the classes "intro"

and "demo" :first $("p:first") The first <p> element:last $("p:last") The last <p> element:even $("tr:even") All even <tr> elements:odd $("tr:odd") All odd <tr> elements :eq(index) $("ul li:eq(3)") The fourth element in a list (index

starts at 0):gt(no) $("ul li:gt(3)") List elements with an index greater

than 3:lt(no) $("ul li:lt(3)") List elements with an index less than

3:not(selector) $("input:not(:empty)") All input elements that are not empty :header $(":header") All header elements <h1><h2>...:animated All animated elements :contains(text) $

(":contains('W3Schools')")All elements which contains the text

:empty $(":empty") All elements with no child (elements) nodes

:hidden $("p:hidden") All hidden <p> elements:visible $("table:visible") All visible tables s1,s2,s3 $("th,td,.intro") All elements with matching selectors [attribute] $("[href]") All elements with a href attribute[attribute=value] $("[href='default.htm']") All elements with a href attribute

value equal to "default.htm"[attribute!=value] $("[href!='default.htm']") All elements with a href attribute

value not equal to "default.htm"[attribute$=value]

$("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"

:input $(":input") All <input> elements:text $(":text") All <input> elements with

type="text":password $(":password") All <input> elements with

type="password":radio $(":radio") All <input> elements with

type="radio":checkbox $(":checkbox") All <input> elements with

type="checkbox":submit $(":submit") All <input> elements with

type="submit":reset $(":reset") All <input> elements with

type="reset":button $(":button") All <input> elements with


type="button":image $(":image") All <input> elements with

type="image":file $(":file") All <input> elements with type="file" :enabled $(":enabled") All enabled input elements:disabled $(":disabled") All disabled input elements:selected $(":selected") All selected input elements:checked $(":checked") All checked input elements

4. JQUERY EVENT FUNCTIONS

4.1. What is jQuery Event Functions?The jQuery event handling functions are core functions in jQuery. Event handlres are function that are called when “something happens” in HTML.

Some examples of jQuery event :$(document).ready(function) – Binds a function to the ready event of a document$(selector).click(function) – Binds a function to the click event of selected elements$(selector).focus(function) – Binds a function to the focus event of selected elements$(selector).mouseover(function) – Binds a function to the mouse over event of selected elements.

The following table lists all the method used to handle events.Method Descriptionbind() Add one or more event handlers to

matching elementsblur() Triggers, or binds a function to the blur

event of selected elementschange() Triggers, or binds a function to the change

event of selected elementsclick() Triggers, or binds a function to the click

event of selected elementsdblclick() Triggers, or binds a function to the dblclick

event of selected elementsdelegate(selector, event) Add an event handler to matching

elements, now or in the futurefocus() Triggers, or binds a function to the focus

event of selected elementsfocusin() Binds a function to the focusin event of

selected elementsfocusout() Binds a function to the focusout event of

selected elementshover() Binds one or two functions to the hover

event of selected elementskeydown() Triggers, or binds a function to the

keydown event of selected elementskeypress() Triggers, or binds a function to the

keypress event of selected elements


keyup() Triggers, or binds a function to the keyup event of selected elements

mousedown() Triggers, or binds a function to the mouse down event of selected elements

mouseenter() Triggers, or binds a function to the mouse enter event of selected elements

mouseleave() Triggers, or binds a function to the mouse leave event of selected elements

mousemove() Triggers, or binds a function to the mouse move event of selected elements

mouseout() Triggers, or binds a function to the mouse out event of selected elements

mouseover() Triggers, or binds a function to the mouse over event of selected elements

mouseup() Triggers, or binds a function to the mouse up event of selected elements

one(event) Add an event handler to selected elements. This handler can only be triggered once

ready() Binds a function to the ready event of a document(when an HTML document is ready to use)

resize() Triggers, or binds a function to the resize event of selected elements

scroll() Triggers, or binds a function to the scroll event of selected elements

select() Triggers, or binds a function to the select event of selected elements

submit() Triggers, or binds a function to the submit event of selected elements

trigger() Triggers all events bound to the selected elements

triggerHandler() Triggers all functions bound to a specified event for the selected elements

unbind() Remove an added event handler from selected elements

undelegate(event) Remove an event handler to selected elements, now or in the future

There are some events which are deprecated as follows:

1. jQuery version 1.7Method Descriptiondie() Remove all event handlers added with the

live() functionlive() Add one or more event handlers to current,

or future, matching elements


2. jQuery version 1.8Method Descriptionerror() Triggers, or binds a function to the error

event of selected elementsload() Triggers, or binds a function to the load

event of selected elementssize() Return the number of elements in the

jQuery objecttoggle() Binds one or two functions to the toggle

event of selected elementsunload() Triggers, or binds a function to the unload

event of selected elements

5. JQUERY HTML

5.1. Changing HTML ContentSyntax: $(selector).html(content)The html() method changes content of matching HTML elements.

Example:$(“p”).html(“Mitrais”);

Syntax: $(selector).text(string)The text() method changes text of matching HTML elements.

Example:$(“p”).text(“Mitrais”);

Syntax: $(selector).val(content)The val() method changes value of matching HTML elements(only for elements which has attribute value).

Example:$(“#input”).val(“Mitrais”);

5.2. Adding HTML ContentSyntax: $(selector).append(content)The html() method appends content to the inside of matching HTML elements.

Example:$(“p”).append(“Mitrais”);

Syntax: $(selector).prepend(content)The html() method prepends content to the inside of matching HTML elements.

Example:$(“p”).prepend(“Mitrais”);

Syntax: $(selector).after(content)The html() method inserts content after all matching HTML elements.

Example:$(“p”).after(“Mitrais”);

Syntax: $(selector).before(content)The html() method inserts content before all matching HTML elements.


Example:$(“p”).before(“Mitrais”);

6. JQUERY CSS

6.1. What is jQuery CSS?JQuery CSS is a set of jQuery functions which can modify the style of selected elements.

6.2. JQuery css() methodThe css() method has three different syntaxes, to perform different tasks. $(selecttor).css(name) – Return css property value $(selecttor).css(name) – Set CSS property and value $(selecttor).css({properties}) – Set multiple CSS properties and values

Example://return the background color of first matched element$(“p”).css(“background-color”);

// set the background color of all selected elements$(“p”).css(“background-color”, “#177125”);

// set the background and text color af all selected elements$(“p”).css({“background-color” : “#177125”, “color” : “#FFF”});

6.3. JQuery height() & width() methodsThe height() method sets the height of all matching elements.

Example:$(“div”).height(500);

The width() method sets the width of all matching elements.Example:$(“div”).width(500);


7. JQUERY AJAX

7.1. What is AJAX?Ajax is a technique for creating better and more interactive web applications. AJAX is an acronym for Asynchronous Javascript and XML. It allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading th whole page.

7.2. What is JSON?JSON is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript programming language for representing simple data structures and associative arrays, called objects. Despite its relationship to JavaScript, it is language-independent, with parsers available for virtually every programming language.

The JSON format is often used for serializing and transmitting structured data over a network connection. It is primarily used to transmit data between a server and web application, serving as an alternative to XML.

JSON's basic types are: Number (integer or real) String (double-quoted Unicode with backslash escaping) Boolean (true or false) Array (an ordered sequence of values, comma-separated and enclosed in

square brackets) Object (a collection of key:value pairs, comma-separated and enclosed in curly

braces; the key must be a string) Null

The following example shows the JSON representation of an object that describes a person. The object has string fields for first name and last name, a number field for age, contains an object representing the person's address, and contains a list (an array) of phone number objects.

{ "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021" }, "phoneNumber": [ { "type": "home", "number": "212 555-1234" },


{ "type": "fax", "number": "646 555-4567" } ] }

7.3. AJAX and jQueryJQuery provides a rich set of functions for AJAX web development. With jQuery AJAX, you can request TXT, HTML, XML, or JSON data from a remote server using both HTTP Get and HTTP Post.

Request Description$(selector).load(url,data,callback) Load remote data into selected elements $.ajax(options) Load remote data into an XMLHttpRequest object$.get(url,data,callback,type) Load remote data using HTTP GET$.post(url,data,callback,type) Load remote data using HTTP POST$.getJSON(url,data,callback) Load remote JSON data using HTTP GET$.getScript(url,callback) Load and execute a remote JavaScript file

Notes: (selector) jQuery element selector (data) Key/value pairs of querystring of data to send to the server (callback) Function to be executed when data is loaded (type) Type of data to be returned(html, xml, json, jasonp, script, text) (option) All key/value pairs of options for a complete AJAX request

Example:<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("div").load('test1.txt'); });});</script></head>

<body><div><h2>Let AJAX change this text</h2></div><button>Change Content</button></body></html>

Example:<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){


htmlobj=$.ajax({url:"test1.txt",async:false}); $("div").html(htmlobj.responseText); });});</script></head><body><div><h2>Let AJAX change this text</h2></div><button>Change Content</button></body></html>

7.4. Implementation of Ajax and JSON Value

After we know the basic structure of Jquery Ajax and JSON file, now we will try to use it on real sample. (see AjaxSample project).

Ajax Sample

In this sample we try to grab data from other resource with jquery Ajax. In $.ajax function, we set some parameter such as url that is “/Home/GetDataById” (contain data response that used by our process) and on success we manipulate the result based on our purposes. See below for details :

<table id="tblSearchCustomer"> <tr> <td><label for="SearchName">SearchName</label></td> <td><input id="SearchName" name="SearchName" type="text" value="" /></td> <td></td> </tr> <tr> <td colspan="3"><input type="button" onclick="AjaxSearch()" id="btnSearch" name="btnSearch" value="Search" /></td> </tr> </table>

<table id="tblCustomerDetail"> <tr> <td><label for="Customer_CustomerId">Customer Id</label></td> <td><input id="Customer_CustomerId" name="Customer.CustomerId" readonly="readonly" type="text" value="" /></td> <td></td> </tr> <tr> <td><label for="Customer_CustomerName">Customer Name</label></td> <td><input id="Customer_CustomerName" name="Customer.CustomerName" readonly="readonly" type="text" value="" /></td> <td></td> </tr> <tr> <td><label for="Customer_CustomerSex">Customer Sex</label></td> <td><select disabled="disabled" id="Customer_CustomerSex" name="Customer.CustomerSex"><option value="F">Female</option> <option value="M">Male</option> </select></td> <td></td> </tr>


<tr> <td valign="top"><label for="Customer_CustomerAddress">Customer Address</label></td> <td><textarea cols="20" disabled="disabled" id="Customer_CustomerAddress" name="Customer.CustomerAddress" rows="2"> </textarea></td> <td></td> </tr> </table>

<script type"text/javascript"> $(document).ready(function () {

$("#tblCustomerDetail").hide(); $("#showMessages").hide();

});

function AjaxSearch() { var url ='/Home/GetDataById'; var data = { 'custId': $("#SearchName").val() }; $.ajax({ url: url, data: data, type: "POST", dataType: "json", success: function (data) { //Set Data When Success if (data.Messages != undefined && data.Messages.length > 0) { var msg = '<ul>'; $.each(data.Messages, function (index, value) { msg += '<li>' + value + '</li>'; }); msg += '</ul>'; $("#showMessages").html(msg); $("#showMessages").show(); $("#tblCustomerDetail").hide(); } else { $("#Customer_CustomerId").val(data.Customer.CustomerId); $("#Customer_CustomerName").val(data.Customer.CustomerName); $("#Customer_CustomerSex").val(data.Customer.CustomerSex); $("#Customer_CustomerAddress").val(data.Customer.CustomerAddress); $("#tblCustomerDetail").show(); $("#showMessages").hide(); } }, error: function () { //Show error $("#showMessages").html("<h2>Failed to do ajax process..</h2>"); $("#showMessages").show(); $("#tblCustomerDetail").hide(); }

}); } </script>

JSON value handles

In this sample we try to manage JSON value on Select Combo box options and manipulate them based on our purposes.


<table> <tr> <td><label for="Customer Name Source">Customer Name Source</label></td> <td><select id="Customer_CustomerNameSource" name="Customer.CustomerNameSource"><option value="Dollores O’Riodan">Dollores O'Riodan</option><option value="Milla Jovovick">Milla Jovovick</option><option value="Antonio Banderas">Antonio Banderas</option></select></td> </tr> <tr> <td><label for="Customer Name Destination">Customer Name Destination</label></td> <td><select id="Customer_CustomerNameDest" name="Customer.CustomerNameDest"><option value="{"CustomerId":"CUS-20120404-0001","CustomerName":"Dollores O\u0027Riodan","CustomerNameSource":null,"CustomerNameDest":null,"CustomerSex":"F","CustomerAddress":"Washington D.C","CustomerComment":null}">Dollores O'Riodan</option><option value="{"CustomerId":"CUS-20120404-0002","CustomerName":"Milla Jovovick","CustomerNameSource":null,"CustomerNameDest":null,"CustomerSex":"F","CustomerAddress":"Canada","CustomerComment":null}">Milla Jovovick</option><option value="{"CustomerId":"CUS-20120404-0003","CustomerName":"Antonio Banderas","CustomerNameSource":null,"CustomerNameDest":null,"CustomerSex":"M","CustomerAddress":"Italy","CustomerComment":null}">Antonio Banderas</option></select></td> </tr> <tr> <td valign="top"><label for="Customer_CustomerComment">Comment</label></td> <td><textarea cols="20" id="Customer_CustomerComment" name="Customer.CustomerComment" rows="2"></textarea></td> </tr> </table> <p> <input type="button" value="Set source to dest" onclick="setValue()" /> <input type="button" value="Print Value" onclick="printToTextArea()" /> </p> <script type="text/javascript"> function setValue() { //We can't just set source value to dest value directly. //Because structure of those file were different. //So we need to extract JSON value from dest and compare it to source //and set selected to correct answer. var sourceVal = $("#Customer_CustomerNameSource").val();

$("#Customer_CustomerNameDest option").each(function () { var destJSON = $.evalJSON($(this).val()); if (destJSON.CustomerName == sourceVal) { $(this).attr("selected", "selected"); } }); }

function printToTextArea() { var destJSON = $.evalJSON($("#Customer_CustomerNameDest").val());


var stringBuilder = ""; stringBuilder += "Customer Id : " + destJSON.CustomerId; stringBuilder += "\nCustomer Name : " + destJSON.CustomerName; stringBuilder += "\nCustomer Sex : " + destJSON.CustomerSex; $("#Customer_CustomerComment").val(stringBuilder); } </script>

As we can see at sample code above, we defined 2 javascript functions that used to set value from source to destination combo box and other one is used to print and manipulate value to text are for value that has been selected on destination combo box. Note that value on options at source combo box and destination combo box is different. Source combo box use plain value, but destination combo box contains JSON object as a value. So we need to maintains some code to check whether value from sources is available on destination combo box or not. If yes then we add attribute selected to select current value on destination combo box.

8. EXERCISEUse this code: <fieldset> <legend>Exercise 1</legend> <h1>heading 1</h1>

<h2>heading 2</h2> <div id="paragraph-1" class="element-1">Element 1</div> <div class="element-2">Element 2</div> <p class="para-1">"Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="para-2">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3>List</h3> <ul>

<li><a href="#" class="link-1">link 1</a></li> <li><a href="#" class="link-1">link 2</a></li> <li><a href="#" class="link-1">link 3</a></li>

</ul> </fieldset>

<fieldset> <legend>Exercise 2</legend>

<div id="content-1" class="content">


<h1>Content 1</h1> <p class="para-1">"Lorem ipsum dolor sit amet, consectetur


</div> <div id="content-2" class="content">



</div> <div id="content-3" class="content">



</div> <br/><br/> <textarea rows="1" cols="1" id="txtReplace"

style="width:400px;height:80px;"></textarea> <select class="selectContent">

<option value="content-1">content 1</option> <option value="content-2">content 2</option> <option value="content-3">content 3</option>

</select> <button class="btnChange">Change</button>

</fieldset>


1. Exercise 1 (Exercise.zip) change heading color to red (h1,h2,h3,h4,h5) change background color to grey the "div" that has class "element-1" add padding 5px to all paragraph change width "paragraph" that has class "para-1" into 400px add underline in heading h3 set the font size = 14px for all list "ul li" all list have grey background color change to red the color of the first list "list 1" change to blue the color of the last list "list 3"

2. Add the following events on Exercise 2 section (Exercise.zip) click the content and alert the heading name change the paragraph color to grey when we hover the paragraph when we fill the textarea then click change button, the content will be replaced

by the textarea value change background if we change the selection when text area is active, the background color will turn to yellow, textarea

inactive the background will turn to white again we change the selection, the content background will be changed to grey

(base on the selection that we choose) fill the text area then change the selection. after that click button "change".

the content in the current selection will be changed.3. Use ajax to show all data from “getDataAll” service (ajaxSample.zip)

9. REFERENCES jQuery Tutorial: http://docs.jquery.com/Tutorials jQuery API: http://api.jquery.com/

10. TRAINING PROVIDER jQuery Tutorial: http://www.w3schools.com/jquery/default.asp


http://api.jquery.com/

http://docs.jquery.com/Tutorials

JQuery Training Manual V0.4

Documents

Transcript of JQuery Training Manual V0.4