jquery 클래스 선택기는 무엇을 반환합니까?-프런트엔드 Q&A-php.cn

jquery 클래스 선택기는 무엇을 반환합니까?

青灯夜游

풀어 주다： 2022-11-21 19:17:18

원래의

1898명이 탐색했습니다.

jquery에서 클래스 선택기는 지정된 클래스 값을 가진 모든 요소를 선택하는 데 사용됩니다. 구문은 클래스 속성이 사용하는 모든 클래스 요소를 포함하는 jquery 컬렉션 개체를 반환할 수 있습니다. 여러 HTML 요소에 특정 스타일을 설정하는 경우 일부 브라우저에서 문제를 방지하려면 숫자로 시작하는 클래스 속성을 사용하지 않는 것이 가장 좋습니다.

jquery 클래스 선택기는 무엇을 반환합니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6.1 버전, Dell G3 컴퓨터.

jquery에서 클래스 선택기는 지정된 클래스가 있는 모든 요소를 선택하는 데 사용됩니다.

jquery 클래스 선택기

class는 HTML 요소의 클래스 속성을 나타냅니다. class 속성은 여러 HTML 요소에 대한 특정 스타일을 설정하는 데 사용됩니다.

참고: 숫자로 시작하는 클래스 속성을 사용하지 마세요! 이로 인해 일부 브라우저에서는 문제가 발생할 수 있습니다.

클래스 선택기 구문:

$(".class")

로그인 후 복사

반환 값: 지정된 모든 클래스 요소를 포함하는 jquery 컬렉션 개체입니다.

클래스 선택기 사용 예

1. 단일 클래스 선택기

클래스 선택기를 사용하여 Class="myClass1"인 요소를 선택하고 숨깁니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript" >    
        $(function(){
           $("button").click(function(){
                $(".myClass1").hide();
            });
        });
    </script>
</head>
<body>
    <button type="button">点击</button>
    <p>p元素1</p>
    <p>p元素2</p>
    <div id="myDiv1">Hello</div>
    <div Class="myClass1">你好</div>
</body>
</html>

로그인 후 복사

jquery 클래스 선택기는 무엇을 반환합니까?

2. 다중 클래스 선택기

클래스가 "intro", "demo" 또는 "end"와 동일한 모든 요소 선택:

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$(".intro, .demo, .end").css("background-color", "yellow");
			});
		</script>
	</head>
	<body>
		<h2>欢迎来到我的主页</h2>
		<p class="intro">这个段落的 class 为 "intro".</p>
		<p>这是一个段落</p>
		<p class="demo">这个段落的 class 为 "demo".</p>
		<p>这是另一个段落</p>
		<p class="end">这个段落的 class 为 "end".</p>
	</body>
</html>

로그인 후 복사

jquery 클래스 선택기는 무엇을 반환합니까?