Detailed explanation of how to use jQuery class name selector (.class)

This time I will bring you a detailed explanation of how to use the jQuery class name selector (.class). What are the precautions when using the jQuery class name selector (.class). The following is a practical case. Get up and take a look.

1. Introduction

The class name selector finds matching DOM elements by the name of the CSS class owned by the element.

In a page, an element can have multiple CSS classes, and a CSS class can match multiple elements. If there is a matching class name in an element, it can be selected by the class name selector. .

The class name selector is easy to understand. Most people must have chosen courses when they were in college. The CSS class name can be understood as the course name, and the elements can be understood as students. Students can choose multiple courses, and A course can be chosen by multiple students.

The relationship between CSS classes and elements can be a many-to-many relationship, a one-to-many or many-to-one relationship. Simply put, the class name selector is to find matching elements based on the CSS class name of the element.

The class name selector is used as follows:

$(".class");

where class is the CSS class name used to query the element.

For example, to query for elements using the CSS class name word_orange, you can use the following jQuery code:

$("word_orange");

2. Application

In the page, first add two

tags, and set the CSS class for one of them, then select the

tag with the CSS class set through jQuery's class name selector, and set its CSS styles.

3. Code

<script></script>
<p>注意观察我的样式</p>
<p>我的样式是默认的</p>
<script>
$(document).ready(
function()
{
  var myClass = $(".myClass");   //选取DOM元素
  myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
  myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
});
</script>

4. Running effect

##5. Operation instructions

In the above code, CSS is only set for one of the

tags Class name, but since there is no CSS class named myClass in the program, this class does not have any attributes.

The class name selector will return a jQuery packaging set named myClass. The

css() method can be used to set the CSS attribute value for the corresponding p element. Here, the background color of the element is Set to dark red and text color to white.

The class name selector may also obtain a set of jQuery wrappers, because multiple elements can have the same CSS style.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement multi-form verification of vue dynamic binding components, child and parent components

jQuery element selection Detailed explanation of server use cases

The above is the detailed content of Detailed explanation of how to use jQuery class name selector (.class). For more information, please follow other related articles on the PHP Chinese website!