Манипуляция с элементами

и события

Поиск элементов относительно выборки

// Получить первый пункт списка на странице
var listItem = $( 'li' ).first(); // и .last()
  
// Получить родственные элементы этого пункта списка
var siblings = listItem.siblings();
  
// Получить следующего родственника этого пункта списка
var nextSibling = listItem.next(); // и .prev()
  
// Получить родителя этого пункта списка
var list = listItem.parent();

// Получить пункты списка являющихся непосредственными потомками list
var listItems = list.children();

// Получить ВСЕ пункты списка из list, включая вложенные
var allListItems = list.find( 'li' );

// Найти всех предков этого пункта списка с классом module
var modules = listItem.parents( '.module' );

// Найти ближайшего предка этого пункта списка с классом module
var module = listItem.closest( '.module' );

Размещение элементов в документе

var listItem = $( '#my-unordered-list li' ).first();
listItem.appendTo( '#my-unordered-list' )

.appendTo()  - добавление элемента в элемент

var listItem = $( '#my-unordered-list li' ).first();
$( '#my-unordered-list' ).append( listItem );

.append()  - добавление внутрь текущего элемента, другой элемент

var listItems = $( '#my-unordered-list li' );
listItems.first().insertAfter( listItems.last() );

.insertAfter() - вставить элемент после другого элемента

var listItems = $( '#my-unordered-list li' );
listItems.last().after( listItems.first() );

.after()  - вставить после текущего элемента, другой элемент

Есть методы для размещения элементов  вокруг, внутри, снаружи
других элементов, всё зависит от ваших конкретных задач.

Клонирование

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

clones.html(function( index, oldHtml ) {
  return oldHtml + '!!!';
});
  
$( '#my-unordered-list' ).append( clones );

Удаление

var removedListItem = $( '#my-unordered-list li' ).first().remove();

var detachedListItem = $( '#my-unordered-list li' ).first().detach();

var replacedListItem = $( '#my-unordered-list li' ).first()
    .replaceWith( '<li>новое!</li>' );

Есть три способа для удаления элементов из документа: .remove(), .detach() и .replaceWith(). Каждый метод служит конкретной цели.

Создание элемента

// Creating new elements from an HTML string.
$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );

// Creating a new element with an attribute object.
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

// Getting a new element on to the page.
 
var myNewElement = $( "<p>New element</p>" );
 
myNewElement.appendTo( "#content" );
 
myNewElement.insertAfter( "ul:last" ); // This will remove the p from #content!
 
$( "ul" ).last().after( myNewElement.clone() ); // Clone the p so now we have two.

После создания элемента можем его переместить

События

$( 'li' ).click(function( event ) {
  console.log( 'clicked', $( this ).text() );
});

События

Правильное назначение события

$( 'li' ).on( 'click', function( event ) {
  console.log( 'clicked', $( this ).text() );
});

$( 'li' ).trigger( 'click' );

$( 'li' ).click(); //короткий вызов

После того как к элементу «привязали» обработчик событий, вы можете инициировать его через jQuery.

$( 'li' ).off( 'click' );

Событие можно отвязать с помощью метода .off()

Привязка нескольких событий

$( 'input[type="text"]' ).on('focus blur', function() {
  console.log( 'Для поля <input> получен или потерян фокус' );
});
  
$( window ).on( 'resize.foo scroll.bar', function() {
  console.log( 'Окно изменило размеры или прокручено!' );
});

Привязка событий к созданным

элементам в  будущем

    $('.accordion').on('click', 'a', function(e){
        //Какое-то действие
    });

Объект события

$( document ).on( 'click', function( event ) {
  console.log( event.type );    // Тип события, к примеру click
  console.log( event.which );   // Нажатая кнопка или клавиша
  console.log( event.target );  // Источник события
  console.log( event.pageX );   // Координата мыши по оси X
  console.log( event.pageY );   // Координата мыши по оси Y
});

Внутри обработчика событий

$( 'input' ).on( 'keydown', function( event ) {
  // this: Элемент, с которым связан обработчик событий
  // event: Объект события
  
 // Сменить цвет фона элемента <input> при нажатии на backspace 
  // на красный, в противном случае на зелёный
  $( this ).css( 'background', event.which === 8 ? 'red' : 'green' );
});