jquery quick tuts

1

jQuery Quick Tuts

Mr. Huy – ITS: nasavietnamY: nasa8xE: [email protected]

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


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>


<p></p><p></p><div><p></p></div>


13

Selectors

$(‘#foo p’) get all elements by p that are descendants of a element #foo


<p></p><p></p><div><p></p></div>



<p></p><p></p><div><p></p></div>


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>


https://xyz.vn/file.zip


18

Selectors

a[href*=vmg]Get all elements that have the href attribute with a value containing the substring vmg





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>


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


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’)



.filter(selector).filter(function)

31


.eq(n)Get one element at the specified index. Ex: $(‘li’).eq(1)



32


.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


.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>

<div id=‘main’>Hello</div><div id=‘main’>Hello</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>

<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>

<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>

<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=‘foo’>Hello</div>

<div class=‘wrap’><div class=‘foo’>Hello</div></div><div class=‘wrap’><div class=‘foo’>Hello</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 class=‘wrap’><div class=‘foo’>Hello</div><div class=‘foo’>Hello</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=‘foo’><div class=‘wrap’>Hello</div></div><div class=‘foo’><div class=‘wrap’>Hello</div></div>

46


.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


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


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


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


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


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

jquery quick tuts

Technology