jQuery => Манипуляция DOM

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

Функция jQuery (обычно псевдоним как $ ) может использоваться как для выбора элементов, так и для создания новых элементов.

var myLink = $('<a href="http://stackexchange.com"></a>');

Вы можете опционально передать второй аргумент с атрибутами элемента:

var myLink = $('<a>', { 'href': 'http://stackexchange.com' });

'<a>' -> Первый аргумент указывает тип элемента DOM, который вы хотите создать. В этом примере это якорь, но может быть что угодно в этом списке . См. Спецификацию для ссылки на элемент a .

{ 'href': 'http://stackexchange.com' } -> второй аргумент - это объект JavaScript, содержащий пары имен / значений атрибутов.

пары «имя»: «значение» будут отображаться между < > первого аргумента, например <a name:value> который для нашего примера будет <a href="http://stackexchange.com"></a>

Манипулирование классами элементов

Предполагая, что страница содержит элемент HTML, такой как:

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery предоставляет полезные функции для управления классами DOM, в частности hasClass() , addClass() , removeClass() и toggleClass() . Эти функции непосредственно изменяют атрибут class согласованных элементов.

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

Переключить класс

Учитывая пример разметки, мы можем добавить класс с нашим первым .toggleClass() :

$(".small-paragraph").toggleClass("pretty");

Теперь это вернет true : $(".small-paragraph").hasClass("pretty")

toggleClass обеспечивает тот же эффект с меньшим кодом как:

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

toggle Два класса:

$(".small-paragraph").toggleClass("pretty cool");

Boolean для добавления / удаления классов:

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

Функция для переключения классов (см. Пример ниже, чтобы избежать проблемы)

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Используется в примерах:

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

Примеры:

Используйте индекс элемента для переключения нечетных / четных классов

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Более сложный пример toggleClass , учитывая простую разметку сетки

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

Простые функции для наших примеров:

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

Добавьте нечетный / четный класс к элементам с классом gridrow

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

Если строка имеет класс gridfooter , удалите нечетные / четные классы, сохраните остальные.

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

Возвращаемые классы - это то, что производится. Здесь, если элемент не имеет gridfooter , добавьте класс для четного / нечетного. Этот пример иллюстрирует возврат списка классов OLD. Если это else return oldClasses; удаляется, добавляются только новые классы, поэтому строка с классом gridfooter будет удалена всеми классами, если бы мы не вернули те старые, которые в противном случае были бы отключены (удалены).

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);

Другие методы API

jQuery предлагает множество методов, которые могут использоваться для манипуляций с DOM.

Первый - это метод .empty () .

Представьте себе следующую разметку:

<div id="content">
  <div>Some text</div>
</div>

Вызов $('#content').empty(); , внутренний div будет удален. Это также может быть достигнуто с помощью $('#content').html(''); ,

Другой удобной функцией является функция .closest () :

<tr id="row_1">
  <td><button type="button" class="delete">Delete</button>
</tr>

Если вы хотите найти ближайшую строку к кнопке, нажатой в одной из ячеек строки, вы можете сделать это:

$('.delete').click(function() {
  $(this).closest('tr');
});

Поскольку, вероятно, будет несколько строк, каждый со своими собственными кнопками delete , мы используем $(this) внутри функции .click (), чтобы ограничить область нажатием кнопки, которую мы нажали.

Если вы хотите получить id строки, содержащей кнопку « Delete , которую вы нажали, вы можете сделать что-то вроде этого:

$('.delete').click(function() {
  var $row = $(this).closest('tr');
  var id = $row.attr('id');
});

Обычно считается хорошей практикой префиксные переменные, содержащие объекты jQuery, с значком $ (доллар), чтобы дать понять, что такое переменная.

Альтернативой .closest() является метод .parents () :

$('.delete').click(function() {
  var $row = $(this).parents('tr');
  var id = $row.attr('id');
});

и есть также функция .parent () :

$('.delete').click(function() {
  var $row = $(this).parent().parent();
  var id = $row.attr('id');
});

.parent() только поднимается на один уровень дерева DOM, поэтому он довольно негибкий, если вы хотите изменить кнопку удаления, которая должна содержаться в пределах span например, селектор jQuery будет разбит.

.html ()

Вы можете использовать этот метод для замены всего HTML в селекторе. Предполагая, что у вас есть элемент html, подобный этому

<div class="row">
    <div class="col-md-12">
        <div id="information">
            <p>Old message</p>
        </div>
    </div>
</div>

Вы можете использовать .html() . удалить и добавить предупреждающий или информационный текст, чтобы предупредить всех пользователей одной строкой.

$("#information").html("<p>This is the new alert!</p>");

Сортировочные элементы

Чтобы эффективно сортировать элементы (все сразу и с минимальным прерыванием DOM), нам необходимо:

