De quelles parties se compose la structure syntaxique de jquery ?

La structure de la syntaxe jquery se compose de 3 parties : 1. Fonction d'usine "$()", qui recherchera et sélectionnera les éléments dans le document HTML en fonction des paramètres dans "()" et renverra l'objet jquery contenant les éléments 2 ; . Sélecteur , c'est-à-dire les paramètres de la fonction d'usine "()" ; 3. Méthodes intégrées (fonctions), utilisées pour faire fonctionner la fonction sélectionnée.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

L'instruction jQuery contient principalement trois parties : $(), document et action() sont appelés respectivement fonction d'usine, sélecteur et méthode.

Syntaxe :

 $(selector).action();

• sélecteur sélecteur

$（selector）

• méthode action()

jQuery对象.addClass（[样式名]）

$() en jquery

dans jQuery $ signifie acquisition, ce qui est équivalent à document.getElemenById("id name") bien sûr, c'est aussi équivalent à document.getElementsByClassName("class name") ; a le même sens. $代表获取的意思，相当于document.getElemenById("id名")；当然，也相当于document.getElementsByClassName("class名")等等同上道理。

$符号主要是用于获得元素对象，通过获取对象，才能使用jquery方法对其进行操作。

$其实就是jQuery的别称，指的就是jQuery对象，而jQuery就是jQuery库提供的一个函数

这个函数的作用是根据 () 里的参数进行查找和选择html文档中的元素， 函数作用之一就是GetElementByID的代替，但()内不仅可以是ID，还可以是各类选择器

比如：

$(document)

Le symbole $ est principalement utilisé pour obtenir des objets élément. En obtenant l'objet, vous pouvez utiliser les méthodes jquery pour le faire fonctionner.

$ est en fait un autre nom pour jQuery, qui fait référence à l'objet jQuery, et jQuery est une fonction fournie par la bibliothèque jQuery

La fonction de cette fonction est de rechercher et de sélectionner des éléments dans le document html en fonction des paramètres contenus. (). Les fonctions de la fonction One sont le remplacement de GetElementByID, mais () peuvent non seulement être des ID, mais aussi divers sélecteurs

Par exemple :

$(document) consiste à sélectionner le objet de document entier

Est-ce juste Vous pouvez utiliser $ à la place, non. Pour éviter les conflits de noms, la bibliothèque jQuery fournit des mécanismes supplémentaires pour donner aux fonctions jQuery des alias supplémentaires. Par exemple :

var jq = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Vous pouvez utiliser jq au lieu de jQuery et $ dans le code.

En termes simples, $ est l'objet jquery, $() est jQuery(), vous pouvez y passer des paramètres et sa fonction est d'obtenir des éléments.

Sélecteurs dans jquery

Les sélecteurs jQuery permettent des opérations sur des groupes d'éléments HTML ou des éléments individuels.

Les sélecteurs jQuery « recherchent » (ou sélectionnent) des éléments HTML en fonction de l'identifiant, de la classe, du type, des attributs, des valeurs d'attribut de l'élément, etc. Il est basé sur des sélecteurs CSS existants, en plus de certains sélecteurs personnalisés.

1.Sélecteur de base

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div")               　　　　   选择所有的div标签元素，返回div元素数组 
$(".myclass")          　　　　   选择使用myclass类的css的所有元素 
$("*")                 　　　　   选取所有元素。
$("#test,div,.myclass")  　　    选取多个元素。

2.Sélecteur hiérarchique

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素
$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素
$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")  
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.Sélecteur de filtrage de base

$("div:first")               　　选取所有<div>元素中第1个<div>元素
$("div:last")                   选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")        选取class不是myClass的<input>元素 
$("input:even")                 选取索引是偶数的<input>元素(索引从0开始) 
$("input:odd")                  选取索引是基数的<input>元素(索引从0开始) 
$("input:eq(2)")                选取索引等于2的<input>元素 
$("input:gt(4)")                选取索引大于4的<input>元素
$("input:lt(4)")                选取索引小于4的<input>元素
$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               选取正在执行动画的<div>元素  
$(":focus")                     选取当前获取焦点的元素

4.Sélecteur de filtrage de contenu

$("div:contains(&#39;Name&#39;)")       选取所有<div>中含有&#39;Name&#39;文本的元素 
　　
$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素 

