jQuery 클래스 이름 선택기(.class) 사용 방법에 대한 자세한 설명

이번에는 jQuery 클래스 이름 선택기(.class) 사용 방법에 대해 자세히 설명합니다. jQuery 클래스 이름 선택기(.class) 사용 시 주의사항은 무엇인가요? .

1. 소개

클래스 이름 선택기는 해당 요소가 소유한 CSS 클래스 이름으로 일치하는 DOM 요소를 찾습니다.

한 페이지에서 요소는 여러 CSS 클래스를 가질 수 있으며, CSS 클래스는 여러 요소와 일치할 수 있습니다. 요소에 일치하는 클래스 이름이 있으면 클래스 이름 선택기로 선택할 수 있습니다.

클래스 이름 선택기는 대부분의 사람들이 대학에 다닐 때 과목을 선택했을 것입니다. CSS 클래스 이름은 학생으로서 여러 과목을 선택할 수 있으며 하나의 과목은 다음과 같습니다. 여러 학생이 선택할 수 있습니다.

CSS 클래스와 요소 간의 관계는 다대다 관계, 일대다 또는 다대일 관계일 수 있습니다. 간단히 말해서 클래스 이름 선택기는 요소의 CSS 클래스 이름을 기반으로 일치하는 요소를 찾는 것입니다.

클래스 이름 선택기는 다음과 같이 사용됩니다.

$(".class");

여기서 class는 요소를 쿼리하는 데 사용되는 CSS 클래스 이름입니다.

예를 들어 CSS 클래스 이름 word_orange를 사용하여 요소를 쿼리하려면 다음 jQuery 코드를 사용할 수 있습니다.

$("word_orange");

2. 애플리케이션

페이지에서 먼저 두 개의

그 중 하나는 CSS 클래스를 설정한 다음 jQuery의 클래스 이름 선택기를 통해 CSS 클래스가 설정된

태그를 선택하고 CSS 스타일을 설정합니다.

3. 코드

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p class="myClass">注意观察我的样式</p>
<p>我的样式是默认的</p>
<script type="text/javascript">
$(document).ready(
function()
{
  var myClass = $(".myClass");   //选取DOM元素
  myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
  myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
});
</script>

4. 실행 효과

5. 실행 지침

위 코드에서는 하나만

태그는 CSS 클래스 이름을 설정하지만 프로그램에는 myClass라는 CSS 클래스가 없으므로 이 클래스에는 속성이 없습니다.

클래스 이름 선택기는 myClass라는 jQuery 패키징 세트를 반환합니다. css() 메서드를 사용하여 해당 p 요소에 대한 CSS 속성 값을 설정합니다. 여기서 요소의 배경색은 진한 빨간색으로 설정되고 텍스트 색상은 설정됩니다. 흰색으로.

여러 요소가 동일한 CSS 스타일을 가질 수 있으므로 클래스 이름 선택기는 jQuery 래퍼 세트를 얻을 수도 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue 동적으로 바인딩된 구성 요소 하위 상위 구성 요소 다중 형식 유효성 검사 구현 단계 자세한 설명

jQuery 요소 선택기 사용 사례 자세한 설명

위 내용은 jQuery 클래스 이름 선택기(.class) 사용 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!