2024. 6. 21 - JQuery

JQuery

•

jQuery란?

◦

모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리

◦

무료로 사용 가능한 오픈 라이브러리

◦

현재는 사용 빈도가 다소 떨어진 상황

◦

jQuery는 다음 기능을 위해 제작됨

▪

문서 객체 모델과 관련된 처리를 쉽게 구현

▪

일관된 이벤트 연결을 쉽게 구현

▪

시각적 효과를 쉽게 구현

▪

Ajax 애플리케이션을 쉽게 개발

◦

문서객체 캐스팅하는 데 편함

•

jquery 예제

◦

jquery 객체, Interval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_1</title>

    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
    <script>
        // 페이지 로드가 완료 되고 나서 실행
        // $() => jquery 객체를 생성해준다
        $(document).ready(function() {
            // 페이지의 모든 콘텐츠가 로드된 후 실행
            // window.onload
            // document.querySelectorAll('h2').forEach((item) => {
            //     item.style.color = 'red'
            // })

            $('h2').css('color', 'blue')                            // set / get
            // 캐스팅.메서드
            // 캐스팅 => jquery 객체 생성
            /////////////////////////////////////
            // input casting
            // $('input[type=text]').val('안녕하세요')                 // setter
            // let input_str = $('input[type=text]').val()
            let input_str = $('input:text').val()                   // 위 코드와 결과는 동일
            console.log(input_str)
            
            // 5초 후에 동작
            setTimeout(() => {
                const selected_val = $('select > option:selected').val()
                console.log('selected_val >', selected_val)
                let input_str = $('input:text').val()
                console.log(input_str)
                const checked_val = $('input:checkbox:checked').val()
                console.log('checked_val >>', checked_val)

                if (!checked_val) {
                    alert('확인하세요!!!')
                }

            }, 10000) 

            // forEach.(콜백 (item, index, arr))
            // $.each() => 반복 처리 해주는 메서드
            // $.each(배열, 콜백(index, item))
            // $('selector').each(callback)

            let links = [
                { name: '네이버', url: 'https://www.naver.com' },
                { name: '구글', url: 'https://www.google.com' },
                { name: '페이스북', url: 'https://www.facebook.com' }
            ]

            let output = '';
            
            $.each(links, (index, item) => {
                console.log(index, item)
                output += `<a href="${item.url}">${item.name}</a>\n<br>`
            })

            console.log(output)

            // document.querySelector('#links').innerHTML=output
            $('#links').html(output)

            $('h2').each(function (index, item) {
                console.log(index, item.innerHTML, $(item).html())
            })
        })

        $().ready(() => {

        })

    </script>
</head>
<body>
    <div id="links"></div>

    <select>
        <option>2024</option>
        <option>2023</option>
        <option>2022</option>
    </select>

    <input type="checkbox"> 확인

    <hr>

    <input type="text" name="name" id="name" value="나는 손흥민이다.">

    <hr>

    <h2>header - 0</h2>
    <h2>header - 1</h2>
    <h2>header - 2</h2>
    <h2>header - 3</h2>
    <h2>header - 4</h2>
</body>
</html>
JavaScript
복사

◦

탐색

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_2</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>

    <script>
        // 탐색 : selector, filter()
        // $(selector).filter(selector)
        // $(selector).filter(callback)
        $(document).ready(() => {
            // 짝수번째 인덱스만 선택됨
            $('table tr').filter(':even').css('background-color', 'yellow') 

            // 홀수번째 인덱스만 선택됨
            $('h2').css('background', 'orange').filter(':odd').css('color', 'white')
            
            // 3번째 요소 적용
            $('h1').eq(3).css('color', 'red')

            // 첫 번째 인덱스
            $('h1').first().css('background-color', 'pink')

            // 마지막 인덱스
            $('h1').last().css('background-color', 'pink')

            // 3의 배수
            $('h3').filter((index, item) => {
                console.log(index, item)
                return index % 3 == 0
            }).css('color', 'blue')


        })
        
    </script>
</head>
<body>

    <h3> header 13 </h3>
    <h3> header 23 </h3>
    <h3> header 33 </h3>
    <h3> header 43 </h3>
    <h3> header 53 </h3>
    <h3> header 63 </h3>
    <h3> header 73 </h3>
    <h3> header 83 </h3>
    <h3> header 93 </h3>
    <h3> header 103 </h3>

    <h1> header 1 </h1>
    <h1> header 1 </h1>
    <h1> header 1 </h1>
    <h1> header 1 </h1>
    <h1> header 1 </h1>
    <h1> header 1 </h1>

    <h2> header 2 </h2>
    <h2> header 2 </h2>
    <h2> header 2 </h2>
    <h2> header 2 </h2>
    <h2> header 2 </h2>
    
    <table border="1">
        <tr>
            <td>1111</td>
            <td>2222</td>
        </tr>
        <tr>
            <td>3333</td>
            <td>4444</td>
        </tr>
        <tr>
            <td>5555</td>
            <td>6666</td>
        </tr>
        <tr>
            <td>1111</td>
            <td>1111</td>
        </tr>
        <tr>
            <td>1111</td>
            <td>1111</td>
        </tr>
    </table>

