Maison >interface Web >js tutoriel >Guide de démarrage de jQuery pour les débutants_jquery

Guide de démarrage de jQuery pour les débutants_jquery

WBOYoriginal: 2016-05-16 15:45:061155parcourir

Qu'est-ce que jQuery et que peut-il faire pour nous ? Si vous êtes un développeur Web et avez écrit des programmes JavaScript, vous utilisez probablement jQuery. Si vous ne l'avez pas essayé, vous en avez au moins entendu parler. En fait, jQuery peut être considéré comme la bibliothèque JavaScript la plus populaire. scène. Selon les statistiques des départements concernés, environ 28 % des sites Web dans le monde utilisent jQuery. Ce chiffre est peut-être un peu exagéré, mais il montre la popularité de jQuery. Cet article ne donne qu'une brève introduction à l'utilisation de jQuery et sert de tutoriel d'introduction.
Téléchargez le code jQuery et chargez-le sur la page

Vous devez d'abord télécharger le dernier code jQuery depuis le site officiel de jQuery jQuery fournit officiellement deux versions, l'une est compressée et l'autre n'est pas compressée si vous ne prévoyez pas de lire ou d'analyser For. Code source jQuery, il est recommandé de télécharger la version compressée car elle est plus petite. Une fois le téléchargement terminé, chargez-le dans votre code HTML. La méthode de chargement est la suivante :

<html>
 <head>
 <title>jQuery tutorial</title>
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 </head>
 <body>
 jQuery tutorial
 </body>
</html>

Bien sûr, en raison de la popularité actuelle de jQuery, de nombreux sites Web proposent également une API jQuery en ligne, telle que l'API Google, afin que nous puissions charger jQuery via les méthodes suivantes :

Copier le code Le code est le suivant :

0e56aa0811d9f873969658d914670a2b2cacc6d41bbb37262a98f745aa00fbf0

Un paramètre ver=1.1.4 est ajouté après l'adresse. A noter que le code JavaScript ne peut recevoir aucun paramètre. Ce paramètre est ajouté ici juste pour permettre au navigateur d'obtenir la dernière version du serveur, car Vous. Il se peut que le fichier jquery.min.js soit déjà présent dans le cache de votre navigateur. Ceci est simplement pour éviter la mise en cache.
Comment le code jQuery est exécuté

Lorsque vous apprenez à écrire du code jQuery, la première chose que vous devez toucher est le mécanisme de traitement des événements prêts pour le document. Presque tout votre code jQuery doit être écrit dans cet événement. Cette chose a deux fonctions principales :

Assurez-vous que le code jQuery n'est exécuté qu'une fois la page Web entièrement chargée. Parce que s'il y a des éléments DOM dans la page Web qui n'ont pas été entièrement chargés, l'utilisation du code jQuery pour accéder ou manipuler les éléments DOM provoquera une erreur.
Différencier le code jQuery des autres codes dans une certaine mesure.

Le code s'écrit généralement comme suit :

<script type="text/javascript">
$(document).ready(function() {
 // 所有的 jQuery 代码都写在这里
});
</script>

Sélectionnez les éléments DOM à l'aide des sélecteurs jQuery

jQuery encapsule une fonction $("") qui nous permet de sélectionner facilement des éléments DOM dans les documents HTML. Voici quelques façons simples de l'utiliser.

$("div"); // 选择当前 HTML 文档中的所有 DIV 元素
$("#myElement"); // 选择当前 HTML 文档中 ID 为 "myElement" 的元素
$(".myClass"); // 选择当前 HTML 文档中 class 为 "myClass" 的元素
$("p#myElement"); // 选择当前 HTML 中 ID 为 "myElement" 的段落 P 标签元素
$("ul li a.navigation"); // 选择列表元素中 class 为 "navigation" 的超链接

jQuery prend en charge presque toutes les méthodes de sélection CSS

$("p > a"); // 选择所有 P 标签中的超链接 A 元素
$("input[type=text]"); // 选择 input 元素中 type 为 text 的元素
$("a:first"); // 选择当前页面中的第一个超链接 A 元素
$("p:odd"); // 选择当前页面中序数为奇数的段落 P 元素
$("li:first-child"); // 选择列表中的第一个元素

jQuery lui-même définit également certaines méthodes de sélection. Voici quelques exemples :

