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

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique