jQuery 기본 선택기 (1)

기본 선택자

선택자를 사용할 때는 먼저 내부에 "$()"를 사용해야 합니다. CSS 규칙을 적용한 다음 jquery 개체를 반환합니다.

아래 그림과 같이 다음과 같은 간단한 선택기를 살펴보겠습니다.

먼저 다음 ID 선택기를 보세요

id 선택기를 사용하여 div 태그의 텍스트 색상을 변경합니다

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#dv').css("color","red");
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
</body>
</html>

CSS에서는 이렇게 작성합니다

#dv{

color: red; //스타일 추가

}

jquery에서는 동작 추가를 호출하는데, 이 동작을 스타일 추가라고 합니다. 🎜>

가장 간단한 선택자이자 가장 일반적으로 사용되는 선택자이기도 한 id 선택자입니다

요소 태그 이름 선택자에 대해 살펴보겠습니다

다음 코드를 보세요:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("div").css("color","#f60");
		})
	</script>
</head>
<body>
	<div>php 中文网</div>
	<div>php 中文网</div>
	<div>php 中文网</div>
</body>
</html>

위 코드를 보면 div 태그가 여러 개 있고 ID가 없으므로 요소 태그 선택기 $("요소 이름")를 사용해야 합니다. 동작

클래스 선택기

먼저 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".dv1").css("color","green");
		})
	</script>
</head>
<body>
	<div class="dv1">php 中文网</div>
	<div>php 中文网</div>
	<div class="dv1">php 中文网</div>
</body>
</html>

클래스 선택기를 사용하여 CSS 스타일을 작성할 때 .class 이름을 추가한 다음 style , 물론 jquery에서 $(".dv1")와 같이 작성해야 합니다. 동작

참고: ID가 페이지에 한 번만 표시되면 사용할 수 있습니다. 하지만 jquery를 사용하면 다음 사항이 적용되지 않습니다. 한 페이지에 여러 개의 ID가 나타나면 이는 개발자 프로그램의 엄격함이 부족한 것입니다.

따라서 개발자는 한 페이지만 잘 작성해야 합니다. id는 한 번만 나타날 수 있습니다.

ID는 단일 요소를 반환하고 요소 태그 이름과 클래스는 여러 요소를 반환한다는 것을 증명하기 위해 jquery를 사용할 수 있습니다. 반환된 요소 수를 확인하기 위해 속성 길이 또는 size() 메서드를 자동으로 가져오는 코어

예를 사용하여 설명하겠습니다.

By id

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($("#dv").size());
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
	<div id="dv">php 中文网</div>
</body>
</html>

3개가 있습니다. , 그러나 반환된 결과는 1입니다.

클래스 class

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($(".dv").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

를 사용하는 경우 반환된 결과는 3입니다.

태그 이름 사용:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择器</title>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			alert($("div").size());
		})
	</script>
</head>
<body>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
	<div class="dv">php 中文网</div>
</body>
</html>

결과가 반환되었습니다. 3입니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#dv').css("color","red"); }) </script> </head> <body> <div id="dv">php 中文网</div> </body> </html>

제출하다 코드 재설정

자동운전