JQuery's method of implementing style setting, appending, removing and switching_jquery

The examples in this article describe how JQuery implements style setting, appending, removing and switching. Share it with everyone for your reference. The specific analysis is as follows:

With JQuery, the style operation of elements will become very simple. Let's take a look at how to use JQuery to obtain, set, append, delete and other operations on element styles.

Getting and setting styles

Both getting class and setting class can be done using the attr() method. For example, use the attr() method to get the class of the p element. The JQuery code is as follows:

var p_class = $("p").attr("class");
//获取p元素的class

Use the attr() method to set the class of the p element. The JQuery code is as follows:

$("p").attr("'class", "high");
//设置p元素的class为 "high"

In most cases, it replaces the original class with a new class instead of appending a new class to the original one.

Add style

What is additional class? If the original class of the p element is myClass, then after adding a class named high, the class attribute becomes "myClass high", which is the superposition of the two styles myClass and high. JQuery provides a special addClass() method to add styles. To make the example easier to understand, first add another set of styles in the style tag:

.high{ color:red; }
.another{ font-style:italic; color:blue; }

Then add an "Append class" button to the web page. The event code of the button is as follows:

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

Finally, when you click the "Append class" button, the p element style will change to italic, and the previous red font will also change to blue. At this time, the p element has two class values ​​at the same time, namely "high" and "another". There are the following two provisions in CSS.

1. If multiple class values ​​are added to an element, it is equivalent to merging their styles.
2. If different classes set the same style attribute, the latter overrides the former.

In the above example, it is equivalent to adding the following style to the p element:

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

In the above style, there are two "color" attributes, and the latter "color" attribute will overwrite the previous "color" attribute, so the final "color" attribute value is "blue" instead of " red".

Remove style

If the user wants to delete a certain value of the class when he clicks a button, he can use the removeClass() method, which is the opposite of the addClass() method. Its function is to delete all or specified elements from the matching elements. class. For example, you can use the following JQuery code to delete the class with the value "high" in the p element:

$("p").removeClass("high");
//移除p元素中值为"high"的class

If you want to delete both classes of the p element, you need to use the removeClass() method twice. The code is as follows:

Copy code The code is as follows:

$("p").removeClass("high").removeClass("another ");

JQuery provides an easier way. Multiple class names can be deleted with spaces. The code is as follows:

Copy code The code is as follows:

$("p").removeClass("high another");

In addition, you can also use a feature of the removeClass() method to achieve the same effect. When it takes no parameters, all class values ​​will be deleted. The JQuery code is as follows:

$("p").removeClass();
//移除p元素的所有class

Switch style

There is a method toggle() in JQuery. The JQuery code is as follows:

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

The function of the

toggle() method here is to alternately execute the two functions of code ③ and code ④. If the element is originally displayed, then hide it: if the element is originally hidden, then display it. At this time, the toggle() method mainly controls repeated switching of behaviors.

In addition, JQuery also provides a toggleClass() method to control repeated switching of styles. Removes the class name if it exists, adds it if the class name does not exist. For example, perform the toggleClass() method on the p element.

$("p").toggleClass("another");
//重复切换类名“another”

When the "Switch Style" button is continuously clicked, the value of the class of the p element will repeatedly switch between "myClass" and "myClass another".

Determine whether a certain style is included

hasClass() can be used to determine whether an element contains a certain class. If so, it returns true, otherwise it returns false. For example, you can use the following code to determine whether the p element contains the class "another":

Copy code The code is as follows:

$("p").hasClass("another");

This method is produced to enhance the readability of the code. Inside JQuery, the is() method is actually called to complete this function. This method is equivalent to the following code:

Copy code The code is as follows:

$("p").is(".another");//is ("." class);

I hope this article will be helpful to everyone’s jQuery programming.