Comment utiliser la requête d'attribut dans jquery

jQuery est une bibliothèque JavaScript largement utilisée pour manipuler le HTML et le CSS DOM et fournit de nombreuses fonctions utiles. L'une de ces fonctionnalités consiste à utiliser des requêtes d'attributs pour obtenir ou définir les valeurs d'attribut d'un élément.

La requête d'attribut est un sélecteur qui accepte un nom d'attribut et une valeur d'attribut facultative comme paramètres. Elle renverra tous les éléments avec l'attribut spécifié. Ce qui suit est un exemple simple montrant comment utiliser le sélecteur d'attribut de jQuery :

// 获取所有带有'data-role'属性的div元素
var divs = $('div[data-role]');

// 获取所有标签名为'a', 并且target属性值等于'_blank'的a元素
var links = $('a[target="_blank"]');

Dans les deux exemples ci-dessus, la fonction $() est utilisée pour créer un objet jQuery et le paramètre passé est un sélecteur CSS . Parmi ces sélecteurs CSS, les sélecteurs d'attributs sont définis à l'aide de crochets. Par exemple, [data-role] correspond à tous les éléments avec l'attribut 'data-role', tandis que [target="_blank"] ne correspondra qu'aux éléments avec une valeur d'attribut cible égale à '_blank'.

Vous pouvez utiliser les opérateurs et valeurs suivants​​pour effectuer des requêtes d'attributs :

• = : faire correspondre les éléments avec valeurs des attributs spécifiés. Par exemple, [target="_blank"] représente un élément dont la valeur de l'attribut cible est « _blank ». =: 匹配指定属性值相等的元素。例如，[target="_blank"]表示目标属性值为'_blank'的元素。
• !=: 匹配指定属性值不等于的元素。例如，[type!="text"]表示除了类型为'text'的输入框以外的所有元素。
• ^=: 匹配指定属性值以给定值开头的元素。例如，[href^="https://"]将匹配所有'https://'开头的超链接。
• $=: 匹配指定属性值以给定值结尾的元素。例如，[href$=".pdf"]会匹配所有PDF文件的链接。
• *=
!= : correspond aux éléments dont la valeur d'attribut spécifiée n'est pas égale à. Par exemple, [type!="text"] désigne tous les éléments à l'exception des zones de saisie de type « texte ».

^= : correspond aux éléments dont la valeur d'attribut spécifiée commence par la valeur donnée. Par exemple, [href^="https://"] correspondra à tous les hyperliens commençant par « https:// ».

$= : correspond aux éléments dont la valeur d'attribut spécifiée se termine par la valeur donnée. Par exemple, [href$=".pdf"] fera correspondre les liens vers tous les fichiers PDF.

*= : correspond aux éléments dont la valeur d'attribut spécifiée contient la chaîne donnée. Par exemple, [class*="active"] correspondra à tous les éléments de classe « active ».

En plus d'utiliser des sélecteurs d'attributs, vous pouvez également utiliser la méthode .attr() pour obtenir ou définir la valeur de l'attribut d'un élément. Cette méthode accepte un nom de propriété et une nouvelle valeur de propriété facultative comme paramètres. Si aucune nouvelle valeur de propriété n'est spécifiée, la valeur de propriété actuelle est renvoyée. #🎜🎜##🎜🎜#Ce qui suit est un exemple qui montre comment utiliser la méthode .attr() pour obtenir et définir la valeur d'attribut d'un élément : #🎜🎜#

// 获取第一个图片元素的alt属性值
var altText = $('img:first').attr('alt');

// 设置第一个图片元素的alt属性值为'图片描述'
$('img:first').attr('alt', '图片描述');

#🎜🎜#Dans cet exemple, l'attr () est utilisée pour obtenir ou définir l'attribut alt du premier élément de l'image. Tout d'abord, nous sélectionnons le premier élément de l'image à l'aide du sélecteur $('img:first'). Ensuite, utilisez la méthode .attr('alt') pour obtenir la valeur de son attribut alt et enregistrez-la dans la variable altText. Ensuite, nous transmettons une nouvelle valeur d'attribut « description de l'image » à la méthode .attr() pour définir la nouvelle valeur d'attribut alt. #🎜🎜##🎜🎜#En bref, la requête d'attribut est l'un des sélecteurs les plus couramment utilisés dans jQuery, qui est utilisé pour sélectionner des éléments avec des valeurs d'attribut spécifiques. De plus, la méthode .attr() peut également être utilisée pour obtenir ou définir la valeur d'attribut d'un élément. Ces fonctions sont très pratiques et peuvent grandement simplifier le fonctionnement des documents, rendant la programmation JavaScript plus facile et plus pratique. #🎜🎜#

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!