spotkanie 4.3

Rozważmy kod

<ul>
    <li>
        <span>
            <i>Foo</i>
        </span>
    </li>
    <li>Bar</li>
</ul>

Kolejne filtrowanie elementów

var listItems = $( 'li' );

// filter the selection to only items with a class of 'special'
var special = listItems.filter( '.special' );

// filter the selection to only items without a class of 'special'
var notSpecial = listItems.not( '.special' );

// filter the selection to only items that contain a span
var hasSpans = listItems.has( 'span' );

i znowu

// get the first list item on the page
var listItem = $( 'li' ).first(); // also: .last()

// get the siblings of the list item
var siblings = listItem.siblings();

// get the next sibling of the list item
var nextSibling = listItem.next(); // also: .prev()

// get the list item's parent
var list = listItem.parent();

// get the list items that are immediate children of the list
var listItems = list.children();

// get ALL list items in the list, including nested ones
var allListItems = list.find( 'li' );

// find all ancestors of the list item that have a class of "module"
var modules = listItem.parents( '.module' );

// find the closest ancestor of the list item that has a class of "module"
var module = listItem.closest( '.module' );

Kopiowanie elementów

link

var clones = $( 'li' ).clone();

clones.html(function( index, oldHtml ) {
  return oldHtml + '!!!';
});

$( '#my-unordered-list' ).append( clones );

Usuwanie elementów

Events

$( 'li' ).click(function( event ) {
  console.log( 'clicked', $( this ).text() );
});
Native Event Name Shorthand Method
click .click()
keydown .keydown()
keypress .keypress()
keyup .keyup()
mouseover .mouseover()
mouseout .mouseout()
mouseenter .mouseenter()
mouseleave .mouseleave()
scroll .scroll()
focus .focus()
blur .blur()
resize .resize()

Obiekt event

$( document ).on( 'click', function( event ) {
  console.log( event.type );    // The event type, eg. "click"
  console.log( event.which );   // The button or key that was pressed.
  console.log( event.target );  // The originating element.
  console.log( event.pageX );   // The document mouse X coordinate.
  console.log( event.pageY );   // The document mouse Y coordinate.
});

Zapobieganie eventom

$( 'a' ).on( 'click', function( event ) {
  // Prevent the default action.
  event.preventDefault();
  // Log stuff.
  console.log( 'I was just clicked!' );
});

Zadania

Zadanie 0.1

Proszę zapoznać się z przykładem https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

Zadanie 0.2

Proszę wykorzystując ten kod zprawić aby po najechaniu myszą na dany element dodawany był do niego cień (w css chodzi o artybyt shadow).

Zadanie 1

Napisz skrypt który będzie usuwał elementy listy po kliknięciu na nie.

Zadanie 2

Napisz skrypt który będzie dodawał kopie klikniętego elementu na koniec listy.

Zadanie 3

Napisz napisz program który uruchomi animację po kliknięciu na element.

Zadanie 4 

Pobierz i uruchom bibliotekę https://datatables.net

Zadanie 5

Skonfiguruj datables tak, aby domyślnie wyswietlane były wszystkie wyniki bez paginacji.