jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
Hi ha dos versions:
Sol ser un sol fitxer que s'ha d'importar al HTML. Si instal·leu el paquet libjs-jquery els fitxers disponibles són:
/usr/share/javascript/jquery/jquery.min.js /usr/share/javascript/jquery/jquery.js /usr/share/javascript/jquery/jquery.lite.js /usr/share/javascript/jquery/jquery.pack.js
Recursos:
Cal anar a:
http://jquery.com/download/
Instal·lació:
$ sudo apt-get install libjs-jquery
Fitxers instal·lats:
$ dpkg -L libjs-jquery /. /usr /usr/share /usr/share/javascript /usr/share/javascript/jquery /usr/share/javascript/jquery/jquery.js /usr/share/javascript/jquery/jquery.min.js /usr/share/javascript/jquery/version.txt /usr/share/doc /usr/share/doc/libjs-jquery /usr/share/doc/libjs-jquery/README.Debian /usr/share/doc/libjs-jquery/copyright /usr/share/doc/libjs-jquery/changelog.Debian.gz /usr/share/javascript/jquery/jquery.lite.js /usr/share/javascript/jquery/jquery.pack.js
Cal tenir instal·lar javascript-common:
http://localhost/javascript/jquery/jquery.js
La sintaxi bàsica és:
$(selector).action()
On
Exemples:
$(this).hide() - oculta l'element actual$("p").hide() - oculta tots els elements p (
) $(".test").hide() - oculta tots els elements amb class="test". $("#test").hide() - oculta tots els elements amb id="test"
NOTA: jQuery utilitza la sintaxi dels selectors de CSS
Normalment s'executa tot dins d'una funció:
Acacha Wiki $(document).ready(function(){
// jQuery methods go here...
});
Això evita que el codi jQuery s'executi abans de que el document es carregi completament. Es pot utilitzar per abreviar:
$(function(){
// jQuery methods go here...
});
Recursos:
El símbol:
$()
indica sintaxi Jquery. L'script el que fa és que un cop els elements DOM del document estan ready modifica el contingut del element amb id "msgid" per fer el hello World!:
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});
</script>
This is Hello World by HTML
<div id="msgid">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
Recursos:
$ sudo apt-get install libjs-jquery-ui
Vegeu User Interface
http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
Aquest plugin està disponible per Jquery i Prototype i permet treballar amb uns desplegables de qualitat. Vegeu exemples de com queden els desplegables a:
http://harvesthq.github.io/chosen/
o també a:
Grocery Cruds
Per instal·lar-lo cal indicar el css, utilitzar Jquery i l'script de chosen chosen.jquery.min.js:
<link href="/App_Themes/Default/chosen.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="/Scripts/chosen.jquery.min.js" type="text/javascript"></script>
Els fitxers es podent trobar a github:
https://github.com/harvesthq/chosen
El codi Javascript és:
jQuery(document).ready(function(){
jQuery(".chosen").chosen();
});
Escollir tots (select all) i unselect all
http://jsfiddle.net/C7LnL/1/
Form Field Change
When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event* on the original form field. That let's you do something like this:
$("#form_field").chosen().change( … );
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.
$("#form_field").trigger("liszt:updated");
Vegeu també:
Recursos:
Recursos:
$ apt-cache --names-only search jquery libjs-jquery - JavaScript library for dynamic web applications libjs-jquery-cookie - jQuery cookie plugin libjs-jquery-easing - jQuery Easing Plugin libjs-jquery-event-drag - jQuery Event Drag libjs-jquery-event-drop - jQuery Event Drop libjs-jquery-fancybox - fancy lightbox alternative libjs-jquery-form - jQuery Form Plugin libjs-jquery-galleriffic - jQuery Galleriffic plugin libjs-jquery-history - jQuery history plugin libjs-jquery-jfeed - jQuery RSS/Atom feed parser plugin libjs-jquery-jush - jQuery Syntax Highlighter libjs-jquery-livequery - jQuery Live Query libjs-jquery-meiomask - jQuery mask plugin libjs-jquery-metadata - jQuery plugin for parsing metadata from elements libjs-jquery-mousewheel - jQuery Mousewheel Plugin libjs-jquery-opacityrollover - jQuery Opacity Rollover plugin libjs-jquery-tablesorter - Flexible client-side table sorting libjs-jquery-tipsy - jQuery Facebook-style tooltip plugin libjs-jquery-treetable - jQuery treeTable Plugin libjs-jquery-ui - JavaScript UI library for dynamic web applications libjs-jquery-ui-docs - Documentation for JQuery-UI
$ dpkg -L libjs-jquery-ui /. /usr /usr/share /usr/share/doc /usr/share/doc/libjs-jquery-ui /usr/share/doc/libjs-jquery-ui/AUTHORS.txt /usr/share/doc/libjs-jquery-ui/copyright /usr/share/doc/libjs-jquery-ui/README.Debian /usr/share/doc/libjs-jquery-ui/changelog.Debian.gz /usr/share/javascript /usr/share/javascript/jquery-ui /usr/share/javascript/jquery-ui/ui /usr/share/javascript/jquery-ui/ui/jquery.effects.explode.js /usr/share/javascript/jquery-ui/ui/jquery.effects.fold.js /usr/share/javascript/jquery-ui/ui/jquery.ui.progressbar.js /usr/share/javascript/jquery-ui/ui/jquery.effects.drop.js /usr/share/javascript/jquery-ui/ui/jquery.ui.resizable.js /usr/share/javascript/jquery-ui/ui/jquery.effects.highlight.js /usr/share/javascript/jquery-ui/ui/jquery.ui.widget.js /usr/share/javascript/jquery-ui/ui/jquery.ui.tabs.js /usr/share/javascript/jquery-ui/ui/jquery.effects.transfer.js /usr/share/javascript/jquery-ui/ui/i18n /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-eo.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-de.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-fr.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-zh-TW.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-uk.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-lv.js /usr/share/javascript/jquery-ui/ui/i18n/jquery-ui-i18n.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ru.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-hu.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-he.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-it.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-fr-CH.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-cy-GB.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-pt.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-kk.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-zh-HK.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-da.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-fo.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-en-AU.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-nl-BE.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-sq.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ar.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-fi.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-hi.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-tr.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-fa.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-sr.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-el.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-af.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-nl.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-lt.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-lb.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-no.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-es.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-zh-CN.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-sk.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-th.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ar-DZ.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-et.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-rm.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-id.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-en-NZ.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ko.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-mk.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-sv.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-sr-SR.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-en-GB.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-cs.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-pl.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ro.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-gl.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-pt-BR.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-az.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-sl.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ja.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ms.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ca.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ta.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-bg.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-km.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-is.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-vi.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-bs.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-hr.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-hy.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-ml.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-tj.js /usr/share/javascript/jquery-ui/ui/i18n/jquery.ui.datepicker-eu.js /usr/share/javascript/jquery-ui/ui/jquery-ui-1.8.18.custom.js /usr/share/javascript/jquery-ui/ui/jquery.effects.slide.js /usr/share/javascript/jquery-ui/ui/jquery.ui.core.js /usr/share/javascript/jquery-ui/ui/jquery.effects.shake.js /usr/share/javascript/jquery-ui/ui/jquery.ui.autocomplete.js /usr/share/javascript/jquery-ui/ui/jquery.effects.clip.js /usr/share/javascript/jquery-ui/ui/jquery.ui.slider.js /usr/share/javascript/jquery-ui/ui/jquery.ui.accordion.js /usr/share/javascript/jquery-ui/ui/jquery.ui.mouse.js /usr/share/javascript/jquery-ui/ui/jquery.ui.datepicker.js /usr/share/javascript/jquery-ui/ui/jquery.effects.bounce.js /usr/share/javascript/jquery-ui/ui/jquery.ui.button.js /usr/share/javascript/jquery-ui/ui/jquery.ui.selectable.js /usr/share/javascript/jquery-ui/ui/jquery.ui.draggable.js /usr/share/javascript/jquery-ui/ui/jquery.ui.position.js /usr/share/javascript/jquery-ui/ui/jquery.effects.scale.js /usr/share/javascript/jquery-ui/ui/jquery.effects.pulsate.js /usr/share/javascript/jquery-ui/ui/jquery.effects.fade.js /usr/share/javascript/jquery-ui/ui/jquery.ui.sortable.js /usr/share/javascript/jquery-ui/ui/jquery.effects.core.js /usr/share/javascript/jquery-ui/ui/jquery.ui.droppable.js /usr/share/javascript/jquery-ui/ui/jquery.effects.blind.js /usr/share/javascript/jquery-ui/ui/jquery.ui.dialog.js /usr/share/javascript/jquery-ui/themes /usr/share/javascript/jquery-ui/themes/smoothness /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.accordion.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.core.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.dialog.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery-ui-1.8.18.custom.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.autocomplete.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.tabs.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.progressbar.css /usr/share/javascript/jquery-ui/themes/smoothness/images /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-icons_cd0a0a_256x240.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_glass_75_dadada_1x400.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-icons_888888_256x240.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-icons_222222_256x240.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-icons_454545_256x240.png /usr/share/javascript/jquery-ui/themes/smoothness/images/ui-icons_2e83ff_256x240.png /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.base.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.theme.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.all.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.datepicker.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.selectable.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.button.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.slider.css /usr/share/javascript/jquery-ui/themes/smoothness/jquery.ui.resizable.css /usr/share/javascript/jquery-ui/themes/base /usr/share/javascript/jquery-ui/themes/base/jquery.ui.accordion.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.core.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.dialog.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.autocomplete.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.tabs.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.progressbar.css /usr/share/javascript/jquery-ui/themes/base/images /usr/share/javascript/jquery-ui/themes/base/images/ui-icons_cd0a0a_256x240.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_glass_65_ffffff_1x400.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_glass_75_dadada_1x400.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_flat_75_ffffff_40x100.png /usr/share/javascript/jquery-ui/themes/base/images/ui-icons_888888_256x240.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png /usr/share/javascript/jquery-ui/themes/base/images/ui-icons_222222_256x240.png /usr/share/javascript/jquery-ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png /usr/share/javascript/jquery-ui/themes/base/images/ui-icons_454545_256x240.png /usr/share/javascript/jquery-ui/themes/base/images/ui-icons_2e83ff_256x240.png /usr/share/javascript/jquery-ui/themes/base/jquery.ui.base.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.theme.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.all.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.datepicker.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.selectable.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.button.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.slider.css /usr/share/javascript/jquery-ui/themes/base/jquery.ui.resizable.css /usr/share/javascript/jquery-ui/jquery-ui.min.js /usr/share/javascript/jquery-ui/css /usr/share/javascript/jquery-ui/css/smoothness /usr/share/javascript/jquery-ui/css/smoothness/jquery-ui-1.8.18.custom.css /usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.min.css /usr/share/javascript/jquery-ui/css/smoothness/images /usr/share/javascript/jquery-ui/css/smoothness/images/ui-icons_cd0a0a_256x240.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_glass_65_ffffff_1x400.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_glass_75_dadada_1x400.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_flat_75_ffffff_40x100.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-icons_888888_256x240.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-icons_222222_256x240.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-icons_454545_256x240.png /usr/share/javascript/jquery-ui/css/smoothness/images/ui-icons_2e83ff_256x240.png /usr/share/javascript/jquery-ui/jquery-ui.js /usr/share/javascript/jquery-ui/css/smoothness/jquery-ui.css
Vegeu Datatables
Si està instal·lat el paquet:
$ sudo apt-get install javascript-common
Apache2 té per defecte els següent fitxer de configuració:
$ cat /etc/apache2/conf.d/javascript-common.conf Alias /javascript /usr/share/javascript/ <Directory "/usr/share/javascript/"> Options FollowSymLinks MultiViews </Directory>
Que fa accesible la carpeta /usr/share/javascript des de la URL /javascript. Assegureu-vos aplicar els canvis:
$ sudo service apache2 restart
I el paquet:
$ sudo apt-get install libjs-jquery
Posa a disposició el fitxer:
http://localhost/javascript/jquery/jquery.js
http://www.grocerycrud.com/forums/topic/66-es-translation-the-newbies-grocery-crud-tutorial/
Vegeu Jquery i AJAX
Cal utilitzar el mètode event.preventDefault(), sinó a la que hi ha un error es passa a la següent pàgina (href del link utilitzat o el submit del formulari)