4. 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
6. 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();
9. 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>jQuery examples</div>
<div id="foo">example</div>
</body>
</html>
10. Selectors
10
$(‘.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
11
$(‘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
12
$(‘#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
13
$(‘#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>
15. Selectors
15
$(‘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
16
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
17
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
18
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
19
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
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>
<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
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>
22. 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>
23. 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>
24. 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>
25. 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>
26. 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
27. DOM - Selector Expressions
27
DOM: Document Model Object
New jQuery object in the DOM:
- $(object)
- $(html)
- $(selector[,context])
- $(element)
- $(elementsCollection)
29. DOM - Selector Expressions
29
DOM Element
$(‘#foo').click(function() {
$(this).addClass(‘highlight');
});
Cloning jQuery Objects
$(‘<div><p></p></div>’).appendTo(“body”)
30. DOM - Selector Expressions
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. DOM - Selector Expressions
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. DOM - Selector Expressions
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>
33. 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>
34. 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’></div>
<div class=‘foo’>
<a id=‘click’></a>
</div>
<div class=‘foo’></div>
$(‘#click’).bind(‘click’, functi
on(){
$(this).parents(‘.foo’).
addClass(‘highlight’)
})
35. DOM - Selector Expressions
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. DOM - Selector Expressions
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. DOM - Selector Expressions
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. DOM - Selector Expressions
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>
<div id=‘main’>Hello</div>
<div id=‘main’>Hello</div>
39. DOM - Selector Expressions
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. DOM - Selector Expressions
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>
43. DOM - Selector Expressions
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=‘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
44
.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
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=‘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
46
.clone()
.empty()
.remove()
47. 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
});
55. 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);
});
56. 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’);
});
57. 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);
});
58. 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');
60. 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
67. 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()