소스

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

소스1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로저를 이용한 bean 객체 생성</title>
    <script>
        function bean(a){
            return{'getter':function(){ return a;},
                   'setter':function(b){a=b;}};
        }
        var obj = bean(1000);
        document.write("1 : "+obj.getter()+"<br/>");
        obj.setter(500);
        document.write("2 : "+obj.getter()+"<br/>");
        obj.setter(100);
        document.write("3 : "+obj.getter());
 
    </script>
</head>
<body>
    
</body>
</html>
cs

결과1


소스2

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>클로저를 이용한 bean 객체 생성</title>
    <script>
         function student(num,kor,eng,math){
            
            return{'getnum':function(){ return num;}
                  ,'setnum':function(a){num=a;}
                  ,'getkor':function(){ return kor;}
                  ,'setkor':function(b){kor=b;}
                  ,'geteng':function(){ return eng;}
                  ,'seteng':function(c){eng=c;}
                  ,'getmath':function(){ return math;}
                  ,'setmath':function(d){math=d;}
            };
        }
        
        var arr = new Array();
        arr[0]=student(1111,80,90,80);
        arr[1]=student(2222,70,90,90);
        arr[2]=student(3333,75,64,60);
        arr[3]=student(4444,95,98,87);
        
        document.write("<table>");
        for(var bean in arr){
            document.write("<tr>");
 
            document.write("<td>");
                document.write(arr[bean].getnum()+" | ");
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getkor());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].geteng());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getmath());
            document.write("</td>");
 
            document.write("</tr>");
        }
        document.write("</table>");
 
    </script>
</head>
<body>
    
</body>
</html>
cs

결과2


소스3 (this를 이용한)

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
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로저를 이용한 bean 객체 생성</title>
    <script>
    
        function student(){
            
            return{'num':0,'kor':0,'eng':0,'math':0
                  ,'getnum':function(){ return this.num;}
                  ,'setnum':function(a){this.num=a;}
                  ,'getkor':function(){ return this.kor;}
                  ,'setkor':function(b){this.kor=b;}
                  ,'geteng':function(){ return this.eng;}
                  ,'seteng':function(c){this.eng=c;}
                  ,'getmath':function(){ return this.math;}
                  ,'setmath':function(d){this.math=d;}
            };
        }
        
        var arr = new Array();
        arr[0]=student();
        arr[0].setnum(1111);
        arr[0].setkor(90);
        arr[0].seteng(95);
        arr[0].setmath(85);
        arr[1]=student();
        arr[1].setnum(2222);
        arr[1].setkor(78);
        arr[1].seteng(88);
        arr[1].setmath(95);
        
        document.write("<table>");
        for(var bean in arr){
            document.write("<tr>");
 
            document.write("<td>");
                document.write(arr[bean].getnum());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getkor());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].geteng());
            document.write("</td>");
            document.write("<td>");
                document.write(arr[bean].getmath());
            document.write("</td>");
 
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>
    
</body>
</html>
cs

결과3


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

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

주소/우편번호 찾기 API  (0) 2019.10.24
인쇄하기  (0) 2018.03.08
THIS  (0) 2016.10.05
클로져(Closure)  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THIS</title>
    <script>
        function func1(){
            alert(window==this);
        }
        func1();
        
        var obj={'a':'aaaa','b':function(){
            return this.a;
        }};
        alert("obj.b() : "+obj.b());
        
    </script>
</head>
<body>
    
</body>
</html>
cs

결과


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

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

인쇄하기  (0) 2018.03.08
클로저를 이용한 bean 객체 생성  (0) 2016.10.05
클로져(Closure)  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04
Math.floor() / Math.round()  (0) 2016.10.04

소스1

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>클로져</title>
    <script>
        var a=1000;
        function func1(a){
           a = 100;  
            return a;
        };
        alert('첫번째 a : '+a);
        a=func1();
        alert('두번째 a : '+a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과1

처음 a는 가장위에 선언해준 a=1000이 출력되고,

두번째 a는 func1함수에 선언해준 a=100이 출력이된다.


소스2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script>
        var a=1000;
        function func1(a){
            function func2(){
                var a = 100;  
            };
            func2();
            return a;
        };
        alert('첫번째 a : '+a);
        a=func1(a);
        alert('두번째 a : '+a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과2

처음 a는 가장위에 선언해준 a=1000이 출력되고,

두번째 a또한 가장위에 선언해준 a=1000이 인자로 들어가서 리턴된 값이 출력이 된다.


소스3

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>클로져</title>
    <script> 
        var a=1000;
        function func1(){
            var func2 = function(){
            alert("func2");
            };
            return func2;
        };
        
        alert("첫번째 a:"+a);
        a=func1();
        a();
        alert(" 두번째 a:"+a);
        alert(" 세번째 a:"+window.a);
    </script>
</head>
<body>
    
</body>
</html>
cs

결과3

소스3이 핵심이다.

참고 사이트

https://developer.mozilla.org/ko/docs/JavaScript/Guide/Closures

http://blog.javarouka.me/2012/01/javascripts-closure.html


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

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

클로저를 이용한 bean 객체 생성  (0) 2016.10.05
THIS  (0) 2016.10.05
function(){} (함수) / 콜백함수  (0) 2016.10.04
Math.floor() / Math.round()  (0) 2016.10.04
*JSON  (0) 2016.10.04

+ Recent posts

티스토리툴바