티스토리 뷰

[JQUERY]자바스크립트

jQuery 024. 조건문 if() 의 활용

가산동 2018. 10. 15. 23:46

아래는 예제입니다.

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="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
           //if 사용 방법 1    
           if(true){
               $('#if1').css('color','red');
           }
            
           //if 사용 방법 2
           if(true) $('#if2').css('color','green');
            
        });
    </script>
</head>
    <body>
        <p id = "if1">if 사용 1</p>
        <p id = "if2">if 사용 2</p>
    </body>
</html>
cs


아래는 실행화면입니다.

이전 글에서 간략하게 조건문 if()에 대해서 설명한적이있습니다.

>>[[JQUERY]자바스크립트] - jQuery 023. 조건문 if()



예제를 라인별로 보겠습니다.

21
22
23
24
    <body>
        <p id = "if1">if 사용 1</p>
        <p id = "if2">if 사용 2</p>
    </body>
cs

먼저 id 값으로 'if1' 과 'if2' 를 가지는 p태그를 두줄 생성해줍니다.


10
11
12
13
           //if 사용 방법 1    
           if(true){
               $('#if1').css('color','red');
           }
cs

라인 10.    첫번째 사용법입니다.

라인 11.    if()의 실행문을 { }안에 넣어서 실행합니다.

라인 12.    if()의 실행문을 넣어줍니다. 선택자를 활용해 id 값으로 'if1' 을 가지는 요소의 css를 변경합니다.

   아래는 선택자에 대한 예제입니다.

   >>[[JQUERY]자바스크립트] - jQuery 018. jquery 선택자 (tag,id,class,name)

   아래는 css()의 사용법입니다.

   >>[[JQUERY]자바스크립트] - jQuery 019. css 변경하기 css()


15
16
           //if 사용 방법 2
           if(true) $('#if2').css('color','green');
cs

라인 15.    두번째 사용법입니다.

라인 16.    if()는 조건이 참(true)일때 굳이 { } 로 묶어주지 않아도 바로 다음 함수를 실행합니다.

   위처럼 짧게 끝나는 실행문의 경우 { }로 묶어주지 않는게 가독성이 좀더 좋을 수 있습니다.



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

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 026. input 의 값 확인하기. val()  (0) 2018.10.17
jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기  (0) 2018.10.16
jQuery 023. 조건문 if()  (0) 2018.10.07
jQuery 022. 논리 연산자 AND(&&), OR(||)  (0) 2018.10.06
jQuery 021. 비교연산자 >,<,>=,<=,==,!=  (0) 2018.10.06
댓글