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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie jQuery quick tuts

Ähnlich wie jQuery quick tuts (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery quick tuts

Hinweis der Redaktion