40

jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!
Page 2: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Agenda

•  jQuery Basics

•  Actions

•  Selectors

•  Events

•  Effects

•  Ajax

•  Plugins

•  Tipps und warum jQuery so toll ist

jQuery | Dominik Moritz | 23. Mai 2011

Page 3: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Was ist jQuery?

jQuery | Dominik Moritz | 23. Mai 2011

?

Page 4: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Was ist jQuery?

jQuery | Dominik Moritz | 23. Mai 2011

Page 5: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Die etwas sinnvollere Antwort

•  Die meistverwendete JavaScript Bibliothek

•  jQuery bietet:

•  Elementselektion im DOM über die Sizzle selector engine

•  DOM-Manipulation

•  Erweitertes Event-System

•  Hilfsfunktionen

•  Effekte und Animationen

•  Ajax-Funktionalitäten

•  Plug-ins

jQuery | Dominik Moritz | 23. Mai 2011

Page 6: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Wie nutze ich jQuery?

<script type="text/javascript" src="jquery.js"></script> Oder <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript”>

$(document).ready(function() { // put your awesome jQuery code here});

</script>

jQuery | Dominik Moritz | 23. Mai 2011

Page 7: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Auch asynchron möglich…

<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.1");   google.setOnLoadCallback(function() {

// your awesome jQuery code goes here}); </script>

jQuery | Dominik Moritz | 23. Mai 2011

Page 8: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Basics

$

jQuery | Dominik Moritz | 23. Mai 2011

Page 9: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Basics

$ $(CSS Selector)$(HTML)$(DOM element)

jQuery | Dominik Moritz | 23. Mai 2011

Page 10: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('')$('table')$('tr')$('h2')$('.parh')$('#assembly')

Page 11: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Actions

$(expression).action()

jQuery | Dominik Moritz | 23. Mai 2011

Page 12: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Traversing

•  .children()

•  .children(expression)

•  .parent()

•  .parent(expression)

•  .find(expression)

•  .filter(expression)

•  .filter(function)

•  .eq(index)

•  .not(expression)

•  .add(expression)

•  .next() .prev()

•  .nextAll() prevAll()

•  .slice(start, end)

•  .siblings()

•  .end()

jQuery | Dominik Moritz | 23. Mai 2011

Page 13: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('#assembly').next() .children()$('#c').prevAll()$('p').first()$('p').filter('.parh')

Page 14: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Manipulation

•  .html(val)

•  .text(val)

•  .append(content)

•  .appendTo(expression)

•  .appendTo(jQuery object)

•  .prependTo(expression)

•  .prependTo(jQuery object)

•  .after(content)

•  .before()

•  .wrap(html)

•  .wrapAll(html)

•  .empty()

•  .remove()

•  .remove(expression)

jQuery | Dominik Moritz | 23. Mai 2011

Page 15: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('p').first().html('This paragraph is <string>awesome</strong>')$('p').first().text('This paragraph is <string>awesome</strong>')$('body').children().wrapAll('<div id="wrapper">')

Page 16: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Selectors

•  #id

•  .class

•  elementType

•  :first

•  :last

•  :not(expression)

•  parent > child

•  :eq

•  :even

•  :odd

•  :has(expression)

•  :empty

•  :hidden

•  :visible

•  [attribute]

•  [attribute=value]

•  [attribute!=value]

•  [attribute*=value]

jQuery | Dominik Moritz | 23. Mai 2011

Page 17: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('p').first() == $('p:first') $('tbody>tr:first')$('tr:odd')$('a:not([href*="jquery.com"])')

Page 18: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Attributes & CSS

•  .attr(name, value)

•  .attr(property)

•  .removeAttr(name)

•  .val(val)

•  .prop(property)

•  .css(name, value)

•  .addClass()

•  .removeClass()

jQuery | Dominik Moritz | 23. Mai 2011

Page 19: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('a:last').attr('href')$('tr:odd').css('background-color','red')$('#c td').eq('2').css({backgroundColor:'red',color:'orange'})

Page 20: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Misc

•  .html()

•  .text()

•  .val()

•  .attr(name)

•  .css(name)

•  .width()

•  .height()

•  .position()

•  .offset()

•  .is(expression)

•  .has()

jQuery | Dominik Moritz | 23. Mai 2011

Page 21: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('table').html() .text()$('p:first').offset().left()

Page 22: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Chaining – write less

$(expression).action1().action2();

jQuery | Dominik Moritz | 23. Mai 2011

Page 23: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('#assembly > th').text('assembly').parent().css('background-color','purple').end().append('nice')

Page 24: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Binding

document. document.getElementsByTagName(‘button’)[0].onclick = function(event) {

alert(‘Hello World!’);}jQuery like

$(‘button’).bind(‘click’,function(){alert(‘Hello World!’);

});Shortcut

$(‘button’).click(function(){alert(‘Hello World!’);

});jQuery | Dominik Moritz | 23. Mai 2011

Page 25: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Events

•  click

•  mouseover

•  mouseout

•  mouseenter

•  mouseleave

•  mousemove

•  hover

•  blur

•  change

•  select

•  dblcklick

•  focus

•  keydown

•  keyup

•  scroll

•  resize

•  load

•  ready

jQuery | Dominik Moritz | 23. Mai 2011

Page 26: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('#assembly').bind('mouseenter',function(){$(this).css('background-color','orange'); })$('tr').bind('mouseenter',function(){$(this).css('background-color','orange'); })$('tr').bind('mouseenter',function(){$(this).css('background-color','orange'); }).bind('mouseleave',function(){$(this).css('background-color','white'); })

Page 27: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Effects

$(expression).function();$(expression).function(speed);$(expression).function(speed, callback);

jQuery | Dominik Moritz | 23. Mai 2011

Page 28: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Callbacks

$(‘a’).hide(slow);alert(“fertig”);

Besser:

$(‘a’).hide(slow,function() {alert(“fertig”);

})

jQuery | Dominik Moritz | 23. Mai 2011

Page 29: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$ Effects

•  show

•  hide

•  toggle

•  slideUp

•  slideDown

•  slideToggle

•  fadeIn

•  fadeOut

•  fadeTo

•  highlight

jQuery | Dominik Moritz | 23. Mai 2011

Page 30: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('p:first').hide()$('p:nth(2)').hide('slow')$('p:nth(3)').slideToggle('slow')$('table').fadeOut(2000)$('td').add('th').mouseenter(function(){$(this).fadeOut()})

Page 31: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

mehr Effekte

.animate(properties, speed, easing, callback)

jQuery | Dominik Moritz | 23. Mai 2011

Page 32: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('p:first').css({position:'absolute', top:$('p:first').position().top, left:$('p:first').position().left}).animate({top:600, left:200},4000,'linear',function(){alert("I'm done");})

Page 33: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Ajax

$(selector).load(url, data, callback);$.post(url, data, callback)$.get(url, data, callback)$.getJSON(url, data, callback)$.ajax(url, options)

jQuery | Dominik Moritz | 23. Mai 2011

Page 34: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

$.ajax options

•  data

•  type (POST | GET)

•  dataType (xml | html | script | json | jsonp| text)

•  error

•  cache

•  …

jQuery | Dominik Moritz | 23. Mai 2011

Page 35: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Ajax events

jQuery | Dominik Moritz | 23. Mai 2011

global

•  ajaxStart

•  ajaxSend

•  ajaxSuccess

•  ajaxError

local

$ajax({ eventName: function() { ... }})

•  beforeSend

•  success

•  error

•  complete

Page 36: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo! $('p:first').load('data.txt', {}, function() { alert('done'); })$('table').load('data.txt')$('table').load('data.txt').css('background-color','blue')$.ajax({ url:'data.json', dataType:'JSON', type:'GET', success:function(data){ items = data.menu.items $('p:first').html(''); for (i in items) { $('p:first').append(items[i].id).append('<br>'); } }})$('#loader').ajaxStart(function() {$(this).fadeIn(200)}).ajaxSuccess(function(){$(this).fadeOut(2000)})

Page 37: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Fragen?

Page 38: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Plugins – do more

•  erweitert jQuery.fn

(function( $ ){ $.fn.myPlugin = function() { this.each(function(){ // Do your awesome plugin stuff here } }; })( jQuery );

jQuery | Dominik Moritz | 23. Mai 2011

Page 39: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

jQuery | Dominik Moritz | 23. Mai 2011

Demo!

$('#liste').zipper()

Page 40: jQuery Basics E · Agenda! • jQuery Basics! • Actions! • Selectors! • Events! • Effects! • Ajax! • Plugins! • Tipps und warum jQuery so toll ist!

Praktische Tipps/ Referenzen

•  jQuery mit anderen Bibliotheken

(function($) { // awesome jQuery goes here})(jQuery);•  Teilweise ist jQuery nicht rückwärtskompatibel

•  Bei Animationen Callbacks benutzen

•  die jQuery Doku ist klasse!

•  http://docs.jquery.com/

•  http://api.jquery.com/

•  http://www.youtube.com/watch?v=8mwKq7_JlS8

jQuery | Dominik Moritz | 23. Mai 2011