Comment utiliser jQuery ? Que sont les sélecteurs jQuery ?-js tutoriel-php.cn

Comment utiliser jQuery ? Que sont les sélecteurs jQuery ?

青灯夜游

Libérer： 2018-11-13 10:39:38

avant

2182 Les gens l'ont consulté

Le contenu de cet article est de présenter comment utiliser jQuery ? Que sont les sélecteurs jQuery ? Faites comprendre à tout le monde l'utilisation de la bibliothèque de fichiers jQuery, l'utilisation de la syntaxe de base et le sélecteur jQuery. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Comment utiliser

La bibliothèque jQuery se trouve dans un fichier JavaScript, qui contient toutes les fonctions jQuery.

Lorsqu'une page Web doit utiliser jQuery, le fichier js de jQuery doit d'abord être introduit dans la page Web.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
</head>
<body>
</body>
</html>

Copier après la connexion

2. Syntaxe jQuery

La syntaxe jQuery consiste à sélectionner des éléments HTML et à effectuer certaines opérations sur les éléments sélectionnés. [Tutoriels vidéo associés recommandés : Tutoriel jQuery]

Forme de syntaxe de base :

 $(selector).action()

Copier après la connexion

Exemple :

$("p").hide()    // 隐藏所有 <p> 元素
$("#myInfo").hide() // 隐藏所有 id="myInfo" 的元素

Copier après la connexion

Écriture :

Toutes les fonctions jQuery sont situées dans une fonction document.ready. Comme indiqué ci-dessous.

Cela permet d'empêcher l'exécution du code jQuery avant que le document ne soit complètement chargé (prêt), c'est-à-dire que le DOM ne peut pas être manipulé tant que le DOM n'est pas chargé.

Si vous exécutez la fonction avant que le document ne soit complètement chargé, l'opération peut échouer.

    $(document).ready(function(){     
       // 代码部分写在这里     
    });

Copier après la connexion

peut également être abrégé comme suit :

   $(function(){         
      // 这里写代码         
   });

Copier après la connexion

Par exemple :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").html("Hello JQuery World");
                $("#myDiv1").css("background-color","green");
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <div id="myDiv1">Hello</div>
</body>
</html>

Copier après la connexion

3. Sélecteur de base

(1) Sélecteur d'élément : le sélecteur d'élément jQuery sélectionne les éléments en fonction du nom de l'élément.

Exemple : utilisez le sélecteur d'éléments pour sélectionner tous les éléments

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("p").hide();
            });
         
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

Copier après la connexion

(2) #id selector : le sélecteur jQuery #id sélectionne l'élément spécifié via l'attribut id de l'élément HTML .

L'identifiant de l'élément sur la page doit être unique, donc si vous souhaitez sélectionner le seul élément de la page, vous devez utiliser le sélecteur #id

Exemple : utilisez le # sélecteur d'identifiant pour sélectionner l'élément id="myDiv1 " pour le masquer.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $("#myDiv1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
</body>
</html>

Copier après la connexion

(3) .class selector : Le sélecteur de classe jQuery peut trouver des éléments via la classe spécifiée.

Exemple : Utilisez le sélecteur de classe pour sélectionner l'élément avec Class="myClass1" et masquez-le.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>

Copier après la connexion