1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
<script>
head.js( "http://danielhagnoul.developpez.com/lib/raphael-min.js",
"http://code.jquery.com/jquery-2.0.0b1.js",
"http://code.jquery.com/jquery-migrate-1.0.0.js",
"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
"http://danielhagnoul.developpez.com/lib/dvjh/base.js" );
</script>
<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
<style>
.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
.ligne { display: table-row; }
.caption { display: table-caption; text-align: center; }
.table1 .ligne { min-height: 30rem; }
.table1 article { min-width: 40rem; vertical-align: top; }
/* TEST */ /* Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
div {
background-color: #56224f;
color: white;
font-weight: bold;
width: 10rem;
height: 10rem;
margin: 1.2rem;
padding: 0.6rem;
}
.current_hand { opacity : 0.5; }
</style>
</head>
<body>
<header>
<hgroup>
<h1>Forum jQuery</h1>
<h2>
<a href="http://www.developpez.net/forums/d1302469/webmasters-developpement-web/\
javascript/bibliotheques-frameworks/jquery/comprehension-code/">Lien</a>
</h2>
</hgroup>
</header>
<section class="conteneur">
<section class="table1">
<section class="caption">
<h3>Jouons avec des divisions</h3>
</section>
<section class="ligne">
<article>
<div>Salut tout le monde !</div>
<div>Salut tout le monde !</div>
<div>Salut tout le monde !</div>
</article>
<article>
<div>Salut tout le monde !</div>
<div>Salut tout le monde !</div>
<div>Salut tout le monde !</div>
</article>
</section>
</section>
</section>
<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
<span itemprop="name">Daniel Hagnoul</span>
<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
</footer>
<script>
"use strict";
// Pourquoi head au lieu de $ ? Voir : http://headjs.com/
head( function(){
/*
* Je préconise une écriture moins concise, mais plus explicite.
*
* jObjDivs est un objet jQuery qui peut être manipulé comme un tableau
* d'objet jQuery, chaque objet jQuery encapsulant une division du DOM.
*/
var jObjDivs = $( "div" ).css( "border-radius", "10px 0px 0px 10px" );
/*
* jObjDivs.eq( 2 ) étant le troisième (indice de 0 à n) objet jQuery.
*/
jObjDivs.eq( 2 ).text( "Hello everybody !" );
/*
* jObjDivs.eq( 2 ).get( 0 ) ou jObjDivs.eq( 2 )[ 0 ] étant la division
* contenue dans cet objet jQuery.
*
* On modifie l'attribut title de la division
*/
jObjDivs.eq( 2 )[ 0 ].title = "Bonjour !";
/*
* On ajoute la classe "current_hand" à la troisième division et l'on
* déplace cette division en dernière position dans le dernier tag
* "article".
*/
jObjDivs.eq( 2 ).addClass( "current_hand" ).appendTo( "article:last" );
/*
* On crée une nouvelle image et on l'ajoute au début (prepend) de
* la deuxième division.
*/
$("<img/>", {
"src" : "http://danielhagnoul.developpez.com/images/avatarDVJH.jpg",
"css" : {
"width" : "5rem",
"height" : "5rem",
"margin" : "0.6rem"
}
}).prependTo( jObjDivs.eq( 1 ) );
});
</script>
</body>
</html> |
Compréhension de code
Répondre avec citation
Partager