$("div:has(p)")                 选取所有含有<p>元素的<div>元素 

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5. Sélecteur de filtrage de visibilité

　　　　$("div:hidden")                 选取所有不可见的<div>元素 

　　　　$("div:visible")                选取所有可见的<div>元素

6. Sélecteur de filtre d'attribut

$("div[id]")              　　　　选取所有拥有属性id的元素
$("input[name=&#39;test&#39;]")     　　 选取所有的name属性等于&#39;test&#39;的<input>元素 
 
$("input[name!=&#39;test&#39;]")  　　　　选取所有的name属性不等于&#39;test&#39;的<input>元素 
 
$("input[name^=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;开头的<input>元素 
$("input[name$=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;结尾的<input>元素 
$("input[name*=&#39;news&#39;]")        选取所有的name属性包含&#39;news&#39;的<input>元素 
$("div[title|=&#39;en&#39;]")           选取属性title等于&#39;en&#39;或以&#39;en&#39;为前缀(该字符串后跟一个连字符&#39;-&#39;)的<div>元素
$("div[title~=&#39;en&#39;]")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$=&#39;test&#39;]")     选取拥有属性id,并且属性title以&#39;test&#39;结束的<div>元素

7. Sélecteur de filtre d'élément enfant

$("div .one:nth-child(2)")       选取class为&#39;one&#39;的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素 

$("div span:last-child")         选取每个<div>中的最后一个<span>元素 

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8. Sélecteur de filtre d'attribut d'objet de formulaire

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素
$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素 
$("input :checked")              选取所有被选中的<input>元素 　　
$("select option:selected")      选取所有的select 的子元素中被选中的元素

9. est en jquery

Méthodes (fonctions) intégrées jquery, utilisées pour opérer sur des fonctions sélectionnéesPar exemple :

Méthodes pour exploiter directement les styles d'élémentsPropriétés CSScss()height()offset()position()scrollLeft()scrollTop()width()

Description
Définit ou renvoie l'attribut de style de l'élément correspondant.
Définit ou renvoie la hauteur de l'élément correspondant.
Renvoie la position du premier élément correspondant par rapport au document.
Renvoie la position du premier élément correspondant par rapport à l'élément parent.
Définissez ou renvoyez le décalage de l'élément correspondant par rapport au côté gauche de la barre de défilement.
Définissez ou renvoyez le décalage de l'élément correspondant par rapport au haut de la barre de défilement.

Définit ou renvoie la largeur de l'élément correspondant.

Méthodes pour manipuler indirectement les styles d'élémentsDans jquery, vous pouvez manipuler indirectement les styles d'éléments en manipulant les attributs des éléments. Méthode addClass()attr()prop()removeAttr()removeClass()toggleClass()

Description
Ajoute le nom de classe spécifié à l'élément correspondant.
Définissez ou renvoyez les attributs et les valeurs de l'élément correspondant.
Définissez ou retournez l'attribut/valeur de l'élément sélectionné
Supprimez l'attribut spécifié de tous les éléments correspondants.
Supprimez toutes les classes ou celles spécifiées de tous les éléments correspondants.

Ajoutez ou supprimez une classe de l'élément correspondant. 🎜🎜🎜🎜

Connaissances étendues :

Modèle DOM

Il existe de nombreux types différents de nœuds dans le DOM, généralement divisés en 3 types : les nœuds d'élément, les nœuds de texte et les nœuds d'attribut.

Objet DOM

En JavaScript, vous pouvez utiliser getElementsByTagName() ou getElementsById() pour obtenir des nœuds d'éléments. Le résultat est un objet DOM, qui peut utiliser des méthodes en JavaScript.

Objet jQuery

L'objet généré en encapsulant l'objet DOM avec jQuery peut utiliser les méthodes de jQuery.

Exemple : $("#title").html(); //Obtenir le code html dans l'élément avec l'identifiant du titre

[Équivalent à document.getElementsById("title").innerHTML]

jQuery objet et conversion mutuelle des objets DOM

1) Conversion des objets jQuery en objets DOM

①L'objet jQuery est un objet de type tableau, et l'objet DOM correspondant peut être obtenu via la méthode [index].

②Récupérez l'objet DOM correspondant via la méthode get(index).

2) Convertir l'objet DOM en objet jQuery

Vous devez utiliser la fonction $() pour envelopper l'objet DOM afin d'obtenir un objet jQuery.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

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!