WEB DESIGN

HienLTH – KhietLTN Web Design 1

 JQuery

MSc. Luong Tran Ngoc Khiet

HienLTH – KhietLTN Web Design 2

 Content
• An introduction to JQuery
• JQuery Selector / JQuery Filter
• Document content change
• Event handling
• Effects & Activity Photo
• Valid check
• interface
• Ajax
HienLTH – KhietLTN Web Design 3
HienLTH – KhietLTN Web Design 4
HienLTH – KhietLTN Web Design 5
HienLTH – KhietLTN Web Design 6
 An introduction to JQuery

• jQuery is a library written in JavaScript language support

for Web-based interface design.
• jQuery was designed to change the way client-side
programming is like traditional Javascript.
• jQuery provides the following features:
– Accessing HTML documents (DOM) more easily.
– Handle javascript events easily.
– Controls are supported in the web interface design process.
– Provides web effects.
– Simplify using AJAX technology.
– Support for interface libraries.

HienLTH – KhietLTN Web Design 7

 JQUERY STUDY PATH

Core
Selectors
JQuery

Validation
Events

UI
AJAX Functions

Effects

HienLTH – KhietLTN Web Design 8

 Opening example

HienLTH – KhietLTN Web Design 9

 JQUERY

 <script type="text/javascript" src="jquery.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $("p").click(function()
 { Library

 $(this).hide();
Event
 });
 }); Selector

 </script>

HienLTH – KhietLTN Web Design 10

 Quick start with Jquery

HienLTH – KhietLTN Web Design 11

 Bộ chọn (Selector)
