1. Différence entre .html() et .text()
2. Différence entre .remove() et .empty() pour la suppression d'éléments
3. Parcours du DOM

1. Différence entre .html() et .text()

---

La méthode .html() récupère tout le contenu à l'intérieur d'un élément, y compris les balises HTML.
La méthode .text() récupère uniquement le texte brut sans les balises.

Exemple de structure HTML :

<div class="message">
    Vieux arbres et crows
    <span class="poem">Pont et maison</span>
</div>

Code JavaScript :

$(function(){
    console.log($('.message').html());
    console.log($('.message').text());
})

Résultat affiché dans la console :

2. Différence entre .remove() et .empty() pour la suppression d'éléments

---

La méthode .remove() supprime l'élément sélectionné ainsi que tous ses éléments enfants.
La méthode .empty() supprime uniquement les enfants de l'élément sélectionné, en conservant l'élément parent.

Il est également possible de supprimer des éléments frères spécifiques en utilisant un filtre. Exemple :

Structure HTML :

<div class="container">
    <p class="item">001</p>
    <p>002</p>
    <p>003</p>
</div>

Code JavaScript :

$('.container p').remove('.item');

Résultat visuel dans le navigateur :

Note : Le filtre ne peut supprimer que les éléments au même niveau hiérarchique. Par exemple, $('.container').remove('.item') n'aura aucun effet.

3. Parcours du DOM

---

3.1 Ancêtres

.parent() : Retourne le parent direct de l'élément sélectionné.

3.2 Descendants

.children() : Retourne tous les enfants directs de l'élément sélectinoné.

$('div').find('span') : Retourne tous les éléments <span> qui sont des descendants de <div>.

3.3 Éléments frères

.siblings() : Retourne tous les éléments frères de l'élément sélectionné. Il est possible d'ajouter un filtre comme .siblings('p').

Application pratique la plus courante - Effet de sélection de boutons :

CSS :

<style type="text/css">
    .buttonContainer{
        width: 540px;
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .buttonContainer .btn{
        height: 60px;
        width: 130px;
        background-color: darkseagreen;
        color: aliceblue;
        line-height: 60px;
        text-align: center;
        border-radius: 10px;
    }
    .buttonContainer .btn:hover{
        background-color: gainsboro;
        color: black;
    }
    .buttonContainer .active{
        background-color: green;
    }
</style>

HTML :

<section>
    <div class="buttonContainer">
        <div class="btn">Bouton 1</div>
        <div class="btn">Bouton 2</div>
        <div class="btn">Bouton 3</div>
        <div class="btn">Bouton 4</div>
    </div>
</section>

JavaScript :

$('.buttonContainer .btn').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
    let index = $('.buttonContainer .btn').index(this);
})

.next() : Retourne le frère suivant de l'élément sélectionné.

.nextAll() : Retourne tous les frères situés après l'élément sélectionné.

.nextUntil() : Retourne tous les frères situés entre deux éléments spécifiés.

Exemple : $('h2').nextUntil('h6')

Note : Les méthodes .prev(), .prevAll() et .prevUntil() fonctionnent de manière similaire mais pour les éléments précédents.

Récupérer la valeur des éléments de formulaire

Obtenir la valeur sélectionnée d'un groupe radio

HTML :

<div class="fruits">
    <input type="radio" name="fruit" id="apple" value="apple" />
    <label for="apple">Pomme</label>
    <input type="radio" name="fruit" id="banana" value="banana" />
    <label for="banana">Banane</label>
</div>

JavaScript - Trois méthodes possibles :

// Méthode 1
let selectedFruit = $(".fruits input[type='radio']:checked").val();
console.log(selectedFruit);

// Méthode 2
let selectedFruit2 = $(".fruits :radio:checked").val();
console.log(selectedFruit2);

// Méthode 3
let selectedFruit3 = $(".fruits input[name='fruit']:checked").val();

Obtenir les valeurs cochées d'un groupe checkbox

Méthode avec $.each() :

HTML :
<div class="foods">
    <input type="checkbox" name="food" id="milk" value="milk" />
    <label for="milk">Lait</label>
    <input type="checkbox" name="food" id="egg" value="egg" />
    <label for="egg">Oeuf</label>
    <input type="checkbox" name="food" id="bread" value="bread" />
    <label for="bread">Pain</label>
</div>

JavaScript :
$.each($(".foods:checkbox:checked"), function() {
    console.log($(this).val());
})

Méthode avec tableau :

var checkedValues = [];
$('input[name="food"]:checked').each(function() {
    checkedValues.push($(this).val());
});
var result = checkedValues.join(",");
console.log(result);

Exemple complet avec sélection totale, déselection totale, sélection inverse et sélection des lignes impaires :

HTML :

<input type="checkbox" name="item" value="1"/>Pomme 
<input type="checkbox" name="item" value="2"/>Orange 
<input type="checkbox" name="item" value="3"/>Poire 
<input type="checkbox" name="item" value="4"/>Banane
<br/><br/>
<input type="button" id="selectAll" value="Tout sélectionner"> 
<input type="button" id="deselectAll" value="Tout désélectionner"> 
<input type="button" id="selectOdd" value="Sélectionner impairs"> 
<input type="button" id="invert" value="Inverser"> 
<input type="button" id="getValues" value="Obtenir les valeurs">

JavaScript :

$("#selectAll").on("click", function(){
    $("[name='item']").prop("checked", true);
});

$("#deselectAll").on("click", function(){ 
    $("[name='item']").removeProp("checked");
});

$("#selectOdd").click(function(){ 
    $("[name='item']:even").prop("checked", true);
});

$("#invert").click(function(){ 
    $("[name='item']").each(function(){ 
        this.checked = !this.checked;
    });
});

$("#getValues").click(function(){ 
    var values = [];
    $('input[name="item"]:checked').each(function(){
        values.push($(this).val());
    });
    var result = values.join(",");
    alert(result);
});

Obtenir la valeur sélectionnée d'un élément select

HTML :

<select name="ranking">
    <option value="first" data="a">Première place</option>
    <option value="second" data="b" selected="selected">Deuxième place</option>
    <option value="third" data="c">Troisième place</option>
</select>

JavaScript :

$('option:selected').val();

Pour récupérer l'attribut data lors du changement de sélection :

$('select').change(function(){
    let customData = $(this).find("option:selected").attr('data');
});

Pour sélectionner une option spécifique par sa valeur :

$('select').val('third');

Obtenir un attribut personnalisé depuis une option select

HTML :

<select id="locationSelect">
    <option value="a" customAttr="123">Option Une</option>
    <option value="b" customAttr="456">Option Deux</option>
</select>

JavaScript :

$(function(){ 
    $("#locationSelect").change(function(){ 
        var selectedOption = $(this).find('option:selected'); 
        var customAttr = selectedOption.attr("customAttr"); 
        $('#outputField').val(customAttr); 
    }); 
});