jQuery - AJAX

Theodosis Sourgkounis

Introduction

What's for today?

jQuery

Including jQuery

<script type="text/javascript" src="jquery.js"></script>

Including jQuery

Minification

DOM

DOM (Document Object Model)

DOM & jQuery

Το αντικείμενο $

jQuery Selectors

jQuery Selectors

jQuery selection results

jQuery selection results

var a = $( 'div' );
alert( 'Υπάρχουν ' + a.length + ' divs στη σελίδα' );

jQuery → DOM

jQuery ← DOM

function css()

css( property );

Επιστρέφει την css ιδιότητα του πρώτου στοιχείου

<p style="color: red;">Foo</p>
<p style="color: blue;">Bar</p>

<script type="text/javascript">
    var foo = $( 'p' );
    var color = foo.css( 'color' );
    // color: red;
</script>

css( property, value );

Ορίζει σε κάθε στοιχείο του αντικειμένου jQuery τη CSS ιδιότητα 'property' με τιμή 'value'.

πχ: Όλες οι παράγραφοι να έχουν πράσινα γράμματα

var foo = $( 'p' );
foo.css( 'color', 'green' );

css( object );

function show()

function show( duration );

function hide()

function hide( duration );

function toggle();

function fadeIn( duration );

function fadeOut( duration )

function text();

<p>Hello</p>
<p> world!</p>

var text = $( 'p' ).text();
// text: Hello world!

function text( text );

<p><strong>Hello</strong></p>
<p> world!</p>


Hello
world!


$( 'p' ).text( '<em>jQuery rocks!</em>' );

function html();

<p><strong>Hello</strong></p>
<p> world!</p>

var html = $( 'p' ).html();
// html: '<strong>Hello</strong>'

function html( html );

<p><strong>Hello</strong></p>
<p> world!</p>


Hello
world!


$( 'p' ).html( '<em>jQuery rocks!</em>' );

function val();

<input type="text" name="username" id="username" />

var value = $( '#username' ).val();

function val( value );

<input type="text" name="username" id="username" />

$( '#username' ).val( 'John' );

class juggling

function hasClass( string );

<p class="foo bar"></p>
<p class="bar second"></p>

var a = $( 'p' ).hasClass( 'bar foo' );
var b = $( 'p.second' ).hasClass( 'bar' );
var c = $( 'p.second' ).hasClass( 'bar first' );
// a: true
// b: true
// c: false

function attr( property );

<img src="foo.jpg" alt="Delicious waffle">

var description = $( 'img' ).attr( 'alt' );

function attr( property, value );

<img src="foo.jpg" alt="Delicious waffle">

var photo = $( 'img' );
$( 'img' ).attr( 'title', photo.attr( 'alt' ) );

Events

Events - Basic Syntax

click!

Πυροδοτείται όταν γίνεται κλικ σε κάποιο στοιχείο από το ποντίκι

<span id="button">Εμφάνιση</span>
<p id="content" style="display: none">Whatever</p>

$( '#button' ).click( function(){
    $( '#content' ).show( 'fast' );
} );

Εμφάνιση

Document Traversing

Descendants

Siblings

Ancestors

Filter

Chaining jQuery execution

Οι περισσότερες συναρτήσεις εκτελούνται σε αντικείμενο jQuery και επιστρέφουν αντικείμενο jQuery

Αυτό σημαίνει οτι μπορούμε να εκτελούμε τις συναρτήσεις αυτές, τη μια μετά την άλλη:

<ul>
    <li class="first">first</li>
    <li class="second">second</li>
</ul>

$( 'li' ).hide()
    .filter( '.first' ).show()
    .parent().css( 'background': 'red' );

manipulating elements with jQuery

Data representation - XML

<product id="122">
    <name>Nutella</name>
    <type>Chocolate spread</type>
    <origin>Italy</origin>
    <ingredients>
        <ingredient>sugar</ingredient>
        <ingredient>vegetable oils</ingredient>
        <ingredient>hazelnut</ingredient>
        <ingredient>cocoa solids</ingredient>
        <ingredient>skimmed milk</ingredient>
    </ingredients>
</product>

Data representation - JSON

{
    "id": 122,
    "name": "nutella",
    "type": "Chocolate spread",
    "origin": "Italy",
    "ingredients": [ 
        "sugar",
        "vegetable",
        "oils",
        "hazelnut",
        "cocoa solids",
        "skimmed milk"
    ]
}

Asynchronous Javascript And XML (AJAX)

Pros & Cons

AJAX - examples

AJAX & jQuery

$.get( address, data, callback );

$.get( address, data, callback );

<h2>Dynamic Paragraph</h2>
<p id="dyn"></p>

$.get( 'data.html', {
    "local": "true"
}, function( data ){
    $( '#dyn' ).html( data );
} );

data.html:
Hey <strong>there</strong>!

$.post( address, data, callback );

<h2>Dynamic Save</h2>

$.post( 'data.html', {
    text: 'Hello!'
}, function( data ){
    alert( 'Post was saved!' );
} );

data.html:
Hey <strong>there</strong>!

Next Time