• Used to select 1 or more HTML tags
• Some options:
jQuery Selects…
$(‘#myId’) By ID
$(‘div’) By Element Type
$(‘.myClass’) By Class
$(‘div, span, p.myClass, #myid’) Áp dụng cho nhiều thẻ
$(‘*’) Tất cả các thẻ
$(‘p#id’), $(‘p.myClass’) Chỉ định bởi tên theo và classname (id)

HienLTH – KhietLTN Web Design 12

 The selector according to the
hierarchy

HienLTH – KhietLTN Web Design 13

 A selector of form elements
SELECTOR Ý NGHĨA
:input Chọn tất cả các thẻ input, textarea trên form
:text Chọn tất cả các textfield trên form
:password Chọn tất cả các password field
:radio Chọn tất cả các radio button
:checkbox Chọn tất cả các checkbox
:submit Chọn tất cả các button submit
:reset Chọn tất cả các button reset
:image Chọn tất cả các image
:button Chọn tất cả các generalized button
:file Chọn tất cả các control upload file

HienLTH – KhietLTN Web Design 14

 A selector of form elements

HienLTH – KhietLTN Web Design 15

 Basic filters

HienLTH – KhietLTN Web Design 16

 Filter properties

HienLTH – KhietLTN Web Design 17

 Some other filters

HienLTH – KhietLTN Web Design 18

 Descendant filters

• For example
– $(“li:nth-child(even)”) - xác định các thẻ <li> con tại vị trí chẵn
– $(“li:nth-child(even)”) - xác định thẻ <li> là con duy nhất
– $(“li:nth-child(2)”) - xác định các thẻ <li> con thứ 3
– $(“li:nth-child(3n+1)”) – xác định các thẻ <li> thứ 1, 4, 7, 10…

HienLTH – KhietLTN Web Design 19

 Processing the result set

HienLTH – KhietLTN Web Design 20

 Handling content

HienLTH – KhietLTN Web Design 21

 Inserts and additions

HienLTH – KhietLTN Web Design 22

 Modifying Elements

• Inside Elements

– $("content").appendTo(" selector ");

– $("content").prependTo(" selector ");

– $("selector").append("<li>this is after</li>")
– $("selector").prepend("<li>this is after</li>");

HienLTH – KhietLTN Web Design 23

 Modifying Elements
• Outside Elements

– $("content").insertAfter("selector");
– $("content").insertBefore(" selector ");

– $("selector").after("<li>this is after</li>")
– $("selector").before("<li>this is after</li>");

– $(selector).before(content, function(index) {} );
HienLTH – KhietLTN Web Design 24
 Inserts and additions

HienLTH – KhietLTN Web Design 25

 Handling properties

HienLTH – KhietLTN Web Design 26

 Handling CSS

HienLTH – KhietLTN Web Design 27

 Style Elements

• $("selector").css("style","value");
• $("selector").css({
"style":"value",
"style":"value“
});
• $("selector").css("style", function(index, value) {
...
} );

HienLTH – KhietLTN Web Design 28

 Styling & Dimensions
• $("selector).hasClass("className");
• $("selector).addClass("className");
• $("selector).addClass("className
className2");
• $("selector).addClass("className").removeClas
s("className");
• $("selector).removeClass("className");
• $("selector).removeClass("className");
• $("selector).toggleClass("className
className2");
HienLTH – KhietLTN Web Design 29
 Styling & Dimensions

• $("selector").width("100px");
• $("selector").width();
• $("selector").height("100px");
• $("selector").height();
• $("selector").position();

HienLTH – KhietLTN Web Design 30

HienLTH – KhietLTN Web Design 31
 Form Events

• $(selector).blur()
• $(selector).change()
• $(selector).focus()
• $(selector).select()
• $(selector).submit()

HienLTH – KhietLTN Web Design 32

 Keyboard Events
• $(selector).focusin()
• $(selector).focusout()
• $(selector).keydown()
• $(selector).keypress()
• $(selector).keyup()

HIENLTH, FIT of HCMUP 33

HienLTH – KhietLTN Web Design 33
 jQuery Traversing

• .parent() : returns the direct parent element of

the selected element.
• .parents() : returns all ancestor elements of the
selected element, all the way up to the
document's root element (<html>).
• .parentsUntil(“selector") : returns all ancestor
elements between two given arguments.

HienLTH – KhietLTN Web Design 34

 jQuery Traversing -
Descendants
• children() : returns all direct children of the
selected element.
• find() : returns descendant elements of the
selected element, all the way down to the
last descendant.

HienLTH – KhietLTN Web Design 35

 jQuery Traversing - Siblings

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

HienLTH – KhietLTN Web Design 36

 jQuery Traversing - Filtering

• first() : returns the first element of the selected

elements.
• last() : returns the last element of the selected
elements.
• eq() : returns an element with a specific index
number of the selected elements.
• filter() : lets you specify a criteria.
• not() : returns all elements that do not match the
criteria.

HienLTH – KhietLTN Web Design 37

 Effects on hide / show

HienLTH – KhietLTN Web Design 38

 Fade and slide effects

HienLTH – KhietLTN Web Design 39

 Customized effects
$(selector).animate({params},speed,callback);

HienLTH – KhietLTN Web Design 40

 Form validation

HienLTH – KhietLTN Web Design 41

 Form validation

HienLTH – KhietLTN Web Design 42

 Validation rules

HienLTH – KhietLTN Web Design 43

 Validation rules

HienLTH – KhietLTN Web Design 44

 Interface (Jquery UI)
• Datepicker
• Accordion
• Tab
• Dialog

HienLTH – KhietLTN Web Design 45

 UI-Datepicker

<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>

HienLTH – KhietLTN Web Design 46

 UI-Datepicker

HienLTH – KhietLTN Web Design 47

 UI-Accordion
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

<div id="accordion">
<h3><a href="#">First header</a></h3>
<div>First content</div>
<h3><a href="#">Second header</a></h3>
<div>Second content</div>
</div>

HienLTH – KhietLTN Web Design 48

 UI-AutoComplete
<script>
$(function() {
$( "#tags" ).autocomplete
({
source: ["ActionScript", "AppleScript", "Java“, "JavaScript","Lisp",
"Perl","PHP","Python“, "Ruby","Scala","Scheme”]
});
});
</script>

<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div>

HienLTH – KhietLTN Web Design 49

 UI-Dialog
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>

<div class="demo">
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for
displaying information. The dialog window can be moved,
resized and closed with the 'x' icon.</p>
</div>
</div>
HienLTH – KhietLTN Web Design 50
 UI-TABS

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<div class="demo“><div id="tabs">

<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat</p>
</div></div></div>
HienLTH – KhietLTN Web Design 51
 UI-Sortable

<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>

<div class="demo">
<ul id="sortable">
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
</ul>
</div
HienLTH – KhietLTN Web Design 52
 UI-Selectable
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>

<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
</ol>
</div>
HienLTH – KhietLTN Web Design 53
 Ajax

HienLTH – KhietLTN Web Design 54

 AJAX

• Helpers G | ajaxStart
– load, get, getJSON, getScript, post (all use $.ajax behind the L | beforeSend
scenes) G | ajaxSend
L | success
– $.ajaxSetup(options) can be used to globally set the default G | ajaxSuccess
options for all AJAX request. You can still override these L | error
within each AJAX request object. G | ajaxError
L | complete
• Local Events – subscribed to within AJAX request object G | ajaxComplete
• Global Events – broadcast to all elements in the DOM G | ajaxStop
– Can be disabled within the AJAX request object’s ‘global’
property
– .bind(‘ajaxStart’, fn) or .ajaxStart(fn)

HienLTH – KhietLTN Web Design 55

 Global Ajax Event Handlers

• .ajaxSend()
• .ajaxStart()
• .ajaxStop()
• .ajaxComplete()
• .ajaxSuccess()
• .ajaxError()

HienLTH – KhietLTN Web Design 56

 Resources
• jQuery Main
– http://jquery.com
– http://docs.jquery.com/Downloading_jQuery
• jQuery API Documentation
– http://api.jquery.com
– http://docs.jquery.com
• jQuery UI
– http://jqueryui.com
– http://jqueryui.com/themeroller/
• jQuery Blog
– http://blog.jquery.com/
• Around The Web
– http://stackoverflow.com
– http://www.nettuts.com
– http://www.smashingmagazine.com
• Tools
– Visual Studio JavaScript Intellisense Support (KB958502)
– http://getfirebug.com/ (Firebug Firefox Plug-in)
– http://jsbin.com/ (JS Bin - Collaborative JavaScript Debugging)
• Twitter
– @jquery, @jqueryui, @jresig, @rem, @codylindley , @reybango, @elijahmanor, @jamespadolsey, @brandonaaron,
@malsup, @pbakaus, @rworth

HienLTH – KhietLTN Web Design 57

 Q&A

HienLTH – KhietLTN Web Design 58

 Thank you!!!

HienLTH – KhietLTN Web Design 59