본문 바로가기
Javascript

JQuery 반복문 / 조건문

WEB_CREASTORY 2023. 7. 11. 23:00

javascript만 사용하면 복잡하기 때문에 jQuery를 사용한다. HTML의 요소들을 조작하는 편리한 Javascript를 위해 미리 작성해둔 라이브러리, Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장한 것.

 

# jQuery와 Javascript - 코드 비교해보기

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것! (그렇게 때문에, 쓰기 전에 꼭 "임포트"를 해야한다.)

 

Javascript로 길고 복잡

document.getElementById("element").style.display = "none";

 

jQuery는 보다 직관적이고 간편

$('#element').hide();

 

✅ jQuery 사용하기

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다.

jQuery CDN 부분을 참고해서 임포트하기(<head> 와 </head> 사이에 넣기 https://www.w3schools.com/jquery/jquery_get_started.asp

 
    <script>
        function checkResult(){
            let a = ['사과','배','감','귤']
            $('#q1').text(a[0])

            let b = {'name':'영수','age':24}
            $('#q2').text(b['name'])

            let c = [
                {'name':'영수','age':24},
                {'name':'철수','age':35}
            ]
            $('#q3').text(c[1]['name'])
        }
    </script>

✅ jQuery를 사용하는 방법

css와 마찬가지로 jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. css에서는 선택자로 class를 썼지만 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다. 

예) 특정 인풋박스의 값을 → 가져와줘!

예) 특정 div를 → 안보이게 해줘!

 

✅ JQuery 반복문

리스트, 리스트-딕셔너리 형식의 자료 : forEach

<script>
        let fruits = ['사과','배','감','귤']
        fruits.forEach((a) => {
            console.log(a)
        })
    </script>

✅ JQuery 조건문

<script>
        let age = 24

        if (age > 20) {
            console.log('성인입니다')
        } else {
            console.log('청소년입니다')
        }
    </script>

✅ JQuery 반복문 & 조건문

<script>
    let ages = [12, 15, 20, 25, 17, 37, 24]

    ages.forEach((a) => {
        if (a > 20) {
            console.log('성인입니다')
        } else {
            console.log('청소년입니다')
        }
    })
</script>

<script>
    let ages = [12, 15, 20, 25, 17, 37, 24]

    ages.forEach((a) => {
        if (a > 20) {
            alert('성인입니다')
        } else {
            alert('청소년입니다')
        }
    })

 

 

 

저작자표시

'Javascript' 카테고리의 다른 글

서버→클라이언트: "JSON"  (0) 2023.07.12
JQuery / $('#id').append(temp_html)  (0) 2023.07.12
딕셔너리_ 키(key)-밸류(value) 값  (0) 2023.07.11
리스트 a[0] / a.length  (0) 2023.07.11
변수&기본연산 let a = 2  (0) 2023.07.11

'Javascript' Related Articles

티스토리툴바