소스

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

소스

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            //체이닝 기법으로 .css해서 사용 ('키',"값")모두 문자열
            $("h1,h3").css('color','hotpink');
            $(".cl1").css('color','red').css("background-color",'gray');
            $("#i1").css('color','red').css("background-color",'green');
            
            $("div h1").parent().css('color','green').css("background-color",'gray');
            $('body').children().css("border","1px solid gray");
            $('body').children().children().css("border","1px solid red");
            
            $('div>h1').next().css("background-color",'yellow');
            $('div>h1').next().next().css("background-color",'yellow');
            $('div>h1').next().next().prev().css("background-color",'yellow');
            $('#i3').next().css("border","1px solid red");
            $('#i3+h3').next().css("border","1px solid red");
            $('#i3~h3').css("border","1px solid red");//.next()하면 이상..
            $('#i3').siblings().css("border","1px solid red");//형제요소
            //하나씩풀어서 공부하기
        });
    </script>
</head>
<body>
    <h1 id="i1">제이쿼리</h1>
    <h3>제이쿼리3</h3>
    <h3 id="i3">제이쿼리3</h3>
    <h3>제이쿼리3</h3>
    <h3>제이쿼리3</h3>
    <div>
        <h1>div안에 h1</h1>
        <h3>div안에 h1</h3>
        <h3>div안에 h3</h3>
    </div>
    <p class="cl1">제이쿼리를 사용해서 제어합니다</p>
    
</body>
</html>
cs

아래의 결과는 

$(function(){
            //체이닝 기법으로 .css해서 사용 ('키',"값")모두 문자열
            $("h1,h3").css('color','hotpink');
            $(".cl1").css('color','red').css("background-color",'gray');
            $("#i1").css('color','red').css("background-color",'green');
            
            $("div h1").parent().css('color','green').css("background-color",'gray');
            $('body').children().css("border","1px solid gray");
            $('body').children().children().css("border","1px solid red");
            
            $('div>h1').next().css("background-color",'yellow');
            $('div>h1').next().next().css("background-color",'yellow');
            $('div>h1').next().next().prev().css("background-color",'yellow');
            $('#i3').next().css("border","1px solid red");
            $('#i3+h3').next().css("border","1px solid red");
            $('#i3~h3').css("border","1px solid red");//.next()하면 이상..
            $('#i3').siblings().css("border","1px solid red");//형제요소
            //하나씩풀어서 공부하기
        });

해당부분을 한줄씩 플어서 나온 결과를 가져올것이다.


결과

 $("h1,h3").css('color','hotpink');

h1태그와 h3태그 모두 

 $(".cl1").css('color','red').css("background-color",'gray');

클래스 cl1 이름을 갖는 

$("#i1").css('color','red').css("background-color",'green');

아이디 i1 이름을 갖는

$("div h3").css('color','green').css("background-color",'gray');

div아래의 h3태그 모두에게 해당(변형해보았다)

$("div h1").parent().css('color','green').css("background-color",'gray');

부모를 가리키는 parent() 이 추가 되어 div 전체가 선택


...등 한줄씩 실행



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

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

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

http://jquery.com/  제이쿼리 사이트에서 파일 다운

해당 파일을 저장을 하고 저장위치를 기억하여 사용할 수 있게 한다.


제이쿼리 : $;

제이쿼리 실행 : $();

파일을 import한 후 사용

<script src="js/jquery-1.11.3.js"></script>

또는

https://developers.google.com/speed/libraries/#jquery  에서 사용할 버전에 맞게

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

작성할 수 있다.

소스 (사용하는 방법1)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
//        $;//제이쿼리
//        $();//제이쿼리 실행
        
        var func = function(){
            alert("func");
        };
        $(func);//사용1
 
    </script>
</head>
<body>
    
</body>
</html>
cs

결과

소스 (사용하는 방법2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
//        $;//제이쿼리
//        $();//제이쿼리 실행
        
        jQuery(function(){
            alert('action');
        });//사용2
        
    </script>
</head>
<body>
    
</body>
</html>
cs

결과

소스 (사용하는 방법3)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
//        $;//제이쿼리
//        $();//제이쿼리 실행
        
        $(function(){
            $("*").css("border","1px solid red");
        });//사용3
  
    </script>
</head>
<body>
    <h1>제이쿼리</h1>
    <p>제이쿼리를 사용해서 제어합니다</p>
</body>
</html>
cs

결과



jquery 공부 참고

http://androphil.tistory.com/241

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

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

ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06
ex01.html  (0) 2016.10.06

+ Recent posts

티스토리툴바