소스

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
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $("ul>li:first").css('border',"1px solid red");//첫번째
            $("ul>li:last").css('border',"1px solid red");//마지막
            $("ul>li:even").css('border',"1px solid red");//짝수(index번호로 0부터)
            $("ul>li:odd").css('border',"1px solid red");//홀수
            $('ul>li:nth-child(2n)').css('border',"1px solid red");
            $('ul>li:nth-child(2n+1)').css('border',"1px solid red");
            $('ul>li:nth-child(3n)').css('border',"1px solid red");
            $('ul>li:nth-child(4n)').css('border',"1px solid red");
            $('ul>li:nth-last-of-type(2)').css('border',"1px solid red");//()안의 숫자 올려보기
            $('ul>li:nth-last-child(3)').css('border',"1px solid red");//위와 같은기능
            $('li').slice(3).css('border',"1px solid red");//()안의 숫자 올려보기
            $('li').slice(9).css('border',"1px solid red");//
            
            $('body>ul:first>li:eq(3)').css('border',"1px solid red");//이퀄
            $('body>ul:first>li:lt(3)').css('border',"1px solid red");//작은
            $('body>ul:first>li:gt(3)').css('border',"1px solid red");//큰
            
            $('h1').css('border',"1px solid red").next().children('li:first').next().css('border',"2px solid gray");
            $('h1,h1+ul>li:nth-child(2)').css('border',"1px solid red");//위와 같은 
            
            var h1 = $('h1');
            h1.css('border',"2px solid gray");
            
        });
    </script>
</head>
<body>
    <h1>제이쿼리2</h1>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
        <li>menu6</li>
        <li>menu7</li>
        <li><a>menu8</a></li>
    </ul>
    <ul>
        <li>menu2-1</li>
        <li>menu2-2</li>
    </ul>
</body>
</html>
cs

이것도 역시 모두 주석처리후 한줄씩 주석을 풀어 실행하며 공부한다.

결과

 $("ul>li:first").css('border',"1px solid red");//첫번째
 $("ul>li:last").css('border',"1px solid red");//마지막

 $("ul>li:even").css('border',"1px solid red");//짝수(index번호로 0부터)

인덱스 번호가 0 부터 시작

$('ul>li:nth-last-of-type(2)').css('border',"1px solid red");

$('li').slice(3).css('border',"1px solid red");


...등 





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

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

ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex01.html  (0) 2016.10.06
JQuery 시작  (0) 2016.10.06

+ Recent posts

티스토리툴바