jQuery quick tuts

jQuery Quick Tuts
Mr. Huy – IT
1
S: nasavietnam
Y: nasa8x
E: nasavietnam@gmail.com

Overview
1. Why choose jQuery?
2
2. Selectors
3. Attributes
4. Ajax
5. Events
6. Effects & Animation
7. Plugins
8. Q & A

Why choose jQuery?
3
JavaScript Distribution in Top Million Sites
http://trends.builtwith.com/javascript

Why choose jQuery?
4
Led to World Domination
http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+javas
cript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1

Why choose jQuery?
5
jQuery rescues us by working the same in all browsers!

Why choose jQuery?
6
Easier to write jQuery than pure JavaScript
With pure Javascript:
var _divs=document.getElementByTagName(‘div’);
for(var i=0;i<_divs.length;i++)
{
_divs[i].style.display=‘none’;
}
With jQuery:
$(‘div’).hide();

Why choose jQuery?
7
Benefits after the course?

Overview
8
2. Selectors
3. Attributes
4. Ajax
5. Events
7. Plugins
8. Q & A

Selectors
9
$(…) is a selector
$(‘#id’)
get element by id
<html>
<body>
<div>jQuery examples</div>
<div id="foo">example</div>
</body>
</html>
<html>
<body>
<div id="foo">example</div>
</body>
</html>

Selectors
10
$(‘.className’)
get elements by class
<html>
<body>
<div class="foo">example</div>
</body>
</html>
<html>
<body>
</body>
</html>

Selectors
11
$(‘div’)
get elements by tag name
<html>
<body>
<p>jQuery examples</p>
</body>
</html>
<html>
<body>
</body>
</html>

Selectors
12
$(‘#foo > p’)
get all elements by p that are children of a element #foo
<html>
<body>
<div id="foo">
<p></p>
<p></p>
<div>
<p></p>
</div>
</div>
</body>
</html>
<html>
<body>
<div id="foo">
<p></p>
<p></p>
<div>
<p></p>
</div>
</div>
</body>
</html>

Selectors
13
$(‘#foo p’)
get all elements by p that are descendants of a element #foo
<html>
<body>
<div id="foo">
<p></p>
<p></p>
<div>
<p></p>
</div>
</div>
</body>
</html>
<html>
<body>
<div id="foo">
<p></p>
<p></p>
<div>
<p></p>
</div>
</div>
</body>
</html>

Selectors
14
$(‘a*href+’)
Get all links with contains href attribute
<html>
<body>
<a rel=“vmgmedia.vn”></a>
<a href=“//vmgmedia.vn”></a>
<div>
</div>
</body>
</html>
<html>
<body>
<a rel=“vmgmedia.vn”></a>
<div>
</div>
</body>
</html>

Selectors
15
$(‘a*rel=nofollow+’)
Get all <a> elements that have a rel value exactly equal to nofollow
<html>
<body>
<a rel=“nofollow”></a>
<a href=“//vmgmedia.vn”
rel=“nofollow” ></a>
</body>
</html>
<html>
<body>
<a href=“//vmgmedia.vn”
rel=“nofollow” ></a>
</body>
</html>

Selectors
16
a[href^=https]
Get all elements that have the href attribute with a value beginning
exactly with the string https
<html>
<body>
<a href=“https://xyz.vn”></a>
</body>
</html>
<html>
<body>
<a href=“https://xyz.vn”></a>
</body>
</html>

Selectors
17
a[href$=.zip]
Get all elements that have the href attribute with a value ending
exactly with the string .zip
<html>
<body>
<a href=“https://xyz.vn/file.zip”>
</a>
</body>
</html>
<html>
<body>
</a>
</body>
</html>

Selectors
18
a[href*=vmg]
Get all elements that have the href attribute with a value containing
the substring vmg
<html>
<body>
</a>
</body>
</html>
<html>
<body>
</a>
</body>
</html>

Selectors
19
a[rel~=vmg]
Get all elements that have the rel attribute with a value containing the
word vmg, delimited by spaces
<html>
<body>
<a rel=“nofollow vmg”></a>
<a rel=“vmgmedia”></a>
<a rel=“vmg”> </a>
</body>
</html>
<html>
<body>
<a rel=“nofollow vmg”></a>
<a rel=“vmgmedia”></a>
<a rel=“vmg”> </a>
</body>
</html>

Selectors
20
a[id|=vmg]
Get all elements that have the id attribute with a value either equal to
vmg, or beginning with vmg and a hyphen (-).
<html>
<body>
<a id=“vmg-1”></a>
<a id=“vmg-2”></a>
<a id=“vmg”> </a>
</body>
</html>
<html>
<body>
<a id=“vmg-1”></a>
<a id=“vmg-2”></a>
<a id=“vmg”> </a>
</body>
</html>

Selectors
21
:first, :first-child
Select first element in the list item. Ex: $(‘li:first’)
<html>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<html>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

Selectors
22
:parent
Select all elements that are the parent of another element, including text nodes.
Ex: $(‘li:parent’)
<html>
<body>
<ul>
<li>
<a></a>
</li>
<li> </li>
<li></li>
</ul>
</body>
</html>
<html>
<body>
<ul>
<li>
<a></a>
</li>
<li> </li>
<li></li>
</ul>
</body>
</html>

Selectors
23
:contains(text)
Selects all elements that contain the text text
Ex: $(‘p:contains(vmg)’)
<html>
<body>
<p>Vmg</p>
<p>vmgmedia</p>
<p>vmg</p>
<p>VMG</p>
</body>
</html>
<html>
<body>
<p>Vmg</p>
<p>vmgmedia</p>
<p>vmg</p>
<p>VMG</p>
</body>
</html>

Selectors
24
:has(E)
Select all elements that contain an element matching E.
Ex: $(‘li:has(a)’)
<ul>
<li></li>
<li>
<a></a>
</li>
<li></li>
<li>
<a></a>
</li>
</ul>
<ul>
<li></li>
<li>
<a></a>
</li>
<li></li>
<li>
<a></a>
</li>
</ul>

Selectors
25
:not(E)
Get all elements that do not match the selector expression E
Ex: $(‘li:not(:last)’)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

Selectors
26
:hidden, : visible
Select all elements that are hidden or visible
:input, :text, :password, :radio, :submit, :checked, :selected…
Select form elements
$(‘#id, .class, div’)
Multiple selectors in one

DOM - Selector Expressions
27
DOM: Document Model Object
New jQuery object in the DOM:
- $(object)
- $(html)
- $(selector[,context])
- $(element)
- $(elementsCollection)

28
Selector Context
$(‘#foo').click(function() {
$('span', this).addClass(‘highlight');
});

29
DOM Element
$(‘#foo').click(function() {
$(this).addClass(‘highlight');
});
Cloning jQuery Objects
$(‘<div><p></p></div>’).appendTo(“body”)

30
.filter()
Reduce the set of matched elements to those that match the selector
or pass the function’s test. Ex: $(‘li’).filter(‘:last’)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
.filter(selector)
.filter(function)

31
.eq(n)
Get one element at the specified index.
Ex: $(‘li’).eq(1)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

32
.slice(start[,end])
Get elements to a subset specified by a range of indices
Ex: $(‘li’).slice(1,3)
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Selectors
33
.children([selector])
Get the children of each element in the set of matched
elements, optionally filtered by a selector. Ex: $(‘li.foo’).children()
<ul>
<li class=‘foo’>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ul>
<li class=‘foo’>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>

Selectors
34
.parents([selector])
Get the ancestors of each element in the current set of matched
elements, optionally filtered by a selector.
<div class=‘foo’></div>
<div class=‘foo’>
<a id=‘click’></a>
</div>
$(‘#click’).bind(‘click’, functi
on(){
$(this).parents(‘.foo’).
addClass(‘highlight’)
})

35
.parent([selector])
Get the parent of each element in the current set of matched
elements, optionally filtered by a selector. Ex: $(‘#click’).parent()
<div>
<ul class=‘foo’>
<li>
<a class=‘click’></a>
</li>
</ul>
</div>
<div>
<ul class=‘foo’>
<li>
<a class=‘click’></a>
</li>
</ul>
</div>

36
.is(selector)
Return true if at least one of these elements matches the selector
.hasClass(className)
Return true if elements exist className
.addClass(className)/.removeClass(className)
Add/remove class of element(s)

37
.replaceWith(newContent)
Replace each element by newContent.
Ex: $(‘#main’).replaceWidth(‘<p>new content</p>’)
<div>
<div id=‘main’>
</div>
</div>
<div>
<p>new content</p>
</div>

38
.replaceAll(target)
Replace each target element with the set of matched elements.
Ex: $(‘#main’).replaceAll($(‘.target’))
<div id=‘main’>Hello</div>
<div class=‘target’>
Hello 2
</div>
<div class=‘target’>
Hello 2
</div>

39
.prepend(content)
Insert content to fisrt child of elements.
Ex: $(‘#main’).prepend(“<div>new</div>”)
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
</div>
<div id=‘main’>
<div> new</div>
<p>Hello</p>
<p>Hello2</p>
</div>

40
.append(content)
Insert content to last child of elements.
Ex: $(‘#main’).append(“<div>new</div>”)
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
</div>
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
<div>new</div>
</div>

41
.before(content)
Insert content before elements.
Ex: $(‘#main’).before(“<div>new</div>”)
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
</div>
<div>new</div>
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
</div>

42
.after(content)
Insert content after elements.
Ex: $(‘#main’).after(“<div>new</div>”)
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
</div>
<div id=‘main’>
<p>Hello</p>
<p>Hello2</p>
</div>
<div>new</div>

43
.wrap(wrapElements)
Wrap an HTML structure around each element in the set of matched elements
Ex: $(‘.foo’).wrap(‘<div class=“wrap”></div>’)
<div class=‘foo’>Hello</div>
<div class=‘wrap’>
</div>
</div>

44
.wrapAll(wrapElements)
Wrap an HTML structure around all elements in the set of matched elements
Ex: $(‘.foo’).wrapAll(‘<div class=“wrap”></div>’)
</div>

45
.wrapInner(wrapElements)
Wrap an HTML structure around the content of each element in the set of
matched elements
Ex: $(‘.foo’).wrapInner(‘<div class=“wrap”></div>’)
<div class=‘wrap’>Hello</div>
</div>
<div class=‘wrap’>Hello</div>
</div>

46
.clone()
.empty()
.remove()

jQuery Factory Method $()
47
You can also pass $() a function to run the function
after the page load.
$(function(){
//do something
});
This is essentially the same as..
$(document).ready(function(){
//do something
});
$().ready(function(){
//do something
});

Overview
48
2. Selectors
3. Attributes
4. Ajax
5. Events
7. Plugins
8. Q & A

Attributes
49
$(‘…’).attr(‘id’)
Get Set
$(‘…’).attr(‘id’,’new-id’)
.html() .html(‘<p>Hello</p>’)
.val() .val(‘new value’)
.css(‘color’) .css(‘color’,’#f30’)
.width() .width(100)

Attributes
50
$(‘…’).css({
color:’#f30’,
height: ‘200px’,
width: ’300px’,
border:’solid 1px #ccc’
}) ;
Set various css properties:

Overview
51
2. Selectors
3. Attributes
4. Ajax
5. Events
7. Plugins
8. Q & A

Ajax
52
$.ajax(settings)
$.get(url, params, callback)
$.post(url, params, callback)
$.getJSON(url, params, callback)
$.getScript(url, callback)
jQuery has excellent support for Ajax
$(‘#main’).load(‘ajax.html’)
More advanced methods include:

Ajax
53
$.ajax(settings):
$.ajax({
url: ‘/member/login’,
data: ,username:’abc’, pwd:’*****’-,
dataType: ‘json’,
success: function(msg){
alert(msg?’Login true’:’Login false’);
}
});

Overview
54
2. Selectors
3. Attributes
4. Ajax
5. Events
7. Plugins
8. Q & A

Events
.bind(eventType[, eventData], handler)
Attach a handler to an event for the elements.
55
Ex:
$('#foo').bind('click', {msg: ‘Hello event’-, function(event) {
alert(event.data.msg);
});
Multiples events:
$('#foo').bind('click, mouseover', {msg: ‘Hello event’-,
function(event) {
alert(event.data.msg);
});

Events
unbind([eventType[, handler]])
Remove a previously-attached event handler from the elements
56
Ex:
$('#foo').unbind('click');
$('#foo').unbind('click‘, function(),
alert(‘Event click removed’);
});

Events
.one(eventType[, eventData], handler)
Attach a handler to an event for the elements. The handler is executed at
most once.
57
$('#foo').one('click', function() {
alert('This will be displayed only once.');
});
$('#foo').bind('click', function(event) {
alert('This will be displayed only once.');
$(this).unbind(event);
});

Events
.trigger(eventType[, parameters])
Execute all handlers and behaviors attached to the matched elements for the
given event type.
58
$('#foo').bind('click', function(event) {
alert(‘Hello click event.');
});
$('#foo').trigger('click');

Events
59
$('#foo').bind(‘vmg-
event', function(event, param1, param2) {
alert(param1 + "n" + param2);
});
$('#foo').trigger(‘vmg-event', *‘value 1', ‘value 2'+);
Trigger custom event

Events
.live(eventType, handler)
Attach a handler to the event for all elements that match the current
selector, now or in the future.
60
$(function () {
$('.click').live('click', function () {
$('body').append('<div class="click">Another target</div>');
});
$('body').append('<div class="click">Another target</div>');
});
Not all event types are supported. Only custom events and the
following:
click, dblclick, keydown, keyup, keypress, mousedown, mousemove, m
ouseout, mouseover, mouseup, submit

Events
.hover(handlerIn, handlerOut)
61
.mouseup(handler), .mousedown(handler)
.mouseover(handler), .mouseout(handler)
.dblclick(handler)
.resize(handler)
.scroll(handler)

Overview
62
2. Selectors
3. Attributes
4. Ajax
5. Events
7. Plugins
8. Q & A

Effects & Animation
.show([duration][, callback])
63
.hide([duration][, callback])
.toggle([duration][, callback])
.slideDown([duration][, callback])
.slideUp ([duration][, callback])
.slideToggle([duration][, callback])

Effects & Animation
.fadeIn([duration][, callback])
64
.fadeOut([duration][, callback])
.fadeTo(duration, opacity[, callback])

Effects & Animation
.animate(properties, options)
65
.animate(properties[, duration][, easing][, callback])
$('#click').click(function() {
$('#photo').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
alert('Animation complete.');
});
});
.stop()

Overview
66
2. Selectors
3. Attributes
4. Ajax
5. Events
7. Plugins
8. Q & A

Plugins
67
jQuery is extensible through plugins, which can
add new methods to the jQuery object
$.fn.externalLink=function(){
this.filter(function () {
return this.hostname &&
this.hostname !== location.hostname;
}).attr('target', '_blank');
};
$(‘a’).externalLink()

jQuery quick tuts

More Related Content

What's hot

Viewers also liked

Similar to jQuery quick tuts

Recently uploaded

jQuery quick tuts

Editor's Notes