spotkanie 4.2

Proszę zadania wykonać "w plikach" lub korzystając z https://jsbin.com/vutukuqege/edit

jQuery to lekka biblioteka programistyczna dla języka JavaScript, ułatwiająca korzystanie z JavaScriptu

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    alert("hello world");
});
</script>
</head>
<body>

</body>
</html>

$

jQuery umożliwia dostęp do elementów wykorzystując selektory z CSS

var listItems = jQuery( 'li' );

lub alternatywnie

var listItems = $( 'li' );

$(document).ready()

Aby mieć pewność, że w momencie wywoływania jQuery strona jest na niego gotowa używamy takiej konstrukcji

$( document ).ready(function() {
  console.log( 'ready!' );
});

lub

$(function() {
  console.log( 'ready!' );
});

Wybieranie elementów

Używamy selektorów z CSS

$( '#header' ); // select the element with an ID of 'header'
$( 'li' );      // select all list items on the page
$( 'ul li' );   // select list items that are in unordered lists
$( '.person' ); // select all elements with a class of 'person'

Czy mój selektor wybrał co kolwiek?

Sprawdzamy to tak

if ( $( '#nonexistent' ) ) {
  // Źle! Ten fragment zawsze się wykona!
}

if ( $( '#nonexistent' ).length > 0 ) {
  // Poprawnie
}

Wybieranie pojedynczego elementu po selekcji

var listItems = $( 'li' );
var rawListItem = listItems[0]; // or listItems.get( 0 )
var html = rawListItem.innerHTML;

Tworzenie nowych elementów

Jeśli do $() wrzucimy kod HTML to powstanie nowy obiekt

$( '<p>' ); // creates a new element with no content 
$( '<p>Hello!</p>' ); // creates a new element with content 
$( '<p class="greet">Hello!</p>' ); // creates a new with content and class

Któremu możemy też ustawić własności

$( '<p>', {
  html: 'Hello!',
  'class': 'greet'
});

Ustawianie wartości

Np. tak

$( 'li' ).html( 'New HTML' );

Iterowanie po elementach

$( 'li' ).each(function( index, elem ) {
  // this: the current, raw DOM element
  // index: the current element's index in the selection
  // elem: the current, raw DOM element (same as this)
  $( elem ).prepend( '<b>' + index + ': </b>' );
});

Łańcuch

Nie musimy poprzestawać na jednej operacji, może być ich wiele

$( 'li' )
  .click(function() {
    $( this ).addClass( 'clicked' );
  })
  .find( 'span' )
    .attr( 'title', 'Hover over me' );

lub coś ciekawszego

var listItems = $( 'li' );

listItems
  .click(function() {
    $( this ).addClass( 'clicked' );
  });

Zadania

Zadanie 1

Napisz kod którym dla wszystkich linków usuniesz ich domyślne formatowanie.

Zadanie 2

Napisz kod, który ustawi nową klasę dla wszyskich elementów typu li.

Zadanie 3

Napisz metodę w momecie kliknięcia na dany element zwiekszy jego czcionkę.