So legen Sie Eigenschaften und Stile in Jquery fest

Methode zum Festlegen von Attributen: Verwenden Sie attr(), Syntax „attr(attribute, value)“. Methode zum Festlegen des Stils: 1. Verwenden Sie addClass(), die Syntax lautet „addClass(Klassenname)“; 2. Verwenden Sie css(), die Syntax lautet „css(„Eigenschaftsname“, „Stilwert“)“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.2.1-Version, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

So legen Sie Attribute und Stile in JQuery fest:

1. JQuery-Attribute abrufen und festlegen

//找到第一个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()Die drei Methoden werden alle zum Lesen des Inhalts des ausgewählten Elements verwendet, nur .html() wird zum Lesen des HTML-Inhalts des Elements (einschließlich HTML-Tags) verwendet, .text () wird verwendet, um den Klartextinhalt des Elements einschließlich seiner Unterelemente zu lesen, und .val() wird verwendet, um den Wert „value“ des Formularelements zu lesen. Unter diesen können die Methoden .html() und .text() nicht für Formularelemente verwendet werden, und .val() kann nur für Formularelemente verwendet werden. Außerdem kann die Methode .html() für mehrere Elemente verwendet werden. nur das erste Element wird gelesen. Die Methode .val() ist die gleiche wie .html(). Wenn sie auf mehrere Elemente angewendet wird, wird nur der Wert „value“ des ersten Formularelements gelesen, aber .text( ) unterscheidet sich davon. Wenn .text() auf mehrere Elemente angewendet wird, wird der Textinhalt aller ausgewählten Elemente gelesen. .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其子元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

2、JQuery添加与删除样式

//为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与css两个方法均用于操作页面样式，两者比较。可维护性：.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript改变元素的样式。通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。

如果通过.css()方法就需要指定每一个元素一一修改，比较麻烦。灵活性：通过.css()方式可以很容易动态的去改变具体一个元素的属性，不需要繁琐的定义一个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的。样式值：.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。样式的优先级：css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下：外部样式 < 内部样式 < 内联样式。

.addClass()

.html(htmlString), .text(textString) und .val(value) werden alle verwendet, um das ausgewählte Element zu ersetzen Werden drei Methoden gleichzeitig auf mehrere Elemente angewendet, wird der Inhalt aller ausgewählten Elemente ersetzt. .html(), .text() und .val() können alle den Rückgabewert der Rückruffunktion verwenden, um den Inhalt mehrerer Elemente dynamisch zu ändern.

2. JQuery-Stile hinzufügen und löschen

rrreee

addClass und css werden beide zum Bedienen von Seitenstilen verwendet. Wartbarkeit: Der Kern von .addClass() besteht darin, einem Element eine oder mehrere Klassen hinzuzufügen, indem Stilregeln für eine Klasse definiert werden. Die CSS-Methode besteht darin, den Stil eines Elements über JavaScript zu ändern. Durch .addClass() können wir einheitliche Regeln für dieselben Elemente in Stapeln festlegen, was bequemer zu ändern ist und einheitlich geändert und gelöscht werden kann. 🎜🎜Wenn Sie die Methode .css() verwenden, müssen Sie jedes zu ändernde Element einzeln angeben, was problematischer ist. Flexibilität: Mit der Methode .css() lassen sich die Attribute eines bestimmten Elements ganz einfach dynamisch ändern, ohne dass umständlich eine Klassenregel definiert werden muss. Wenn die Layoutregeln nicht bestimmt sind und die HTML-Codestruktur dynamisch generiert wird, wird sie im Allgemeinen über die Methode .css () verarbeitet. Stilwert: Der Kern von .addClass() besteht nur darin, Klassen hinzuzufügen und zu löschen. Der Wert des Attributs des angegebenen Stils kann nicht abgerufen werden. Priorität der Stile: Wenn dieselbe Stilregel aus externem Stil, internem Stil und Inline-Stil gleichzeitig auf dasselbe Element angewendet wird, lautet die Priorität wie folgt: externer Stil < . 🎜🎜Die Methode .addClass() dient zum Hinzufügen des Klassennamens. Anschließend wird dieser Stil zuerst in einer externen Datei oder einem internen Stil definiert und bei Bedarf über das CSS( angehängt. )-Methode verarbeitet Inline-Stile. Die von der .css-Methode festgelegten Stilattribute, die über das Stilattribut des Elements direkt an das Element angehängt werden, haben eine höhere Priorität als die .addClass()-Methode🎜🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜javascript 🎜( Video)🎜🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie Eigenschaften und Stile in Jquery fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!