jQuery
Manipulacja DOM

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript PHP Ruby on Rails twitter-bootstrap
Szukaj…


Tworzenie elementów DOM

Funkcja jQuery (zwykle aliasowana jako $ ) może być używana zarówno do wybierania elementów, jak i tworzenia nowych elementów. 

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

Opcjonalnie możesz przekazać drugi argument z atrybutami elementu: 

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

'<a>' -> Pierwszy argument określa typ elementu DOM, który chcesz utworzyć. W tym przykładzie jest to kotwica, ale może być czymkolwiek na tej liście . Patrz specyfikacja dla odniesienia a elementu.

{ 'href': 'http://stackexchange.com' } -> drugim argumentem jest obiekt JavaScript zawierający pary nazwa / wartość atrybutu.

pary „nazwa”: „wartość” pojawią się między < > pierwszego argumentu, na przykład <a name:value> który w naszym przykładzie byłby <a href="http://stackexchange.com"></a>

Manipulowanie klasami elementów

Zakładając, że strona zawiera element HTML, taki jak: 

<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 zapewnia przydatne funkcje do manipulowania klasami DOM, w szczególności hasClass() , addClass() , removeClass() i toggleClass() . Te funkcje bezpośrednio modyfikują atrybut class dopasowanych elementów. 

$('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');

Przełącz klasę

Biorąc pod uwagę przykładowy znacznik, możemy dodać klasę za pomocą naszego pierwszego .toggleClass() : 

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

Teraz $(".small-paragraph").hasClass("pretty") to wartość true : $(".small-paragraph").hasClass("pretty")

toggleClass zapewnia ten sam efekt z mniejszym kodem jak: 

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

przełącz Dwie klasy: 

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

Boolean, aby dodać / usunąć klasy: 

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

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

Funkcja przełączania klas (patrz przykład poniżej, aby uniknąć problemu) 

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

Używane w przykładach: 

// 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

Przykłady:

Użyj indeksu elementu, aby przełączyć klasy nieparzyste / parzyste 

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

Bardziej złożony przykład toggleClass z prostym znacznikiem siatki 

<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>

Proste funkcje dla naszych przykładów: 

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

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

Dodaj nieparzystą / parzystą klasę do elementów z klasą gridrow 

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

Jeśli wiersz ma klasę gridfooter , usuń klasy nieparzyste / parzyste, zachowaj resztę. 

$("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);

Zajmowane są klasy, które są zwracane. Tutaj, jeśli element nie ma gridfooter , dodaj klasę dla parzystych / nieparzystych. Ten przykład ilustruje powrót listy OLD klas. Jeśli to else return oldClasses; jest usuwany, dodawane są tylko nowe klasy, dlatego wiersz z klasą gridfooter wszystkie klasy, gdybyśmy nie zwrócili tych starych - w przeciwnym razie zostałyby przełączone (usunięte). 

$("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);

Inne metody API

jQuery oferuje wiele metod, które można wykorzystać do manipulacji DOM.

Pierwsza to metoda .empty () .

Wyobraź sobie następujące znaczniki: 

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

Dzwoniąc do $('#content').empty(); , wewnętrzny div zostałby usunięty. Można to również osiągnąć za pomocą $('#content').html(''); .

Inną przydatną funkcją jest funkcja .closest () : 

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

Jeśli chcesz znaleźć najbliższy wiersz do przycisku klikniętego w jednej z komórek wiersza, możesz to zrobić: 

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

Ponieważ prawdopodobnie będzie wiele wierszy, każdy z własnymi przyciskami delete , używamy $(this) w funkcji .click (), aby ograniczyć zakres do przycisku, który faktycznie kliknęliśmy.

Jeśli chcesz uzyskać id wiersza zawierającego kliknięty przycisk Delete , możesz zrobić coś takiego: 

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

Zazwyczaj uważa się za dobrą praktykę prefiksowanie zmiennych zawierających obiekty jQuery znakiem $ (znak dolara) w celu wyjaśnienia, czym jest zmienna.

Alternatywą dla .closest() jest metoda .parents () : 

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

jest też funkcja .parent () : 

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

.parent() idzie tylko o jeden poziom wyżej w drzewie DOM więc jest dość sztywne, jeśli były, aby zmienić przycisk Usuń, aby znajdować się w span , na przykład, to selektor jQuery będzie złamana.

.html ()

Możesz użyć tej metody, aby zastąpić cały HTML w selektorze. Zakładając, że masz taki element HTML 

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

Możesz użyć .html() . aby usunąć i dodać alert lub tekst informacyjny, aby ostrzec wszystkich użytkowników za pomocą jednej linii. 

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

Sortowanie elementów

Aby wydajnie sortować elementy (wszystkie jednocześnie i przy minimalnym zakłóceniu DOM), musimy:

  1. Znajdź elementy
  2. Sortuj według ustalonego warunku
  3. Wstaw z powrotem do DOM 
<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

  1. Znajdź je - .children() lub .find()

    To da nam do odtworzenia obiekt podobny do tablicy. 

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

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

  2. Array.prototype.sort() ich rozmieszczenie - Array.prototype.sort()

    Jest to obecnie skonfigurowane, aby zwracać elementy w porządku rosnącym na podstawie treści HTML (czyli ich kolorów). 

    /**
 * 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;
});

  3. Wstaw je - .append()

    Pamiętaj, że nie musimy najpierw odłączać elementów - append() przenosi elementy, które już istnieją w DOM, więc nie będziemy mieć dodatkowych kopii 

    // Put it right back where we got it
$myColorList.append($colors);

Zrób to uroczo

Dodaj przycisk sortowania 

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

Ustaw początkową wartość kierunku sortowania 

var ascending = true;

Buforuj nasze elementy DOM i sortList() tutaj, aby zminimalizować nasze przetwarzanie DOM 

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

Zawiń wszystko w funkcję doSort() 

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

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

    $myColorList.append($colors);
};

Dodaj moduł obsługi kliknięć dla $('#btn-sort') 

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

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

Teraz wszyscy razem 

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;
});

Premia

Sortowanie wielopoziomowe (grupowanie posortowanych elementów) 

// ...

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);
};

// ...

Czy możesz pójść o krok dalej?

Dodaj kolejny przycisk, aby przełączyć wyłączone sortowanie grup

MDN - Array.prototype.sort ()



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow