소스

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('h1').css('border','1px solid red'); 
            $('ol>li:contains("menu3")').css('border','1px solid red'); 
            $('ol>li:has("em")').css('border','1px solid red'); 
            $('ol>li').find('em').css('border','1px solid red'); //위의 em과 비교
            $('ol>li:has("li")').css('border','1px solid red'); 
            $('ol>li:eq(1)').siblings().css('border','1px solid red');
            $('ol>li').not('ol>li:eq(1)').css('border','1px solid red');//위와 동일결과
            $('ol>li').contents().css('border','1px solid red');
            $('ol>li').contents().filter('strong').css('border','1px solid red');
            
            $('ol>li').filter('.cl1').css('border','1px solid red');
            //$('ol>li').find('.cl1').css('border','1px solid red');//적용되지않는다
            $('ol>li').find('a').css('border','1px solid red');//찾는방법 이해하기 자식요소중에 찾는것
            $('a:contains("menu3")').parent().children().css('border','1px solid red');
            $('ol>li:last').children().children('li:last').css('border','1px solid red');
            $('ol>li:last').children().children().children().css('border','1px solid red').end().css('border','1px solid gray');
            
            $('ol>li').not('li:eq(1)').filter('.cl1').css('border','1px solid red').end().css('color','green');
        });
    </script>
    
</head>
<body>
    <h1>목차</h1>
    <ol>
        <li>menu1</li>
        <li>menu<em>2</em></li>
        <li class="cl1"><a href="#">menu3</a></li>
        <li><strong>menu4</strong></li>
        <li>
            <ul>
                <li>menu4-1</li>
                <li><a href="#">menu4-2</a></li>
            </ul>
        </li>
    </ol>
</body>
</html>
cs


결과

$('ol>li:contains("menu3")').css('border','1px solid red');

$('ol>li:contains("menu3")').css('border','1px solid red'); 

contains("")는 괄호 안의 내용과 일치하는 것을 선택. "me", "3" 등의 글을 넣어 보고 비교

$('ol>li:has("em")').css('border','1px solid red');

$('ol>li').find('em').css('border','1px solid red');

둘의 결과를 비교

has를 쓴 결과

find를 쓴 결과

$('ol>li:eq(1)').siblings().css('border','1px solid red');

$('ol>li').not('ol>li:eq(1)').css('border','1px solid red');

siblings()는 형제 노드를 말한다. eq(1)에 해당하는 것을 뺀 형제노드들이 선택된다.

두줄의 결과는 동일하다.

$('ol>li').contents().css('border','1px solid red');

$('ol>li').contents().filter('strong').css('border','1px solid red');

이것은 위의 결과에서 'strong'태그만을 필터로 거쳐 menu4만 선택된다

$('ol>li').filter('.cl1').css('border','1px solid red');

$('ol>li').find('a').css('border','1px solid red');

filter와 find의 차이는 find는 자식노드 중에서 찾는다



...등 실행




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

'* Programming > JQuery' 카테고리의 다른 글

pdf파일 및 사진파일 팝업창으로 띄우기  (0) 2018.03.08
부트스트랩 달력 기능  (0) 2018.03.08
ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06

+ Recent posts

티스토리툴바