Weitere ähnliche Inhalte Ähnlich wie jQuery Way (20) Kürzlich hochgeladen (20) jQuery Way1. jQuery Way
Right path to Javascript and jQuery
Thursday, September 23, 2010
2. Web Triad
Javascript HTML
CSS
Thursday, September 23, 2010
3. Web Triad
jQuery
Javascript HTML
CSS
Thursday, September 23, 2010
4. Structure
*http://developer.yahoo.com/performance/rules.html
Thursday, September 23, 2010
8. jQuery: Start
=
<img />
<script />
<style />
Thursday, September 23, 2010
11. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010
12. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010
13. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’) $(‘#txt-email’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010
14. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’) $(‘#txt-email’) $(‘.input-text’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010
15. jQuery - Selectors
$(‘selectors’)
<input id=”txt-email” class=”.input-text” type=”text” name=”email” />
$(‘input’) $(‘#txt-email’) $(‘.input-text’) $(‘input[name=email]’)
*http://api.jquery.com/category/selectors/
Thursday, September 23, 2010
16. jQuery - What It Can Do?
• Event Handler
• Traversing
• Manipulating
• Helper
• Effect
• AJAX
Thursday, September 23, 2010
17. jQuery - Event Handler
$(‘selectors’) .click( function() { ... } );
.bind(‘click’, function() { ... } );
.click(someFunction);
*http://api.jquery.com/category/events/
Thursday, September 23, 2010
18. jQuery - Traversing
$(‘selectors’) .find(‘selectors’);
.filter(‘selectors’);
.parent();
.parents(‘selectors’)
.each(function(index, element) { ... })
*http://api.jquery.com/category/traversing/
Thursday, September 23, 2010
19. jQuery - Manipulating
$(‘selectors’) .addClass(‘className’);
.removeClass(‘className’);
.css(‘name’, ‘value’);
.attr(‘name’, ‘value’)
.remove()
.html(‘<div />)
.append(‘<div />’)
*http://api.jquery.com/category/manipulation/
Thursday, September 23, 2010
20. jQuery - Helper
$(‘selectors’) .hasClass(‘className’);
.text(‘textContent’);
.val(‘value’);
.val() - Returns value
Thursday, September 23, 2010
21. jQuery - Effect
$(‘selectors’) .show();
.show(‘slow|fast’);
.hide();
.toggle()
.slideUp()
.slideDown()
.fadeIn()
.fadeOut()
*http://api.jquery.com/category/effects/
Thursday, September 23, 2010
22. jQuery - AJAX
$.ajax(
url: ‘ajax-path’,
type: ‘post’,
dataType: ‘json’,
success: function(data) {
// ...
}
)
Thursday, September 23, 2010
23. jQuery - AJAX
$.post(‘ajax-path’, { name: val },
success: function(data) {
// ...
},
‘json’
)
Thursday, September 23, 2010
24. $(jQuery).stop();
Facebook: http://facebook.com/ferry.mulyono
Twitter: @ferrymulyono
Thursday, September 23, 2010