Manipuler des DIV en Javascript – Exercice Tutorial

Comme beaucoup en cours d’étude, j’ai ce matin mis sur pieds ce script qui permet de bien comprendre la manipulation de JavaScript (Ici à travers Jquery).

Le script est bien entendu non exhaustif il existe d’autres possibilités de script tout aussi Amusant.

Imaginons d’abord une paage HTML Simple avec ceux DIV ou sont contenue du Texte.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title> Manipuler Javascript </title>
</head>

<body>

        <div id="container" value="container">
        container0
        </div>

<div id="container1" value="container1">
Container1
</div>

    </body>
    </html>

La manipulation nécessite l’appel à Jquery on insère donc le script depuis la Bibliothèque Google.

Le code générale nous donne donc ceci

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<strong><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></strong>
</head>
<body>
        <div id="container" value="container">
        container0
        </div>
<div id="container1" value="container1">
Container1
</div>

    </body>
    </html>

La but de ce premier code va être de remplacer le contenue d’une DIV à l’affichage, le code ci dessous exécute parfaitement cette mission.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
        <div id="container" value="container">
        container0
        </div>
<div id="container1" value="container1">
Container1
</div>
<strong><script>
$("#container").html('Je change le contenue du DIV');
var moncontenu = $("#container").html();
window.alert(moncontenu);
document.write.(moncontenu);
</script></strong>
    </body>
    </html>

Ce sont ces deux lignes qui sont chargé du changement de contenue d’une DIV, le contenue de la DIV « container » qui est en actuellement container0 sera transformé en « xday ».

Amusez vous à changer la valeur ‘xday’ pour voir le résultat.

1
2
$("#container").html(‘xday’);
var moncontenu = $("#container").html();

Laisser un commentaire

Assemblé dans la station orbitale WordPress