Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/conceptosGenerales»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | jquery
(→Cómo usar JQuery) |
(→Sintaxis) |
||
Línea 42: | Línea 42: | ||
<script type="text/javascript" src="jquery-1.10.2.js"></script> | <script type="text/javascript" src="jquery-1.10.2.js"></script> | ||
</source> | </source> | ||
+ | |||
+ | ==== Uso de un CDN ==== | ||
+ | |||
+ | *También a través de un '''CDN''' (Content Delivery Network). | ||
+ | *¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros): | ||
+ | * CDN de Google: | ||
+ | <source lang="javascript"> | ||
+ | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
+ | </source> | ||
+ | *CDN de Microsoft: | ||
+ | <source lang="javascript"> | ||
+ | <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script> | ||
+ | </source> | ||
+ | *CDN del propio jQuery: | ||
+ | : Minified: | ||
+ | <source lang="javascript"> | ||
+ | <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
+ | </source> | ||
+ | :Full: | ||
+ | <source lang="javascript"> | ||
+ | <script type="http://code.jquery.com/jquery-1.10.2.js"></script> | ||
+ | </source> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
===Sintaxis=== | ===Sintaxis=== |
Revisión de 10:42 2 abr 2016
Contenido
- 1 Programación web al lado del cliente
- 1.1 Qué es JQuery
- 1.2 Para qué sirve JQuery
- 1.3 Cómo usar JQuery
- 1.4 Sintaxis
- 1.4.1 Seleccionar elementos del DOM con JQuery
- 1.4.2 Aplicando efectos con JQuery
- 1.4.3 Encadenando métodos en JQuery
- 1.4.4 Dom y JQuery; Modificando elemntos
- 1.4.5 Dom y JQuery; Accediendo a los atributos
- 1.4.6 JQuery y CSS
- 1.4.7 JQuery y Formularios
- 1.4.8 JQuery y Eventos
- 1.4.9 JQuery Validando formularios con plugin
http://www.desarrolloweb.com/manuales/manual-jquery.html
Qué es JQuery
- Es una librería de funciones de javascript que facilita el uso de javascript
- Nosotros nos vamos a centrar en la parte del DOM (elementos y eventos en la página html)
- También se conoce como un framework, que viene siendo un entorno para desarrollar software en un determinado lenguaje, donde se facilita al desarrollador muchas acciones a la hora de hacer un programa.
Para qué sirve JQuery
- Para usar JQuery, hemos de conocer las tecnologías en las cuales lo vamos a utilizar
- HTML
- CSS
- JavaScript
JQuery es un entorno ligero que parte de la filosofía escribe menos, haz mas
- Cosas que se pueden hacer con JQuery:
Manipular la página HTML a través del DOM Manipular CSS Acceder y controlar los eventos de la página html
- Efectos y animaciones
- AJAX
- Incorporar Utilidades
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities realizadas en JQuery
Cómo usar JQuery
- Para usar jquery debemos especificar el fichero donde están los fuentes de la librería
(: *Al final solo son una librerías de javascript que van a hacer más facil hacer ciertas tareas)
- Podemos indicar dónde está el fuente en internet o descargarlo a nuestro ordenador
- descargarlo https://jquery.com/download/
- Especificar su ubucación en internet
Versión de producción:
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
Versión de desarrollo
<script type="text/javascript" src="jquery-1.10.2.js"></script>
Uso de un CDN
- También a través de un CDN (Content Delivery Network).
- ¿Qué es un CDN? Grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros):
- CDN de Google:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- CDN de Microsoft:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
- CDN del propio jQuery:
- Minified:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
- Full:
<script type="http://code.jquery.com/jquery-1.10.2.js"></script>
</div>