$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 （input 或 button）
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 （h1, h2, h3, h4 ...）

Manipuler et accéder aux noms de classes en CSS

En utilisant jQuery, vous pouvez ajouter et supprimer des noms de classe pour les éléments DOM, et c'est très pratique à utiliser. Voici quelques méthodes d'utilisation typiques :

$("div").addClass("content"); // 为所有 <div> 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 <div> 元素中，名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 <div> 元素中，名为 "content" 的类 （如果该元素中不存在这个类，则为它加上这个类；如存在，则移除之）

Bien sûr, vous pouvez également utiliser jQuery pour détecter si une certaine classe est utilisée dans un élément. Le code est le suivant

if ($("#myElement").hasClass("content")) {
 alert("存在名为 content 的类！");
}
else {
 alert("不存在名为 content 的类！");
}

Utilisez jQuery pour manipuler les styles en CSS

Vous pouvez facilement ajouter des styles CSS aux éléments DOM à l'aide de jQuery. Voici quelques exemples :

$("p").css("width", "400px"); // 为所有段落添加一个宽度
$("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色
$("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc

Ajouter, supprimer et ajouter des éléments ou du contenu DOM aux pages Web

jQuery fournit également de nombreuses méthodes pour manipuler les éléments du DOM, telles que la modification du texte dans la balise d'opération. . . Quelques exemples sont les suivants :

var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML

var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外

Semblable aux deux méthodes ci-dessus, vous pouvez également modifier le HTML ou le texte dans l'élément DOM :

$("#myElement").html("<p>This is the new content.</p>");
// #myElement 中的内容将被这个段落替换掉

$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉

Ajouter du contenu dans l'élément :

$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容，并在末尾处追加新内容

Pour ajouter du contenu aux éléments, jQuery a plusieurs autres utilisations, telles que : appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter(), chacun a le sien Ses caractéristiques, mais son utilisation sont similaires à append().
Gestion des événements jQuery

Certains gestionnaires d'événements spécifiques peuvent être implémentés en utilisant les méthodes suivantes :

$("a").click(function() {
 // 可以在这里写一些代码
 // 当超链接被点击的时候这里的代码将被执行
});

Lorsque vous cliquez sur le lien hypertexte, le code dans function() sera exécuté. Il existe d'autres événements qui peuvent être utilisés de la même manière, tels que : flou, focus, survol, touche enfoncée, chargement, déplacement de la souris, redimensionnement, défilement, soumission, sélection.
Masquer ou afficher des éléments avec jQuery

jQuery peut également afficher ou masquer des éléments DOM de manière très pratique. L'exemple de code est le suivant :

$("#myElement").hide("slow", function() {
 // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});

$("#myElement").show("fast", function() {
 // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});

$("#myElement").toggle(1000, function() {
 // 这里可以写一些代码，当元素被隐藏/显示后，这里的代码将被执行
});

可以看到，当元素显示或隐藏的时候，是慢慢的渐渐变化的，这是因为上面用到了几个速度参数，如 slow，fast，除此之外还有 normal，数字 1000 表示毫秒数，可以自定义。如果没有设置速度参数，那么元素将直接显示或隐藏，一闪而过，没有任何动画效果。后面的第二个参数是一个 function，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。

另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：

$("#myElement").fadeOut("slow", function() {
 // 这里的代码在 fade out 完成后执行
});

$("#myElement").fadeIn("slow", function() {
 // 这里的代码在 fade in 完成后执行
});

调整元素的透明度：

$("#myElement").fadeTo(2000, 0.4, function() {
 // 这里的代码在在调整透明度完成后执行
});

其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。
jQuery 之动画效果

jQuery 可以为 DOM 元素添加上下滑动效果：

$("#myElement").slideDown("fast", function() {
 // .......
});

$("#myElement").slideUp("slow", function() {
 // .......
});

$("#myElement").slideToggle(1000, function() {
 // .......
});

jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：

$("#myElement").animate({
 opacity: 0.3,
 width: "500px",
 height: "700px"
 }, 
 1000, 
 function() {
 // ......
});

总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à certaines méthodes de base dans jQuery programmation_jqueryArticle suivant：Introduction à certaines méthodes de base dans jQuery programmation_jquery

Articles Liés

Voir plus