Avec jQuery, vous pouvez sélectionner (interroger) des éléments HTML et effectuer des "actions" sur eux.
Syntaxe jQuery
Dans le programme jQuery, qu'il s'agisse de la sélection des éléments de la page ou de l'intégration fonctions, Ils commencent tous par le signe dollar "$", et ce "$" est l'objet le plus important et le plus unique dans jQuery : l'objet jQuery, nous pouvons donc écrire comme ceci lors de la sélection d'éléments de page ou de l'exécution de fonctions :
$(function(){})； //执行一个匿名函数$('#box'); //进行执行的ID元素选择$('#box').css('color','red'); //执行函数功能Puisque "$" lui-même est l'abréviation de l'objet jQuery, c'est-à-dire que nous pouvons écrire le code ci-dessus sous la forme suivante :
jQuery(function(){});jQuery('#box');jQuery('#box').css('color','red');
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
$('#box').css('color','red');
});
// alert($===jQuery);
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>
Mode de chargement jQuery
Nous étions avant Le code a utilisé $(function(){}); Ce code est enveloppé du début à la fin. Savez-vous pourquoi vous faites cela ?
La raison est que notre fichier de bibliothèque jQuery est chargé avant l'élément body. Nous devons attendre que tous les codes de la page Web soient chargés avant de charger le code JavaScript, sinon nous ne pourrons pas. pour obtenir
Instance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
$('#box').css('color','red');
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>Notre JavaScript précédent nous a donc donné :
window.onload=function(){}; //JavaScript等待加载us jQuery nous fournit :
$(document).ready(function(){}); //jQuery等待加载
La différence entre les deux :
1. Calendrier d'exécution
window.onload : Vous devez attendre que la page Web soit chargée (y compris les images) avant exécuter le code du package.
$(document).ready(function(){}) : Attendez simplement que la structure DOM de la page Web soit chargée avant d'exécuter le code encapsulé. Effet supérieur
2. Nombre d'exécutions
window.onload ne peut être exécuté qu'une seule fois. S'il est exécuté une deuxième fois, la première exécution sera écrasée
$(document).ready(function(){}) : peu importe le nombre de fois. il est exécuté Ne sera pas écrasé
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
// window.onload=function(){
// alert(1)
// };
// window.onload=function(){
// alert(2)
// };
$(document).ready(function(){
alert(1)
});
$(document).ready(function(){
alert(2)
})
</script>
</head>
<body>
<div id="box">jQuery语法</div>
</body>
</html>
3. Abréviation
window.onload Aucun
$(document).ready(function(){}) $(function (){});
Dans les applications réelles, nous utilisons rarement window.onload directement car il doit attendre que des éléments volumineux tels que des images soient chargés avant d'exécuter du code JS. Si la vitesse du réseau est lente, la page a été entièrement développée. , et les images se chargent toujours lentement. À l'heure actuelle, toutes les fonctions interactives JS sur la page sont dans un état d'animation suspendue, comme certains menus déroulants, etc.
section suivante