Найти элементы
Сортировка на основе заданного условия
Вставить обратно в DOM

<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

Найдите их - .children() или .find()

Это вернет нам объект, похожий на Array.

var $myColorList = $('#my-color-list');

// Elements one layer deep get .children(), any deeper go with .find()
var $colors = $myColorList.children('li');

Array.prototype.sort() их - Array.prototype.sort()

В настоящее время он настроен для возврата элементов в порядке возрастания на основе содержимого HTML (также их цветов).

/**
 * Bind $colors to the sort method so we don't have to travel up
 * all these properties more than once.
 */
var sortList = Array.prototype.sort.bind($colors);

sortList(function ( a, b ) {

    // Cache inner content from the first element (a) and the next sibling (b)
    var aText = a.innerHTML;
    var bText = b.innerHTML;
 
    // Returning -1 will place element `a` before element `b`
    if ( aText < bText ) {
        return -1;
    }

    // Returning 1 will do the opposite
    if ( aText > bText ) {
        return 1;
    }

    // Returning 0 leaves them as-is
    return 0;
});

Вставьте их - .append()
Обратите внимание, что нам не нужно сначала отделять элементы - append() будет перемещать элементы, которые уже существуют в DOM, поэтому у нас не будет дополнительных копий
```
// Put it right back where we got it
$myColorList.append($colors);
```

Сделать это мило

Добавить кнопку сортировки

<!-- previous HTML above -->
<button type='button' id='btn-sort'>
    Sort
</button>

Установите начальное значение направления сортировки

var ascending = true;

`sortList()` наши элементы DOM и `sortList()` здесь, чтобы свести к минимуму нашу обработку DOM

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

Заверните все в функции `doSort()`

// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {

    sortList(function ( a, b ) {
        // ...
    });

    $myColorList.append($colors);
};

Добавить обработчик кликов для `$('#btn-sort')`

$('#btn-sort').on('click', function () {
    // Run the sort and pass in the direction value
    doSort(ascending);

    // Toggle direction and save
    ascending = !ascending;
});

Все вместе сейчас

var ascending = true;

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

var doSort = function ( ascending ) {
    
    sortList(function ( a, b ) {

        var aText = a.innerHTML;
        var bText = b.innerHTML;

        if ( aText < bText ) {
            return ascending ? -1 : 1;
        }

        if ( aText > bText ) {
            return ascending ? 1 : -1;
        }

        return 0;
    });
    
    $myColorList.append($colors);

};

$('#btn-sort').on('click', function () {
    doSort(ascending);
    ascending = !ascending;
});

бонус

Многоуровневая сортировка (группировка отсортированных элементов)

// ...

var doSort = function ( ascending ) {

    sortList(function ( a, b ) {

        // ...initial sorting...

    }).sort(function ( a, b ) {
        
        // We take the returned items and sort them once more
        var aClass = a.className;
        var bClass = b.className;
        
        // Let's group the disabled items together and put them at the end

        /**
         * If the two elements being compared have the same class
         * then there's no need to move anything.
         */
        if ( aClass !== bClass ) {
            return aClass === 'disabled' ? 1 : -1;
        }
        return 0;
    });

    // And finalize with re-insert
    $myColorList.append($colors);
};

// ...

Можете ли вы сделать это еще на один шаг?

Добавить еще одну кнопку для переключения сортировки отключенной группы

MDN - Array.prototype.sort ()

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

jQuery
Манипуляция DOM

Поиск…

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

Манипулирование классами элементов

Другие методы API

.html ()

Сортировочные элементы

Сделать это мило

Добавить кнопку сортировки

Установите начальное значение направления сортировки

`sortList()` наши элементы DOM и `sortList()` здесь, чтобы свести к минимуму нашу обработку DOM

Заверните все в функции `doSort()`

Добавить обработчик кликов для `$('#btn-sort')`

Все вместе сейчас

Многоуровневая сортировка (группировка отсортированных элементов)

Добавить еще одну кнопку для переключения сортировки отключенной группы

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

Манипулирование классами элементов

Другие методы API

.html ()

Сортировочные элементы

Сделать это мило

Добавить кнопку сортировки

Установите начальное значение направления сортировки

sortList() наши элементы DOM и sortList() здесь, чтобы свести к минимуму нашу обработку DOM

Заверните все в функции doSort()

Добавить обработчик кликов для $('#btn-sort')

Все вместе сейчас

Многоуровневая сортировка (группировка отсортированных элементов)

Добавить еще одну кнопку для переключения сортировки отключенной группы

`sortList()` наши элементы DOM и `sortList()` здесь, чтобы свести к минимуму нашу обработку DOM

Заверните все в функции `doSort()`

Добавить обработчик кликов для `$('#btn-sort')`