</body>
</html>`
JavaScript
복사

◦

문자열

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_3</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
    <script>

        let xml = `
            <links>
                <link>
                    <name>네이버</name>
                    <url>https://www.naver.com</url>
                </link>
                <link>
                    <name>구글</name>
                    <url>https://www.google.com</url>
                </link>
                <link>
                    <name>페이스북</name>
                    <url>https://www.facebook.com</url>
                </link>
            </links>
        `

        let html_doc = ''

        $().ready(() => {
            // 문자열 => xml 문서 객체로 변환
            // $.parseXML(문자열)
            let xmlDoc = $.parseXML(xml)

            // 요소를 찾는 메서드 -> find(엘리먼트 이름) 'link'
            $(xmlDoc).find('link').each(function(index, item) {
                console.log(index, item)
                let name = $(item).find('name').text()
                let url = $(item).find('url').text()
                console.log(name, url)
                html_doc += 
                `
                <div class="box">
                    <h1>${name}</h1>
                    <p>${url}</p>
                </div>
                `

                $('body').html(html_doc)

                // this 사용시 item 생략 가능
                // $(this)
            })
        })
    </script>
    <style>
        .box {
            border: 1px solid #aaa;
        }
    </style>
</head>
<body>
    
</body>
</html>
JavaScript
복사

◦

문서객체 컨트롤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_4</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
    <style>
        .box {
            background-color: aquamarine;
            color: blue;
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 10px;
        }
        .title {
            text-align: center;
        }
    </style>
    <script>
        // 문서 객체 컨트롤 : 
        // css(), attr(), removeAttr(), addClass(), removeClass()
        // html(), text()
        // remove(), empty()
        $().ready(() => {


            // $('h2').addClass('box') - 클래스 추가
            // $('h2').removeClass('title') - 클래스 제거

            // console.log('경로 : ', $('a').attr('href'))         // getter
            // $('a').attr('href', 'http://www.facebook.com')

            // // $('img').attr('src', '/image/bonobono.jpg')
            // $('img').attr({
            //     src : '/image/bonobono.jpg',
            //     width : 100,
            //     height : 100 
            // })

            // 이미지 크기가 순차적으로 증가
            $('img').attr('height', function(index){
                return (index + 1) * 100
            })

            // 마지막 속성값 선택
            $('img').last().removeAttr('src')

            // attr(속성이름) : read
            // attr(속성이름, 값) : set
            // attr(속성이름, callback) : set
            // attr({}) : 여러개의 속성을 한번에 설정

            // css(속성이름) : read
            // css(속성이름, 값 || callback) : set
            // css({})

            // html() : innerHtml
            // text() : textContent

            // html read - 태그 포함에서 가져옴 (콘솔 창에서 확인 가능)
            console.log('html() => ', $('#menu1').html())

            // text read - 텍스트만 가져옴 (콘솔 창에서 확인 가능)
            console.log('text() => ', $('#menu2').text())

            // html, text 차이 확인
            // $('#menu1').html('<h1>안녕하세요</h1>')
            // $('#menu2').text('<h1>안녕하세요</h1>')
            
            $('div').html(function(index, html) {
                console.log(index, html)
                $(this).html(`<h1>${html + index}</h1>`)
            })

            // 엘리먼트 삭제 : 부모 엘리먼트 캐스팅 삭제 대상 캐스팅 부모에게 삭제요청
            $('#menu3').remove()

            // 비움, 삭제되는 것은 똑같으나 콘솔에서 확인 됨
            $('#menu2').empty()

            // 동적으로 태그 만들기

        })
    </script>

</head>
<body>

    <div id="menu1"><span>Menu Text1</span></div>
    <div id="menu2">
        <span>Menu Text2</span>
    </div>
    <div id="menu3">
        <span>Menu Text3</span>
    </div>

    <img src="/image/bonobono.jpg">
    <img src="/image/bonobono.jpg">
    <img src="/image/bonobono.jpg">

    <a href="https://www.naver.com">naver</a>
    <h2 class="title">box - 1</h2>
    <h2 class="title">box - 1</h2>
    <h2 class="title">box - 1</h2>
    <h2 class="title">box - 1</h2>
    <h2 class="title">box - 1</h2>
</body>
</html>
JavaScript
복사

◦

문서 객체 생성 + 이미지 추가 및 제거

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_5</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>

    <style>
        .img {
            border: 3px solid blue;
        }
    </style>

    <script>
        $().ready(() => {
            // 문서 객체 생성
            $('<h1></h1>').html('안녕하세요1234!!!!').appendTo('body')          // 안녕하세요1234!!!!       
            $('<h1>안녕하세요!!!!</h1>').appendTo('body')                       // 안녕하세요!!!!

            // 이미지 추가 (클래스, 속성)
            // $(A).appendTo(B)     :  B 대상 아래로 추가됨
            // $(A).prependTo(B)    :  B 대상 위로 추가됨
            $('<img>').attr('src', '/image/bonobono.jpg').addClass('img').prependTo('body')

            // $(A).appendTo(B)         : 타깃 B
            // $(A).prependTo(B)        : 타깃 B
            // $(A).append(B)           : 타깃 A
            // $(A).prepend(B)          : 타깃 A

            // $(selector).append(content, content, content,...)
            // $(selector).append((index) => {})

            let html1 = '<a href="#">test</a>'
            let html2 = '<p>TEST</p>'
            let html3 = '<div>DIV TEST</div>'

            $('body').append(html1, html2, html3, '<hr>')

            let productList = []
            let cart = []

            let links = [
                { name: '네이버', url: 'https://www.naver.com' },
                { name: '구글', url: 'https://www.google.com' },
                { name: '페이스북', url: 'https://www.facebook.com' }
            ]

            $.each(links, function (index, item) {
                $('#list').append(`<a></a>`)

                let html =
                    `
                    <div>
                        <a href="${item.name}">${item.url}</a>
                    </div>
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.url}</td>
                    </tr>
                    `
                $('#list').append(html)
            })
        })
    </script>
</head>
<body>
    <!-- <div id="list"></div> -->
     <table border="1">
        <thead>
            <tr>
                <th>이름</th>
                <th>경로</th>
            </tr>
        </thead>
        <tbody id="list">

        </tbody>
     </table>
</body>
</html>
JavaScript
복사