Démarrez rapidement avec jQuery en une heure

Ce tutoriel se concentre sur la partie connaissances théoriques, et la partie pratique sera mise à jour ultérieurement (en combinaison avec mon projet de fin d'études !!!)

objet jQuery

Objet Dom

• Objet élément obtenu via js

objet jQuery

• L'objet élément obtenu via la méthode jQuery renvoieensemble d'encapsuleurs jQuery

Lorsque vous utilisez jQuery, assurez-vous d'introduire d'abord le fichier jQuery

Objet Dom en objet jQuery

• Incluez-le simplement avec $

  var Domdiv=document.getElementById("div");
  var divjQuery=$(Domdiv);
  

Convertir un objet jQuery en objet Dom

• Récupérez simplement l'élément avec l'indice spécifié dans l'ensemble d'emballage

  var div=divjQuery[0];
  

sélecteur jQuery

Sélecteur de base

sélecteur d'identifiant

var div=$("#div");//选择指定id的元素对象

Sélecteur de nom d'élément

var div=$("div");//选择指定标签的元素对象

sélecteur de classe

var div=$(".div");//选择指定class的元素对象

Sélecteur universel

var all=$("*");//选择所有元素对象

Sélecteur de combinaison

var divs=$("#div1,#div2,#div3");//选择指定选择器的元素对象

Sélecteur de hiérarchie

sélecteur de descendants

var div=$("#parent div");//选择id为parent的父元素的所有（包含第一代，第二代等）div元素

sélecteur de descendants

var div=$("#parent>div");//选择id为parent的直接（第一代）div子元素

sélecteur adjacent

var div=$(".parent+div");//选择css类为parent的下一个div元素（只会查找下一个元素，如果元素不存在，则获取不到）

Sélecteur de pairs

var div=$(".parent~div");//选择css类为parent的之后的div元素（选择元素下面的所有指定元素）

sélecteur de formulaire

sélecteur de formulaire

$(":input");//查找所有input元素

sélecteur de texte

$(":text");//查找所有文本框

Sélecteur de boîte de mot de passe

$(":password");//查找所有密码框

sélecteur de bouton radio

$(":radio");//查找所有单选按钮

Sélecteur de case à cocher

$(":checkbox");//查找所有复选按钮

Sélecteur du bouton Soumettre

$(":submit");//查找所有提交按钮

Sélecteur de domaine d'image

$(":image");//查找所有图像域

sélecteur de bouton de réinitialisation

$(":reset");//查找所有重置按钮

bouton de sélection

$(":button");//查找所有按钮

Sélecteur de champ de fichier

$(":file");//查找所有文件域

Manipuler les attributs des éléments

Classification des attributs

Attributs intrinsèques : identifiant, nom, classe, style

Attributs booléens lors du renvoi d'une valeur : coché, sélectionné, désactivé

Attributs personnalisés : attributs définis par l'utilisateur

Si le type de l'attribut est booléen, utilisez la méthode prop(), sinon utilisez la méthode attr()

Obtenir des propriétés

attr("属性名");
prop("属性名");

la différence

• S'il s'agit d'un attribut inhérent, les méthodes attr() et prop() peuvent l'obtenir.
• S'il s'agit d'un attribut personnalisé, attr() peut être obtenu, mais prop() ne peut pas être obtenu.
• Si la valeur de retour est un attribut de type booléen
  • Si l'attribut est défini, attr() renvoie la valeur spécifique et prop() renvoie true
  • Si l'attribut n'est pas défini, attr() renvoie undefined et prop() renvoie false.

Définir les propriétés

attr("属性名","属性值");
prop("属性名","属性值");

Supprimer des attributs

removeAttr("属性名");

Manipuler le style de l'élément

attr("class");//获取元素的样式名
attr("class","样式名");//设置元素的样式,原本的样式会被覆盖
addClass("样式名");//添加样式,原本样式保留，出现相同样式，以后定义的为准
css();//添加具体的样式(行内样式)
//css("具体样式名","样式值")
//css({"具体样式名":"样式值","具体样式名":"样式值"})
removeClass("样式名");//移除样式

Manipuler le contenu de l'élément

html()//获取元素的内容，包含html标签（非表单元素）
html("内容")//设置元素的内容，包含html标签（非表单元素）
text()//获取元素的纯文本内容，不识别HTML标签（非表单元素）
text("内容")//设置元素的纯文本内容，不识别HTML标签（非表单元素）
val()// 获取元素的值(表单元素)
val("值")// 设置元素的值(表单元素)

Créer un élément

$("<p>添加元素</p>");

Ajouter un élément

prepend(content);//在被选元素内部的开头插入元素或内容，被追加的content参数。可以是字符，HTML元素标记
$(content).prependTo(selector);//把content元素或内容加入selector元素内部开头
append(content);//在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符，HTML元素标记
$(content).appendTo(selector);//把content元素或内容插入selector元素内，默认是在尾部
before();//在元素前插入指定的元素或内容:$(selector).before(content)
after();//在元素后插入指定的元素或内容:$(selector).after(content)

Lors de l'ajout d'un élément, si l'élément lui-même n'existe pas (un nouvel élément), l'élément sera ajouté à la position spécifiée.

Si l'élément lui-même existe (a déjà un élément), l'élément d'origine sera directementcouperDéfinir à l'emplacement spécifié

Supprimer l'élément

var div=$("div");
div.remove();//删除所选元素或指定的子元素，包括整个标签和内容一起删
div.empty();//清空所选元素的内容,保留标签

Éléments de traverse

$(selector).each(function(index,element));//遍历元素

La fonction paramètre est la fonction de rappel pendant le parcours

index est le numéro de séquence de l'élément parcouru, à partir de 0

element est l'élément actuel, qui est l'élément dom à ce moment

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<script>
    $("span").each(function(index,element){
      
      
        console.log(index);
        console.log(element);
        console.log(this);
    })
</script>

événements jQuery

événement de chargement prêt

• événement de préchargement
• Exécuté lorsque la structure DOM de la page est chargée.
• Semblable à l'événement de chargement dans js
• événement prêtVous pouvez écrire plusieurs

Principalement pour résoudre les caractéristiques d'exécution séquentielle du HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jquery-3.6.3.js" type="text/javascript"></script>
    <title>Document</title>
  <script>
      console.log($("div"));//此处会报错
  </script>
  </head>
  <body>
    <div id="mydiv">文本</div>
  </body>
</html>

$(document).ready(fuction(){
    
    
           console.log($("div")); 
                  });
//简写 
$(function(){
    
    
     console.log($("div"));
});

événement de liaison bind()

Ajoutez un ou plusieurs gestionnaires d'événements à l'élément sélectionné et spécifiez une fonction à exécuter lorsque l'événement se produit

$(selector).bind(eventType [, eventData], handler(eventObject));

eventType : un type d'événement de type chaîne, qui est l'événement que vous devez lier

[, eventData] : paramètres passés, format : {nom : valeur, nom2 : valeur2}

handler(eventObject) : La fonction déclenchée par l'événement

• Lier un seul événement

  • lier lier

    $("Élément").bind("Type d'événement",fonction(){

    });

  • liaison directe

    $("Élément").Nom de l'événement(fonction(){

    });

