jquery quick tuts
DESCRIPTION
TRANSCRIPT
2
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
3
Why choose jQuery?
JavaScript Distribution in Top Million Sites
http://trends.builtwith.com/javascript
4
Why choose jQuery?
Led to World Domination
http://www.google.com/trends/?q=dojo+javascript,+jquery+javascript,+yui+javascript,+prototype+javascript,+mootools+javascript&ctab=0&geo=all&date=all&sort=1
5
Why choose jQuery?jQuery rescues us by working the same in all browsers!
6
Why choose jQuery?
Easier to write jQuery than pure JavaScriptWith pure Javascript:var _divs=document.getElementByTagName(‘div’);for(var i=0;i<_divs.length;i++){
_divs[i].style.display=‘none’;}
With jQuery:$(‘div’).hide();
7
Why choose jQuery?
Benefits after the course?
8
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
9
Selectors
$(…) is a selector
$(‘#id’) get element by id
<html><body><div>jQuery examples</div><div id="foo">example</div></body></html>
<html><body><div>jQuery examples</div><div id="foo">example</div></body></html>
10
Selectors
$(‘.className’) get elements by class
<html><body><div>jQuery examples</div><div class="foo">example</div><div class="foo">example</div></body></html>
<html><body><div>jQuery examples</div><div class="foo">example</div><div class="foo">example</div></body></html>
11
Selectors
$(‘div’) get elements by tag name
<html><body><p>jQuery examples</p><div class="foo">example</div><div class="foo">example</div></body></html>
<html><body><p>jQuery examples</p><div class="foo">example</div><div class="foo">example</div></body></html>
12
Selectors
$(‘#foo > p’) get all elements by p that are children of a element #foo
<html><body><p>jQuery examples</p><div id="foo">
<p></p><p></p><div><p></p></div>
</div></body></html>
<html><body><p>jQuery examples</p><div id="foo">
<p></p><p></p><div><p></p></div>
</div></body></html>
13
Selectors
$(‘#foo p’) get all elements by p that are descendants of a element #foo
<html><body><p>jQuery examples</p><div id="foo">
<p></p><p></p><div><p></p></div>
</div></body></html>
<html><body><p>jQuery examples</p><div id="foo">
<p></p><p></p><div><p></p></div>
</div></body></html>
14
Selectors
$(‘a[href]’) Get all links with contains href attribute
<html><body><p>jQuery examples</p><a rel=“vmgmedia.vn”></a><a href=“//vmgmedia.vn”></a><div><a href=“//vmgmedia.vn”></a></div></body></html>
<html><body><p>jQuery examples</p><a rel=“vmgmedia.vn”></a><a href=“//vmgmedia.vn”></a><div><a href=“//vmgmedia.vn”></a></div></body></html>
15
Selectors
$(‘a[rel=nofollow]’) Get all <a> elements that have a rel value exactly equal to nofollow
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“//vmgmedia.vn” rel=“nofollow” ></a></body></html>
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“//vmgmedia.vn” rel=“nofollow” ></a></body></html>
16
Selectors
a[href^=https]Get all elements that have the href attribute with a value beginning exactly with the string https
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“https://xyz.vn”></a></body></html>
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“https://xyz.vn”></a></body></html>
17
Selectors
a[href$=.zip]Get all elements that have the href attribute with a value ending exactly with the string .zip
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“https://xyz.vn/file.zip”> </a></body></html>
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“https://xyz.vn/file.zip”> </a></body></html>
18
Selectors
a[href*=vmg]Get all elements that have the href attribute with a value containing the substring vmg
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“https://xyz.vn/file.zip”> </a></body></html>
<html><body><p>jQuery examples</p><a rel=“nofollow”></a><a href=“//vmgmedia.vn”></a><a href=“https://xyz.vn/file.zip”> </a></body></html>
19
Selectors
a[rel~=vmg]Get all elements that have the rel attribute with a value containing the word vmg, delimited by spaces
<html><body><p>jQuery examples</p><a rel=“nofollow vmg”></a><a rel=“vmgmedia”></a><a rel=“vmg”> </a></body></html>
<html><body><p>jQuery examples</p><a rel=“nofollow vmg”></a><a rel=“vmgmedia”></a><a rel=“vmg”> </a></body></html>
20
Selectors
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><p>jQuery examples</p><a id=“vmg-1”></a><a id=“vmg-2”></a><a id=“vmg”> </a></body></html>
<html><body><p>jQuery examples</p><a id=“vmg-1”></a><a id=“vmg-2”></a><a id=“vmg”> </a></body></html>
21
Selectors
:first, :first-childSelect 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>
22
Selectors
:parentSelect 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>
23
Selectors
:contains(text)Selects all elements that contain the text textEx: $(‘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>
24
Selectors
: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>
25
Selectors
:not(E)Get all elements that do not match the selector expression EEx: $(‘li:not(:last)’)
<ul> <li></li> <li></li> <li></li></ul>
<ul> <li></li> <li></li> <li></li></ul>
26
Selectors
:hidden, : visibleSelect all elements that are hidden or visible
:input, :text, :password, :radio, :submit, :checked, :selected…Select form elements
$(‘#id, .class, div’)Multiple selectors in one
27
DOM - Selector Expressions
DOM: Document Model ObjectNew jQuery object in the DOM:- $(object)- $(html)- $(selector[,context])- $(element)- $(elementsCollection)
28
DOM - Selector Expressions
Selector Context
$(‘#foo').click(function() {$('span', this).addClass(‘highlight');
});
29
DOM - Selector Expressions
DOM Element
$(‘#foo').click(function() {$(this).addClass(‘highlight');
});
Cloning jQuery Objects
$(‘<div><p></p></div>’).appendTo(“body”)
30
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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
DOM - Selector Expressions
.slice(start[,end])Get elements to a subset specified by a range of indicesEx: $(‘li’).slice(1,3)
<ul><li></li><li></li><li></li><li></li>
</ul>
<ul><li></li><li></li><li></li><li></li>
</ul>
33
Selectors
.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>
34
Selectors
.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’></div><div class=‘foo’>
<a id=‘click’></a></div><div class=‘foo’></div>
$(‘#click’).bind(‘click’, function(){
$(this).parents(‘.foo’).addClass(‘highlight’)})
35
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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>
<div id=‘main’>Hello</div><div id=‘main’>Hello</div>
39
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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
DOM - Selector Expressions
.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=‘foo’>Hello</div>
<div class=‘wrap’><div class=‘foo’>Hello</div></div><div class=‘wrap’><div class=‘foo’>Hello</div></div>
44
DOM - Selector Expressions
.wrapAll(wrapElements)Wrap an HTML structure around all elements in the set of matched elements Ex: $(‘.foo’).wrapAll(‘<div class=“wrap”></div>’)
<div class=‘foo’>Hello</div><div class=‘foo’>Hello</div>
<div class=‘wrap’><div class=‘foo’>Hello</div><div class=‘foo’>Hello</div></div>
45
DOM - Selector Expressions
.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=‘foo’>Hello</div><div class=‘foo’>Hello</div>
<div class=‘foo’><div class=‘wrap’>Hello</div></div><div class=‘foo’><div class=‘wrap’>Hello</div></div>
46
DOM - Selector Expressions
.clone()
.empty()
.remove()
47
jQuery Factory Method $()
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
});
48
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
49
Attributes
$(‘…’).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)
50
Attributes
$(‘…’).css({color:’#f30’,height: ‘200px’,width: ’300px’,border:’solid 1px #ccc’
}) ;
Set various css properties:
51
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
52
Ajax
$.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:
53
Ajax
$.ajax(settings):
$.ajax({ url: ‘/member/login’, data: {username:’abc’, pwd:’*****’}, dataType: ‘json’, success: function(msg){
alert(msg?’Login true’:’Login false’);}
});
54
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
55
Events
.bind(eventType[, eventData], handler)Attach a handler to an event for the elements.
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); });
56
Events
unbind([eventType[, handler]])Remove a previously-attached event handler from the elements
Ex:$('#foo').unbind('click'); $('#foo').unbind('click‘, function(){
alert(‘Event click removed’);});
57
Events
.one(eventType[, eventData], handler) Attach a handler to an event for the elements. The handler is executed at most once.
$('#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);
});
58
Events
.trigger(eventType[, parameters])Execute all handlers and behaviors attached to the matched elements for the given event type.
$('#foo').bind('click', function(event) {alert(‘Hello click event.');
});
$('#foo').trigger('click');
59
Events
$('#foo').bind(‘vmg-event', function(event, param1, param2) {
alert(param1 + "\n" + param2);});
$('#foo').trigger(‘vmg-event', [‘value 1', ‘value 2']);
Trigger custom event
60
Events
.live(eventType, handler)Attach a handler to the event for all elements that match the current selector, now or in the future.
$(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, mouseout, mouseover, mouseup, submit
61
Events
.hover(handlerIn, handlerOut)
.mouseup(handler), .mousedown(handler)
.mouseover(handler), .mouseout(handler)
.dblclick(handler)
.resize(handler)
.scroll(handler)
62
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
63
Effects & Animation
.show([duration][, callback])
.hide([duration][, callback])
.toggle([duration][, callback])
.slideDown([duration][, callback])
.slideUp ([duration][, callback])
.slideToggle([duration][, callback])
64
Effects & Animation
.fadeIn([duration][, callback])
.fadeOut([duration][, callback])
.fadeTo(duration, opacity[, callback])
65
Effects & Animation
.animate(properties, options)
.animate(properties[, duration][, easing][, callback])
$('#click').click(function() { $('#photo').animate({
opacity: 0.25,left: '+=50',height: 'toggle'
}, 5000, function() {alert('Animation complete.');
});});
.stop()
66
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
67
PluginsjQuery 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()
68
Q & A