jQuery 기본 선택기 (2)

기본 선택기

그룹 선택기

아래 코드를 참조하세요.

<!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,p,span").css("color","red");
		})
	</script>
</head>
<body>
	<div>php 中文网</div>
	<div>php 中文网</div>
	<div>php 中文网</div>

	<br><br>

	<p>php.cn</p>
	<p>php.cn</p>
	<p>php.cn</p>


	<br><br>
	<span>php 中文网</span>
	<span>php 中文网</span>
	<span>php 中文网</span>
</body>
</html>

다음 예를 참고하세요

<!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(){
			
		})
	</script>
</head>
<body>
	<div id="dv">php 中文网</div>
	<div>php 中文网</div>
	<div>php 中文网</div>

	<br><br>

	<p>php.cn</p>
	<p class="p1">php.cn</p>
	<p class="p1">php.cn</p>


	<br><br>
	<span>php 中文网</span>
	<span>php 中文网</span>
	<span>php 中文网</span>
</body>
</html>

group 메소드를 사용하여 id div를 만들고, class는 p1이고,span 태그는 빨간색으로 바꿉니다

코드는 다음과 같습니다.

$("#dv,.p1,span").css("color","red");

하위 항목 선택기

아래 예를 작성해 보겠습니다.

<!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(){
			
		})
	</script>
</head>
<body>
	<ul>
		<li><a href="#">php 中文网</a></li>
		<li><a href="#">php 中文网</a></li>
	</ul>

	<a href="#">php 中文网</a>
	<a href="#">php 中文网</a>
</body>
</html>

위의 코드를 보세요. li 태그의 a 태그 색상을 지정하고 싶습니다. 빨간색으로 변경

다음과 같이 작성할 수 있습니다. 코드는 다음과 같습니다.

<!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(){
			$("ul li a").css("color","red");
		})
	</script>
</head>
<body>
	<ul>
		<li><a href="#">php 中文网</a></li>
		<li><a href="#">php 中文网</a></li>
	</ul>

	<a href="#">php 中文网</a>
	<a href="#">php 中文网</a>
</body>
</html>

위의 코드를 보세요. We $("ul li a").css("color","red ");

사실 $("ul a").css("color","red");로 쓸 수 있지만 정확성을 위해 더 좋습니다. 전체회의를 작성하면

예를 들면

<!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(){
			
		})
	</script>
</head>
<body>
	<ul>
		<li><a href="#">php 中文网</a></li>
		<li><a href="#">php 中文网</a></li>
		<a href="#">php.cn</a>
	</ul>

	<a href="#">php 中文网</a>
	<a href="#">php 中文网</a>
</body>
</html>

위의 코드를 보면 $("ul a").css("color","라고 쓰면 red"); 그러면 ul 아래의 a 태그가 빨간색으로 변합니다

하지만 처음에 우리가 원하는 것은 li 태그 아래의 a 태그가 빨간색으로 바뀌는 것입니다

그래서 이때 우리는 전체 이름 작성 $("ul li a").css("color","red ");

와일드카드 선택기 *

다음 코드를 보세요:

<!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(){
			$("*").css("color","red");
		})
	</script>
</head>
<body>
	<ul>
		<li><a href="#">php 中文网</a></li>
		<li><a href="#">php 中文网</a></li>
		<a href="#">php.cn</a>
	</ul>

	<a href="#">php 中文网</a>
	<a href="#">php 中文网</a>


	<p> php.cn </p>
	<p> php.cn </p>
	<p> php.cn </p>


	<span>php 中文网</span>
</body>
</html>

지속적인 학습

새로운 파일

<!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,p,span").css("color","red"); }) </script> </head> <body> <div>php 中文网</div> <div>php 中文网</div> <div>php 中文网</div> <br><br> <p>php.cn</p> <p>php.cn</p> <p>php.cn</p> <br><br> <span>php 中文网</span> <span>php 中文网</span> <span>php 中文网</span> </body> </html>

제출하다 코드 재설정

자동운전