How to set properties and styles in Jquery

Method to set attributes: use attr(), syntax "attr(attribute, value)". Method of setting style: 1. Use addClass(), the syntax is "addClass(class name)"; 2. Use css(), the syntax is "css("property name", "style value")".

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer. This method is suitable for all brands of computers.

Methods for Jquery to set properties and styles:

1. Obtaining and setting Jquery properties

//找到第一个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()The three methods are all used to read the content of the selected element; only .html() is used to read the html content of the element (including html tags), .text() is used to read the plain text content of the element, including its sub-elements, and .val() is used to read the "value" value of the form element . Among them, the .html() and .text() methods cannot be used on form elements, and .val() can only be used on form elements; in addition, when the .html() method is used on multiple elements, only the first one is read. elements; the .val() method is the same as .html(). If it is applied to multiple elements, only the "value" value of the first form element is read, but .text() is different from them. If When .text() is applied to multiple elements, the text content of all selected elements will be read.

.html(htmlString), .text(textString) and .val(value) are all used to replace the selection The content of the element. If the three methods are applied to multiple elements at the same time, the content of all selected elements will be replaced. .html(), .text(), and .val() can all use the return value of the callback function to dynamically change the content of multiple elements.

2. JQuery adding and deleting 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 and css are both used to operate page styles , compare the two. Maintainability: The essence of .addClass() is to add one or more classes to an element by defining style rules for a class. The css method is to change the style of an element through JavaScript. Through .addClass(), we can set unified rules for the same elements in batches, which is more convenient to change and can be modified and deleted uniformly.

If you use the .css() method, you need to specify each element to modify one by one, which is more troublesome. Flexibility: It is easy to dynamically change the attributes of a specific element through the .css() method, without the need to cumbersomely define a class rule. Generally speaking, when the layout rules are not determined and the HTML code structure is dynamically generated, it is processed through the .css() method. Style value: The essence of .addClass() is only for adding and deleting classes. It cannot obtain the value of the attribute of the specified style. .css() can obtain the specified style value. Priority of styles: CSS styles have priorities. When the same style rule of external style, internal style and inline style is applied to the same element at the same time, the priority is as follows: external style

.addClass()The method is to add the class name, then this style is defined in an external file or internal style first, and is attached to the element when needed. , inline styles are processed through the .css() method, and the style attributes set through the .css method that are directly attached to the element through the element's style attribute have a higher priority than the .addClass() method

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to set properties and styles in Jquery. For more information, please follow other related articles on the PHP Chinese website!