{"id":6769,"date":"2014-05-22T19:43:20","date_gmt":"2014-05-22T17:43:20","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=6769"},"modified":"2014-05-22T23:54:00","modified_gmt":"2014-05-22T21:54:00","slug":"resumen-jquery-un-vistazo-rapido-a-sus-funciones","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/resumen-jquery-un-vistazo-rapido-a-sus-funciones\/","title":{"rendered":"Resumen JQuery, un vistazo r\u00e1pido a sus funciones. Cheat Sheet"},"content":{"rendered":"

En esta entrada dejo un resumen de funciones JQuery<\/strong> bastante \u00fatiles para consultar r\u00e1pidamente una determinada llamada\u00a0o como recordatorio. Es mi chuleta de trabajo.<\/p>\n

En la parte inferior, dejo im\u00e1genes m\u00e1s completas a modo resumen.<\/p>\n

jQuery es una libreria\u00a0de JavaScript<\/strong>, creada inicialmente por John Resig<\/strong>, que permite simplificar la manera de interactuar con los documentos HTML<\/strong>, manipular el \u00e1rbol DOM<\/strong>, manejar eventos, desarrollar animaciones y agregar interacci\u00f3n con la t\u00e9cnica AJAX<\/strong> a p\u00e1ginas web. Fue presentada el 14 de enero de 2006<\/strong> en el BarCamp NYC. \u00a0jQuery es la librer\u00eda\u00a0de JavaScript m\u00e1s utilizada en el mundo<\/strong>.<\/p>\n

<\/p>\n

Actualmente resumiendo cosas, versi\u00f3n chuleta 1.0 en castellano<\/strong><\/p>\n

<!--\r\nRESUMEN SIMPLIFICADO DE FUNCIONES DE CONSULTA JQUERY - mi Cheat www.palentino.es \r\nUna ayuda para una consulta r\u00e1pida.\r\nPermite copiar y pegar texto. \r\nNo es necesario fijarse en la sintaxis, es un compendio resumido.\r\n-->\r\n\r\n<html>\r\n<head> <\/head>\r\n<script type=\"text\/javascript\" src=\"js\/jquery.js\"> <\/script>\r\n<script type=\"text\/javascript\">\r\n\r\n\/\/Llenaremos de llamadas de ejemplo este fichero.\r\nvar y;\r\ny=$(document); \/\/ Selecciona el documento\r\ny.ready(inicio); \/\/ Llamada a funcion , podemos anidar.\r\n\r\nfunction inicio()\r\n{\r\nvar y;\r\ny=$(\"#mi_capa_id\");  \/\/ Selecciona la capa por id\r\ny=$(\".mi_capa_class\"); \/\/ Selecciona la capa por class\r\ny=$(\"h1\"); \/\/ Elemento sencillo HTML\r\ny=$(this); \/\/ Seleccion del elemento actual\r\ny.click(mi_funcion); \/\/Llamada a una funci\u00f3n por evento\r\ny.css(\"color\",\"red\"); \/\/ Cambio de una propiedad.\r\ny=$(\"[href]\"); \/\/ Seleccion por atributo\r\ny=$(\"[href='.jpg']\");  \/\/ Seleccion con busqueda de archivo\r\ny=$(\"li:first\"); \/\/ Selectores multiples, primer elemento de una lista\r\n\r\n\/\/ Meter texto en un parrafo\r\ny=$(\"p\");\r\ny.text(\"Este es el texto\");\r\n\/\/Para atributos\r\ny.attr(\"border\",\"2\"); \/\/ Cambiar el borde \r\ny.removeAttr(\"border\"); \/\/ Elimina el atributo\r\n\r\n\/\/ A\u00f1adir o quitar clases\r\ny.addClass(\"el_nombre_clase\"); \/\/ Recuerda la clase seguida con punto :-)\r\ny.removeClass(\"el_nombre_clase);\r\n\r\n\/\/ A\u00f1adir HTML nuevo dentro de un fragmento HTML. Bastante potente.\r\nx.html(\"<span> Este texto se a\u00f1ade dentro de un elemento seleccionado con jquery\");\r\n\r\n\/\/ A\u00f1adir texto a un elemento\r\ny.append(\"El nuevo texto\");\r\ny.prepend(\"El nuevo texto\");\r\ny.after(\"El texto antes\");\r\ny.before(\"El texto despues\");\r\n\r\n\/\/ Para los EVENTOS\r\ny.mouseover(mi_funcion_entra); \r\ny.mouseout(mi_funcion_salida);\r\ny.hover(mi_funcion_entra, mi_funcion_salida); \/\/Automatiza en un solo evento la entrada y la salida\r\ny.mousemove(mi_funcion_captura); \/\/ Podemos usar event.clientX o event.clientY para capturar coordenadas.\r\ny.click(mi_funcion_click);\r\ny.mousedown(mi_funcion_presionar);\r\ny.mouseup(mi_funcion_soltar);\r\ny.dblclick(mi_funcion_dobleclick);\r\ny.focus(mi_funcion_enfoque); \/\/Cuando un elemento tiene el foco\r\ny.blur(mi_funcion_perde_foco); ( \/\/ Cuando un elemento pierde el foco\r\n\r\n\/\/ Para los EFECTOS\r\ny.show(); \/\/ Muestra el elemento.\r\ny.hide(); \/\/ Oculta un elemento.\r\n\/\/ Podemos incluir modificadores.\r\ny.hide(\"fast\"); \/\/ Animacion rapida.\r\ny.show(\"slow\"); \/\/ Muestra lentamente.\r\ny.fadeout();   \/\/Similar al hide, Ocultar sin escala, animar solo la transparencia\r\ny.fadein(); \/\/ Soportan los modificadores slow y fast\r\ny.fadeto(velocidad,transparencia); \/\/Transicionamos hasta el nivel de t\r\nransparencia en la animacion, nivel entre =0 y 1\r\ny.toggle(\"fast\");\/\/ Permite mostrar y ocutar en un unico boton. \r\ny.slideup(\"slow\");  \/\/ Mostramos u ocultamos cosas con barridos\r\ny.slidedown(\"slow\"); \/\/ Muestra el elemento ocultado\r\ny.slidetoggle(); \/\/ Para un solo boton\r\ny.animate(\"propiedad a animar\", velocidad);  \r\ny.animate({height:200},\"slow\"); \/\/ Permite estructuras de animacion personalizadas\r\ny.animate({width:100},4000); \/\/ Animacion anchura durante 4 segundos. \r\n\r\n\/\/ Para AJAX\r\n\r\npagina=$(this).attr(\"href\"); \/\/ Lee el enlace activo \r\ny.load(pagina); \/\/Evita saltos entre paginas. $(this).attr(\"href\") Lee una pagina en la capa del selector establecido con $(\"#capa\") \r\n$.post(\"mi_pagina.php\",{valor:n}, funcion_respuesta); \/\/\r\n$.get(\"mi_pagina.php\",{valor:n}, funcion_respuesta); \/\/\r\n$.ajax(\r\n{async:true, type:\"POST\", dataType:\"html\", contentType=\"application\/x-www-form-urlencoded\",\r\nurl:\"archivo.php\", data:\"parametro=\" +v, beforeSend: Funcion_inicio, success:Funcion_llegada,\r\ntimeout:4000, error:problemas});\r\n\r\n\/\/ Funciones Callback, espera que termine para ejecutar otra funcion\r\ny.hide(11000, function(){alert('el div se ha escondido');});  \/\/no ejecutar eventos hasta que las animaciones finalicen\r\n\r\n\/\/JQuery, necesario descargar esta libreria alternativa (2 modos al igual que JQuery)\r\n\t\/\/ Sobre JQuery UI interacciones\r\n\ty.draggable(); \/\/ Arrastrar elemento\r\n\ty.droppable({drop:funcion_ha_soltado});  \/\/Soltar elemento sobre otro.\r\n\ty.resizable(); \/\/ Cambia el tama\u00f1o de un elemento. Ejemplo DIV, aparecen selectores.\r\n\ty.selectable(); \/\/ Selecciona elementos, necesita redefinir un estilo para notar el cambio. \r\n\ty.sortable(); \/\/Cambia el orden de los elementos de una lista.\r\n\t\/\/ Sobre JQuery UI Widgets\r\n\r\n\/\/ Sobre JQuery UI Efectos , donde podemos descargar temas\r\n\ty.accordion(); \/\/ Efecto acordeon, requiere divs para cada seccion y titulo en h1 \r\n\ty.autocomplete({source:matriz_datos}); \/\/ La matriz son los datos para autocompletar ejemplo: var matriz_datos=[\"uno\",\"dos\",\"tres\"];\r\n\ty.button(); \/\/ Define botones atractivos.\r\n\ty.datepicker(); \/\/ Define un calendario.\r\n\ty.dialog(); \/\/ Define ventana de dialogo.Incluye botton de cierre\r\n\ty.progressbar({value:50}); \/\/ Barra de progreso al 50%\r\n\ty.slider(); \/\/ Control deslizable como un potenci\u00f3metro.\r\n\ty.tabs(); \/\/ Permite crear pesta\u00f1as requiere div para contenido y listas no ordenadas para titulos.\r\n\ty.effect(efecto); \/\/ El efecto puede ser fold, fade, drop, etc ...\r\n\r\n\/\/ Fin del cheatSheet JQuery www.palentino.es\r\n\/\/ Fecha modificaci\u00f3n 22-05-2014\r\n}\r\n<\/script>\r\n<\/html><\/pre>\n
Anexo CheatSheet en imagen. Click para ampliar (otra ventana).<\/p>\n
\"jquery_1_3\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
\"JQueryCheatSheet-1.3.2\"<\/a><\/p>\n
 <\/p>\n
\"jquery-cheat-sheet\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En esta entrada dejo un resumen de funciones JQuery bastante \u00fatiles para consultar r\u00e1pidamente una determinada llamada\u00a0o como recordatorio. Es mi chuleta de trabajo. En la parte inferior, dejo im\u00e1genes m\u00e1s completas a modo resumen. jQuery es una libreria\u00a0de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el \u00e1rbol DOM, manejar eventos, desarrollar animaciones y agregar interacci\u00f3n con la t\u00e9cnica AJAX a p\u00e1ginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. \u00a0jQuery es la librer\u00eda\u00a0de JavaScript m\u00e1s utilizada en el mundo.<\/p>\n","protected":false},"author":1,"featured_media":6771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[418,93,5],"tags":[94,95,670],"class_list":["post-6769","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-2","category-jquery","category-programacion","tag-ajax","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6769","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=6769"}],"version-history":[{"count":21,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6769\/revisions"}],"predecessor-version":[{"id":6798,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/6769\/revisions\/6798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/6771"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=6769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=6769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=6769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}