Comment définir les propriétés et les styles dans Jquery

Méthode pour définir les attributs : utilisez attr(), syntaxe "attr(attribute, value)". Méthodes pour définir les styles : 1. Utilisez addClass(), la syntaxe est "addClass(class name)" 2. Utilisez css(), la syntaxe est "css("property name", "style value")".

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.2.1, ordinateur Dell G3 Cette méthode convient à toutes les marques d'ordinateurs.

Méthode Jquery de définition des attributs et des styles :

1 Obtention et définition des attributs Jquery

//找到第一个input，通过attr设置属性value的值
$("input:first").attr('value','新设值');
//同时为多个属性赋值
$("input:first").attr({'attr1':'v1','attr2':'v2'...});
//找到最后一个input，通过使用removeAttr删除属性
$("input:last").removeAttr('value');
//得到.first-div内的文本，并以此来设置最后一个p内的文本
$('p:last').text( $(".first-div").text() )
//.html() 不传入值，就是获取.first-div类的HTML内容，不仅仅是文本
//.html( htmlString ) 用之前得到的内容来设置第一个p标签的html内容
$('p:first').html( $(".first-div").html() ) ;
//.val()获取表单id为single元素的值
$("p").text( $("#single").val() );
//设置表单text字段内的值
$("input[type='text']").val('修改表单的字段')

.html() , .text(),.val()Les trois méthodes sont toutes utilisées pour lire le contenu de l'élément sélectionné, sauf que .html() est utilisé pour lire le contenu html de l'élément (y compris les balises html) et .text() l'est. utilisé pour lire le contenu en texte brut de l'élément, y compris ses éléments enfants. .val() est utilisé pour lire la valeur "value" de l'élément de formulaire. Parmi elles, les méthodes .html() et .text() ne peuvent pas être utilisées sur des éléments de formulaire, et .val() ne peuvent être utilisées que sur des éléments de formulaire en plus, lorsque la méthode .html() est utilisée sur plusieurs éléments ; seul le premier est lu ; la méthode .val() est la même que .html() Si elle est appliquée à plusieurs éléments, seule la valeur "value" du premier élément du formulaire est lue, mais .text(. ) est différent d'eux. Si Lorsque .text() est appliqué à plusieurs éléments, le contenu textuel de tous les éléments sélectionnés sera lu.

.html(htmlString), .text(textString) et .val(value) sont tous utilisés pour remplacer le contenu de l'élément sélectionné. Si les trois méthodes sont utilisées sur plusieurs éléments en même temps, tous les éléments sélectionnés seront remplacés. contenu. .html(), .text() et .val() peuvent tous utiliser la valeur de retour de la fonction de rappel pour modifier dynamiquement le contenu de plusieurs éléments.

2. JQuery ajoutant et supprimant des styles

//为class=left下的div元素增加一个新样式
$('.left div').addClass('newClass')
//找到所有的div，然后通过addClass函数增加类名
$("div").addClass(function(index,className) {
 //找到类名中包含imooc的元素，为其添加类名
 if(-1 !== className.indexOf('imooc')){    
  $(this).addClass('imoocClass') //this指向匹配元素集合中的当前元素
 }
});
//class=left下div元素删除newClass样式
$('.left div').removeClass('newClass');
//如果该元素存在该类名就去除，否则就添加
$('.left div').toggleClass('newClass');
//获取class=first的字体大小样式值
$('p:eq(1)').text( $('.first').css("font-size"));
//获取一组属性值并返回为一个对象
var value = $('.first').css(['width','height']);
//通过对象访问到对应的值
document.write( "widht:" + value.width + " height:" +value.height) ;
//设置样式属性值
$('.fourth').css("background-color","red");
//设置多个属性值
$('.seventh').css({
 'font-size'  :"15px",
 "background-color" :"#40E0D0"
});

addClass et css sont tous deux utilisés pour faire fonctionner le style de page. Maintenabilité : l'essence de .addClass() est d'ajouter une ou plusieurs classes à un élément en définissant des règles de style pour une classe. La méthode CSS consiste à changer le style d'un élément via JavaScript. Grâce à .addClass(), nous pouvons définir des règles unifiées pour les mêmes éléments par lots, ce qui est plus pratique à modifier et peut être modifié et supprimé uniformément.

Si vous utilisez la méthode .css(), vous devez spécifier chaque élément à modifier un par un, ce qui est plus gênant. Flexibilité : il est facile de modifier dynamiquement les attributs d'un élément spécifique via la méthode .css(), sans avoir besoin de définir de manière fastidieuse une règle de classe. De manière générale, lorsque les règles de mise en page ne sont pas déterminées et que la structure du code HTML est générée dynamiquement, elle est traitée via la méthode .css(). Valeur de style : l'essence de .addClass() sert uniquement à ajouter et à supprimer des classes. Il ne peut pas obtenir la valeur de l'attribut du style spécifié. .css() peut obtenir la valeur de style spécifiée. Priorité des styles : les styles CSS ont des priorités. Lorsque la même règle de style de style externe, de style interne et de style en ligne est appliquée simultanément au même élément, la priorité est la suivante : style externe < . La méthode

.addClass() consiste à ajouter le nom de la classe, puis ce style est d'abord défini dans un fichier externe ou un style interne, et est attaché à l'élément si nécessaire, via la méthode .css(). Il traite avec des styles en ligne. Les attributs de style définis par la méthode .css qui sont directement attachés à l'élément via l'attribut style de l'élément ont une priorité plus élevée que la méthode .addClass()

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

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!