출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.


jQuery :contains() 셀렉터는 contains안에 넣은 문자를 포함하여 효과를 줄 수 있다. 

$("p:contains(문돌)").css("background-color", "red");


'문돌' 이라는 단어가 들어간 <p> 요소에 빨간색 배경 효과를 준다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
    $("p:contains(문돌)").css("background-color", "red");
});  
</script>
</head>
<body>
 
<h1>Welcome to My Homepage</h1>
 
<p class="intro">My name is 문돌.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>
 
Who is your favourite:
<ul id="choose">
  <li>Goofy</li>
  <li>Mickey</li>
  <li>Pluto</li>
</ul>
 
</body>
</html>
 
cs




jQuery has() 셀렉터는 has 안의 selector에 따라 효과를 줄 수 있다. 

예제를 통해 보면 이해가 쉽다.


문법은 아래와 같다. 

1
$(":has(selector)")
cs


span을 가진 p태그에 붉은 색 border 를 준다.

$("p:has(span)").css("border", "solid red");


p를 가진 div태그에 연한파란색 배경색을 준다.

$("div:has(p)").css("background-color", "lightblue");


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p:has(span)").css("border", "solid red");
    $("div:has(p)").css("background-color", "lightblue");
});
 
</script>
</head>
<body>
 
<p><span>This is a span element inside a p element.</span></p>
<div>
    <p>no span element.</p>
</div>
</body>
</html>
 
cs


저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery 기본(속성선택자 필터선택자)  (0) 2017.10.21
jQuery 기본(선택자)  (0) 2017.10.20
jQuery AJAX(2) get() 메소드, post() 메소드  (2) 2017.08.26
jQuery AJAX (1) - load()메소드  (0) 2017.08.25
jQuery Traversing 가로지르기? 횡단하기? (3) Siblings  (0) 2017.08.24

+ Recent posts

티스토리툴바