Quelles sont les principales fonctions de jquery

Les principales fonctions de jquery sont : 1. Accéder aux parties du cadre de la page ; 2. Modifier les performances de la page ; 3. Modifier le contenu de la page ; 5. Ajouter une animation à la page ; Interaction asynchrone avec le serveur ; 7. Simplifier les opérations JavaScript courantes.

L'environnement d'exploitation de ce tutoriel : système Windows 10, jquery3.2.1, ordinateur Dell G3.

Quelles sont les principales fonctions de jquery ?

Les principales fonctions de jQuery

1 : Accéder à une partie du cadre de la page

jQuery simplifie grandement la méthode fixe du DOM obtenant un nœud ou un certain type de nœud sur la page

2 : Modifier les performances ; de la page

En raison de chaque navigateur prend en charge différemment la norme CSS3, de nombreux styles CSS3 ne sont donc pas bien reflétés. L'émergence de jQuery résout très bien ce problème. Il encapsule le code JavaScript afin que différents navigateurs puissent bien utiliser la norme CSS3.

3 : Modifier le contenu de la page

Grâce à l'API puissante et complète, jQuery peut facilement modifier le contenu de la page, et même le cadre de la page entière

4 : Répondre aux événements

Pas besoin de le faire ; prendre en compte les problèmes de compatibilité du navigateur, peut traiter les événements plus facilement ;

5 : Ajouter une animation à la page

La bibliothèque de jQuery fournit un grand nombre d'effets d'animation avec des paramètres personnalisables,

6 : Interaction asynchrone avec le serveur

jQuery fournit une un ensemble d'opérations liées à Ajax facilite grandement le développement et l'utilisation d'interactions asynchrones ;

7 : Simplifie les opérations JavaScript couramment utilisées

jQuery fournit de nombreuses fonctions supplémentaires pour simplifier les opérations JavaScript courantes, telles que les opérations sur les tableaux, les opérations itératives, etc. ;

jQuery Les fonctions de base de

jQuery encapsule les fonctions DOM, ce qui rend l'utilisation des fonctions DOM très simple et pratique. Qu'il s'agisse de l'acquisition d'éléments de page Web ou de « l'ajout, la suppression, la modification et la requête », cela a été encapsulé de manière plus humaine. Jetons un bref aperçu des fonctions de base de jQuery et de l'excellence de la conception jQuery.元 1. Obtenez l'élément de page Web

Le résultat de JQUERY est un objet

quelques méthodes de base

• $(document); // 选择整个文档对象
  $("#myId"); // 选择id = 'myId' 的元素
  $(".myClass"); // 选择class = 'myClass' 的元素
  $("div.myClass"); // 选择class = 'myClass' 的div元素
  $("input[name=first]"); // 选择name = 'first' 的 input 元素

expression unique jqury

• $("a:first"); // 选择网页中第一个a元素
  $("tr:odd"); // 选择表格中的奇数行
  $("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
  $("div:visible"); // 选择可见的div元素
  $("div:gt(2)"); // 选择所有的div元素，除了前3个
  $("div:animated"); // 选择当前处于动画状态的div元素

filtrer davantage l'objet de résultat de choix de D IV

• $("div").has("p"); // 选择包含p元素的div元素
  $("div").not(".myClass"); //选择class != 'myClass' 的div元素
  $("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
  $("div").first(); // 选择第1个div元素
  $("div").eq(5); // 选择第6个div元素

Sélectionnez d'autres éléments via div

• $("div").next("p"); // 选择div元素后面的第1个p元素
  $("div").parent(); // 选择div元素的父元素
  $("div").closest("from"); // 选择离div最近的from父元素
  $("div").children(); // 选择div的所有子元素
  $("div").siblings(); // 选择div同级的其他兄弟元素（不包括自己）

2. Opération en chaîne

La partie la plus louable de jQuery

jQuery peut effectuer des opérations de fonction continues sur le même objet

Exemple :

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

L'opération en chaîne est le fonctionnalité la plus pratique de jQuery, car chaque fois que jQuery exécute une opération de fonction, la valeur de retour est toujours l'objet jQuery de l'opération d'origine, vous pouvez donc directement continuer l'opération plus tard.

.end() méthode

.end() renvoie la valeur de retour à l'objet jQuery précédent

Exemple :

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

3. Ajoutez, supprimez, modifiez et vérifiez

1. nouvel élément : transmettre directement une chaîne conforme au format HTML dans jQuery

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素，用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

Copier l'élément

.clone()

Renvoie une copie clone de l'objet jQuery actuel

Y compris tous les éléments correspondants, les éléments subordonnés des éléments correspondants, et nœuds de texte

2 paramètres :

withDataAndEvents S'il faut copier les données et les événements de liaison de l'élément en même temps, la valeur par défaut est false

deepWithDataAndEvents S'il faut copier les données et les événements de liaison de tous les sous-éléments de l'élément élément en même temps, la valeur par défaut est la valeur du premier paramètre (withDataAndEvents)

2 Supprimer

Supprimer des éléments

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件，便于在重新插入文档时使用
.empty() 清空元素内容，但不删除该元素（即删除元素里面的所有节点）

3 Changer

Insérer/Déplacer des éléments

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

Les deux méthodes ci-dessus ont la même chose. effet

Mais leurs valeurs de retour sont différentes, respectivement $('div' ) et $('p'), il faut donc choisir en fonction des opérations ultérieures

Les deux autres méthodes d'insertion/déplacement d'éléments

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

4. Changez le contrôle en un getter/setter

La même fonction, en passant des paramètres Différents pour implémenter la fonction de changement/vérification

$("h1").html(); // html没有传参，实现取出h1的值
$("h1").html("Hello"); // html传参'Hello'，实现对h1进行赋值

Fonction de valeur/affectation commune jQuery

.html() vérifier/modifier le contenu html

.text() vérifier/modifier le contenu du texte

.attr() vérifier/modifier une certaine valeur de l'attribut

.width() Vérifier/modifier la largeur d'un élément

.heigth() Vérifier/modifier la hauteur d'un élément

.val() Vérifier/modifier la valeur d'un élément de formulaire

Remarque :

Si l'objet résultat contient plusieurs éléments, alors lors de l'attribution, les valeurs seront attribuées à tous les éléments lors de la prise du. value, seule la valeur du premier élément sera supprimée. L'exception est text(), qui supprime le contenu textuel de tous les éléments

Apprentissage recommandé : "

JQuery Video Tutorial

"

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!