You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: libro/html/index.html
+6-7Lines changed: 6 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -3108,7 +3108,7 @@ <h2><a href="#TOC"><span class="header-section-number">9.4</span> Cuidado con la
3108
3108
</div>
3109
3109
<divid="optimización-de-selectores">
3110
3110
<h2><ahref="#TOC"><spanclass="header-section-number">9.5</span> Optimización de Selectores</a></h2>
3111
-
<p>La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de<code>document.querySelectorAll()</code>, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.</p>
3111
+
<p>La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de<code>document.querySelectorAll()</code>, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.</p>
3112
3112
<divid="selectores-basados-en-id">
3113
3113
<h3><ahref="#TOC"><spanclass="header-section-number">9.5.1</span> Selectores basados en ID</a></h3>
3114
3114
<p>Siempre es mejor comenzar las selecciones con un ID.</p>
@@ -3122,15 +3122,14 @@ <h3><a href="#TOC"><span class="header-section-number">9.5.1</span> Selectores b
<p>Trate de ser especifico para el lado derecho de la selección y menosespecifico para el izquierdo.</p>
3125
+
<p>Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.</p>
3126
3126
<preclass="brush: js"><code>// no optimizado
3127
3127
$('div.data .gonzalez');
3128
3128
3129
3129
// optimizado
3130
3130
$('.data td.gonzalez');
3131
3131
</code></pre>
3132
-
<p>Use en lo posible <code>etiqueta.clase</code> del lado derecho de la selección, ysolo <code>etiqueta</code> o <code>.clase</code> en la parte izquierda.</p>
3133
-
<p>Evite especificidad excesiva.</p>
3132
+
<p>Use en lo posible <code>etiqueta.clase</code> del lado derecho de la selección, y solo <code>etiqueta</code> o <code>.clase</code> en la parte izquierda.</p>
<h3><ahref="#TOC"><spanclass="header-section-number">9.5.3</span> Evitar el Selector Universal</a></h3>
3143
-
<p>Selecciones en donde se especifica de forma implícita o explicita unaselección universal puede resultar muy lento.</p>
3142
+
<p>Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.</p>
3144
3143
<preclass="brush: js"><code>$('.buttons > *'); // muy lento
3145
3144
$('.buttons').children(); // mucho mejor
3146
3145
@@ -3152,7 +3151,7 @@ <h3><a href="#TOC"><span class="header-section-number">9.5.3</span> Evitar el Se
3152
3151
</div>
3153
3152
<divid="utilizar-la-delegación-de-eventos">
3154
3153
<h2><ahref="#TOC"><spanclass="header-section-number">9.6</span> Utilizar la Delegación de Eventos</a></h2>
3155
-
<p>La delegación de eventos permite vincular un controlador de evento a unelemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQuery realiza este trabajo fácil a través de <code>$.fn.live</code> y<code>$.fn.delegate</code>. En lo posible, es recomendable utilizar <spanclass="math">$.fn.delegateen lugar de `$</span>.fn.live`, ya que elimina la necesidad de una selección ysu contexto explicito reduce la carga en aproximadamente un 80%.</p>
3154
+
<p>La delegación de eventos permite vincular un controlador de evento a un elemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQuery hace fácil este trabajo a través de <code>$.fn.live</code> y<code>$.fn.delegate</code>. En lo posible, es recomendable utilizar <code>$.fn.delegate</code> en lugar de <code>$.fn.live</code>, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.</p>
3156
3155
<p>Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.</p>
3157
3156
<preclass="brush: js"><code>// mal (si existen muchos items en la lista)
<h2><ahref="#TOC"><spanclass="header-section-number">9.10</span> No Actuar en Elementos no Existentes</a></h2>
3200
3199
<p>jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.</p>
3201
-
<preclass="brush: js"><code>// MAL: el codigo a continuación ejecuta tres funciones
3200
+
<preclass="brush: js"><code>// MAL: el código a continuación ejecuta tres funciones
La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de`document.querySelectorAll()`, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.
122
+
La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de`document.querySelectorAll()`, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.
123
123
124
124
125
125
@@ -141,7 +141,7 @@ El ejemplo que utiliza `$.fn.find` es más rápido debido a que la primera selec
141
141
142
142
### Especificidad
143
143
144
-
Trate de ser especifico para el lado derecho de la selección y menosespecifico para el izquierdo.
144
+
Trate de ser especifico para el lado derecho de la selección y menos específico para el izquierdo.
145
145
146
146
~~~~{.brush: .js}
147
147
// no optimizado
@@ -151,9 +151,7 @@ $('div.data .gonzalez');
151
151
$('.data td.gonzalez');
152
152
~~~~
153
153
154
-
Use en lo posible `etiqueta.clase` del lado derecho de la selección, ysolo `etiqueta` o `.clase` en la parte izquierda.
155
-
156
-
Evite especificidad excesiva.
154
+
Use en lo posible `etiqueta.clase` del lado derecho de la selección, y solo `etiqueta` o `.clase` en la parte izquierda.
157
155
158
156
~~~~{.brush: .js}
159
157
$('.data table.attendees td.gonzalez');
@@ -168,7 +166,7 @@ La segunda selección tiene mejor rendimiento debido a que atraviesa menos capas
168
166
169
167
### Evitar el Selector Universal
170
168
171
-
Selecciones en donde se especifica de forma implícita o explicita unaselección universal puede resultar muy lento.
169
+
Selecciones en donde se especifica de forma implícita o explícita una selección universal puede resultar muy lento.
172
170
173
171
~~~~{.brush: .js}
174
172
$('.buttons > *'); // muy lento
@@ -183,7 +181,7 @@ $('.gender input:radio'); // mucho mejor
183
181
184
182
## Utilizar la Delegación de Eventos
185
183
186
-
La delegación de eventos permite vincular un controlador de evento a unelemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQuery realiza este trabajo fácil a través de `$.fn.live` y`$.fn.delegate`. En lo posible, es recomendable utilizar $.fn.delegateen lugar de `$.fn.live`, ya que elimina la necesidad de una selección ysu contexto explicito reduce la carga en aproximadamente un 80%.
184
+
La delegación de eventos permite vincular un controlador de evento a un elemento contenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQuery hace fácil este trabajo a través de `$.fn.live` y`$.fn.delegate`. En lo posible, es recomendable utilizar `$.fn.delegate` en lugar de `$.fn.live`, ya que elimina la necesidad de una selección y su contexto explícito reduce la carga en aproximadamente un 80%.
187
185
188
186
Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.
189
187
@@ -248,7 +246,7 @@ $.data(elem,key,value);
248
246
jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.
249
247
250
248
~~~~{.brush: .js}
251
-
// MAL: el codigo a continuación ejecuta tres funciones
249
+
// MAL: el código a continuación ejecuta tres funciones
0 commit comments