jQuery quick tuts
-
Upload
nasa-vietnam -
Category
Technology
-
view
1.002 -
download
1
description
Transcript of jQuery quick tuts
![Page 2: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/2.jpg)
2
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 3: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/3.jpg)
3
Why choose jQuery?
JavaScript Distribution in Top Million Sites
http://trends.builtwith.com/javascript
![Page 4: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/4.jpg)
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
![Page 5: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/5.jpg)
5
Why choose jQuery?jQuery rescues us by working the same in all browsers!
![Page 6: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/6.jpg)
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();
![Page 7: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/7.jpg)
7
Why choose jQuery?
Benefits after the course?
![Page 8: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/8.jpg)
8
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 9: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/9.jpg)
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>
![Page 10: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/10.jpg)
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>
![Page 11: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/11.jpg)
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>
![Page 12: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/12.jpg)
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>
![Page 13: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/13.jpg)
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>
![Page 14: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/14.jpg)
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>
![Page 15: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/15.jpg)
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>
![Page 16: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/16.jpg)
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>
![Page 17: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/17.jpg)
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>
![Page 18: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/18.jpg)
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>
![Page 19: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/19.jpg)
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>
![Page 20: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/20.jpg)
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>
![Page 21: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/21.jpg)
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>
![Page 22: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/22.jpg)
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>
![Page 23: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/23.jpg)
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>
![Page 24: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/24.jpg)
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>
![Page 25: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/25.jpg)
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>
![Page 26: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/26.jpg)
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
![Page 27: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/27.jpg)
27
DOM - Selector Expressions
DOM: Document Model ObjectNew jQuery object in the DOM:- $(object)- $(html)- $(selector[,context])- $(element)- $(elementsCollection)
![Page 28: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/28.jpg)
28
DOM - Selector Expressions
Selector Context
$(‘#foo').click(function() {$('span', this).addClass(‘highlight');
});
![Page 29: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/29.jpg)
29
DOM - Selector Expressions
DOM Element
$(‘#foo').click(function() {$(this).addClass(‘highlight');
});
Cloning jQuery Objects
$(‘<div><p></p></div>’).appendTo(“body”)
![Page 30: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/30.jpg)
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)
![Page 31: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/31.jpg)
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>
![Page 32: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/32.jpg)
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>
![Page 33: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/33.jpg)
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>
![Page 34: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/34.jpg)
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’)})
![Page 35: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/35.jpg)
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>
![Page 36: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/36.jpg)
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)
![Page 37: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/37.jpg)
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>
![Page 38: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/38.jpg)
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>
![Page 39: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/39.jpg)
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>
![Page 40: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/40.jpg)
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>
![Page 41: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/41.jpg)
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>
![Page 42: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/42.jpg)
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>
![Page 43: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/43.jpg)
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>
![Page 44: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/44.jpg)
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>
![Page 45: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/45.jpg)
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>
![Page 46: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/46.jpg)
46
DOM - Selector Expressions
.clone()
.empty()
.remove()
![Page 47: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/47.jpg)
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
});
![Page 48: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/48.jpg)
48
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 49: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/49.jpg)
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)
![Page 50: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/50.jpg)
50
Attributes
$(‘…’).css({color:’#f30’,height: ‘200px’,width: ’300px’,border:’solid 1px #ccc’
}) ;
Set various css properties:
![Page 51: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/51.jpg)
51
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 52: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/52.jpg)
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:
![Page 53: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/53.jpg)
53
Ajax
$.ajax(settings):
$.ajax({ url: ‘/member/login’, data: {username:’abc’, pwd:’*****’}, dataType: ‘json’, success: function(msg){
alert(msg?’Login true’:’Login false’);}
});
![Page 54: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/54.jpg)
54
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 55: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/55.jpg)
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); });
![Page 56: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/56.jpg)
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’);});
![Page 57: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/57.jpg)
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);
});
![Page 58: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/58.jpg)
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');
![Page 59: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/59.jpg)
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
![Page 60: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/60.jpg)
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
![Page 61: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/61.jpg)
61
Events
.hover(handlerIn, handlerOut)
.mouseup(handler), .mousedown(handler)
.mouseover(handler), .mouseout(handler)
.dblclick(handler)
.resize(handler)
.scroll(handler)
![Page 62: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/62.jpg)
62
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 63: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/63.jpg)
63
Effects & Animation
.show([duration][, callback])
.hide([duration][, callback])
.toggle([duration][, callback])
.slideDown([duration][, callback])
.slideUp ([duration][, callback])
.slideToggle([duration][, callback])
![Page 64: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/64.jpg)
64
Effects & Animation
.fadeIn([duration][, callback])
.fadeOut([duration][, callback])
.fadeTo(duration, opacity[, callback])
![Page 65: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/65.jpg)
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()
![Page 66: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/66.jpg)
66
Overview1. Why choose jQuery?2. Selectors3. Attributes4. Ajax5. Events6. Effects & Animation7. Plugins8. Q & A
![Page 67: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/67.jpg)
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()
![Page 68: jQuery quick tuts](https://reader038.fdocuments.us/reader038/viewer/2022103013/54055dae8d7f729e768b4c0f/html5/thumbnails/68.jpg)
68
Q & A