Introduction à ...LOGIN

Introduction à jQuery

Qu'est-ce que jQuery ?

jQuery = JavaScript + jQuery

jQuery est une bibliothèque JavaScript. Il obtient un ensemble de méthodes définies en encapsulant des fonctions JavaScript natives

jQuery simplifie grandement la programmation JavaScript. Regardez l'exemple ci-dessous

Supposons qu'il y ait les deux éléments suivants dans la page

<input type="text" id="txt" />
<button type="button" onclick="get_text();">Go</button>

Après avoir cliqué sur le bouton Go, le contenu saisi par l'utilisateur dans la zone de texte apparaîtra à l'aide du. code JavaScript original, vous pouvez l'écrire comme ceci

alert(document.getElementById('txt').value);

Lorsque vous utilisez jQuery, vous pouvez simplement l'écrire comme

alert($('#txt').val());

Vous pouvez voir que nous utilisons document.getElementById pour obtenir l'élément avec le spécifié id, et en utilisant jQuery, il suffit d'utiliser $('# ') pour accomplir tout cela


L'objectif principal de jQuery est de réaliser plus de fonctions avec moins de code

La bibliothèque jQuery comprend les fonctions suivantes :

  • Sélection d'éléments HTML

  • Opération d'éléments HTML

  • Opération CSS

  • Fonction d'événement HTML

  • Effets spéciaux et animation JavaScript

  • HTML DOM parcours et modification

  • AJAX

Conseils : De plus, Jquery fournit également un grand nombre de plug-ins.


Conditions d'apprentissage de jQuery

  • HTML (dont css, la base nécessaire au web pages Connaissance)

  • JavaScript (même si jQuery est plus simple que JavaScript, les différentes syntaxes de jQuery proviennent de JavaScript)

  • PHP (jQuery C'est une technologie front-end extrêmement complémentaire et qui fait écho au back-end)


JQuery est-il applicable à tous les navigateurs ?

La communauté jQuery sait que JS a beaucoup de problèmes de compatibilité dans différents navigateurs. Actuellement, jQuery est compatible avec tous les principaux navigateurs, y compris Internet Explorer 6 ! >
Regardons d'abord un exemple jQuery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript">
    </script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
<p>如果你点我,我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

Exécutez le programme et essayez-le



section suivante
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果你点我,我就会消失。</p> <p>继续点我!</p> <p>接着点我!</p> </body> </html>
soumettreRéinitialiser le code
chapitredidacticiel