• Lier plusieurs événements

  • lier lier

    • Lier la même fonction à plusieurs événements en même temps

      Spécifiez element.bind("Type d'événement 1 Type d'événement 2 Type d'événement 3", function(){

      });

    • Liez plusieurs événements à des éléments et définissez les fonctions correspondantes

      Spécifiez element.bind("Type d'événement 1", function(){

      }).bind("Type d'événement 2", function(){

      });

    • Liez plusieurs événements à des éléments et définissez les fonctions correspondantes

      Spécifiez element.bind({

      "Type d'événement":fonction(){

      },

      "Type d'événement":fonction(){

      }

      });

  • liaison directe

    Spécifiez l'élément.Nom de l'événement (fonction(){

    }).Nom de l'événement(function(){

    });

jQueryAjax

Une technologie asynchrone sans rafraîchissement

Chargez des données distantes via des requêtes HTTP.

jQuery sous-jacent à l’implémentation AJAX. Pour des implémentations de haut niveau simples et faciles à utiliser, voir $.get, $.postetc.\_\_\_$.ajax() renvoie l'objet XMLHttpRequest qu'il a créé. Dans la plupart des cas, vous n'aurez pas besoin de manipuler cette fonction directement, sauf si vous devez manipuler des options moins couramment utilisées pour plus de flexibilité.

$.ajax

jquery appelle l'utilisation d'ajax :

Format : $.ajax({});

paramètre:

​ type : Méthode de requête GET/POST

url : URL de l'adresse de la demande

​ async : s'il faut être asynchrone, la valeur par défaut est vraie, ce qui signifie asynchrone

data : données envoyées au serveur

dataType : le type de données qui devrait être renvoyé par le serveur

​ contentType : Définir le début de la requête

Succès : Cette fonction est appelée lorsque la demande réussit

​ erreur : Cette fonction est appelée lorsque la requête échoue

données.json

[
    {
    
    
        "userId":1,
        "userName":"zhangsan",
        "userAge":18
    },
    {
    
    
        "userId":2,
        "userName":"lisi",
        "userAge":19
    },
    {
    
    
        "userId":3,
        "userName":"wangwu",
        "userAge":20
    },
    {
    
    
        "userId":4,
        "userName":"zhaoliu",
        "userAge":21
    }
]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./jquery-3.6.3.js"></script>
    <title>Document</title>
  </head>
  <body>
    <button type="button" id="btn">查询数据</button>
  </body>
  <script>
    //点击按钮，发送Ajax请求，将数据显示到页面上
    $("#btn").click(function () {
      
      
      $.ajax({
      
      
        url: "data.json",
        type: "GET",
        dataType: "json", //将返回值自动封装成json对象
        //请求成功时调用的函数
        success: function (data) {
      
      
          console.log(data);
          //将字符串转化为json对象
          // var obj = JSON.parse(data);
          // console.log(obj);
          //Dom节点操作
          var ul = $("<ul></ul>");

          for (var i = 0; i < data.length; i++) {
      
      
            var user = data[i];
            var li = "<li>" + user.userName + "</li>";
            ul.append(li);
          }
          console.log(ul);
          $("body").append(ul);
        },
      });
    });
  </script>
</html>

$.obtenir

Fonctionnalité de requête GET simple pour remplacer le complexe $.ajax

Pas de fonction de rappel en cas d'échec

$.get("Adresse de demande", "Paramètres de demande", fonction (paramètre formel){

});

$.get("data.json",{
    
    },function(data){
    
    
    console.log(data);
})

$.post

$.post("Adresse de demande", "Paramètres de demande", fonction (paramètres formels) {

});

$.post("data.json",{
    
    },function(data){
    
    
    console.log(data);
})

$.getJSON

$.getJSON("Adresse de demande", "Paramètres de demande", fonction (paramètre formel) {

});

La méthode getJSON nécessite que le format des données renvoyées soit conforme au format json (chaîne json). Si les données renvoyées ne sont pas au format json, elles ne peuvent pas être obtenues.

$.getJSON("data.json",{
    
    },function(data){
    
    
    console.log(data);
})