2024. 6. 24 - Jquery

복습

•

jquery는 라이브러리 ⇒  기능(메서드) 제공

◦

메서드 ⇒ 어떤 기능

•

jquery를 따로 import를 해줘야 함 - jquery.com에 접속해서 진행해줘야 함
(https://jquery.com/ ⇒ release.jquery.com OR jquery CDN 확인)

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
HTML
복사

•

캐스팅 → jquery 객체 생성

◦

문서객체 캐스팅

// jquery 뒤에는 대부분 콜백이 나옴
// ready는 window.onload와 같음
$(document).ready(function() {

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

$('#links').html(output)

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

◦

document 관리해주는 메서드

◦

이벤트, 비동기 통신 ⇒ 오늘 진행

// 페이지 로드가 완료 되고 나서 실행
// $() => jquery 객체를 생성해준다
JavaScript
복사

•

set / get

// h2는 css의 선택자와 같음
$('h2').css('color', 'blue') 
JavaScript
복사

•

interval, 5초 후에 동작

setTimeout(() => {
        // option의 selected => 선택자
        const selected_val = $('select > option:selected').val()
        console.log('selected_val >', selected_val)
        
        // input 태그의 text
        let input_str = $('input:text').val()
        console.log(input_str)
        
        // input 태그의 체크된 체크박스
        const checked_val = $('input:checkbox:checked').val()
        console.log('checked_val >>', checked_val)

        if (!checked_val) {
            alert('확인하세요!!!')
        }
    }, 5000) 
JavaScript
복사

•

반복 처리해주는 메서드

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

let output = '';

// a 태그를 만들어주는 콜백함수            
$.each(links, (index, item) => {
    console.log(index, item)
    output += `<a href="${item.url}">${item.name}</a>\n<br>`
})
JavaScript
복사

•

document.querySelector('#links').innerHTML=output

// innerHTML의 역할을 html이 해줌
$('#links').html(output)  // jQuery.html()

// innerHTML 활용
$('h2').each(function (index, item) {
    console.log(index, item.innerHTML, $(item).html())
})
JavaScript
복사

•

탐색 : selector, filter() 를 활용

$(selector).filter(selector)
$(selector).filter(callback)

$(document).ready(() => {
    // 짝수번째 인덱스만 선택됨
    // table 밑에 tbody가 생기므로 table tr로 구성 (table > tr x)
    // filter(인덱스 기준), 인덱스 범위 : 0 ~ n-1
    $('table tr').filter(':even').css('background-color', 'yellow') 

    // 홀수번째 인덱스만 선택됨
    // jquery 객체 반환 => 
    // .css('background', 'orange').filter(':odd').css('color', 'white'))
    $('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의 배수
    // filter
    $('h3').filter((index, item) => {
        console.log(index, item)
        return index % 3 == 0
    }).css('color', 'blue')
})
JavaScript
복사

•

xml

// <시작태그></마감태그>
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'
            // find에서 링크 3개 찾아옴 (위 소스 참고)
            // link => name, url
            $(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 += 
                
                // parsing(파싱). 
                // ex) xml, json => html
                
                `
                <div class="box">
                    <h1>${name}</h1>
                    <p>${url}</p>
                </div>
                `

                $('body').html(html_doc)

                // this 사용시 item 생략 가능
                // $(this)
            })
        })
JavaScript
복사

•

문서 객체 컨트롤

◦

클래스 지정해줘서 구성하는 게 좋음, 구분은 확실히 (디자인 영역은 디자인 영역으로 구분)

▪

addClass(), removeClass()

◦

getter

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

$('a').attr('href', 'http://www.facebook.com')
JavaScript
복사

◦

img 태그 관련

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

◦

read

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

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

◦

엘리먼트 삭제

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

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

•

문서 객체 생성

$('<h1></h1>').html('안녕하세요1234!!!!').appendTo('body')          // 안녕하세요1234!!!!       
$('<h1>안녕하세요!!!!</h1>').appendTo('body')                       // 안녕하세요!!!!


// $(A).appendTo(B)         : 타깃 B
// $(A).prependTo(B)        : 타깃 B, 맨 위쪽으로
// $(A).append(B)           : 타깃 A, A에다 추가, 밑으로
// $(A).prepend(B)          : 타깃 A, 맨 위쪽으로


// $(selector).append(content, content, content,...) => 활용 빈도 많음
// $(selector).append((index) => {})
JavaScript
복사

이벤트

•

이벤트 처리 : on 메서드, 이벤트 메서드

$(selector).on('이벤트이름', function())
$(selector).on({'이벤트이름': fn, '이벤트이름': fn, ...})
JavaScript
복사

•

이벤트 예제

$(document).ready(function(){
      // $('h1').on('click', function() {
      //     // this : 객체 자신을 가리키는 키워드, 이벤트가 발생한 엘리먼트 객체를 가리킨다
      //     // 특정 영역을 클릭하면 '+' 문자 추가됨
      //     $(this).html(function(index, html) {
      //         return html + '+'
      //     })
      // }) 

      // 위의 주석 처리한 소스와 동일하게 출력되지만 해당 코드가 가독성 면에서 더 좋음
      $('h1').click(function(e) {
          $(this).html(function(index, html){
              return html + '@'
          })
      })

      // 객체 표현
      $('h1').on({
          // 속성: 이벤트 이름, 값: handler 함수 (이벤트에 대한 영역)
          // css보다 addClass 주는 게 나음
          mouseenter : function() {
              $(this).addClass('over')
          },
          mouseleave : function() {
              $(this).removeClass('over')
          }
      })
  })
JavaScript
복사

•

on을 활용하여 이벤트 범위 한정

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

    <style>
        h1 { 
            border: 1px solid #000;
            margin: 10px;
        }
    </style>

    <script>
        $(document).ready(function(){
            // $('h1').click(function(){
            //     let length = $('h1').length
            //     let html = $(this).html()

            //     $('#wrap').append(`<h1>${length}-${html}</h1>`)
            // }) => 개선 필요

            // on을 활용하여 이벤트 범위 한정
            // wrap > h1
            $('#wrap').on('click', 'h1', function(){
                let length = $('h1').length
                let html = $(this).html()
                $('#wrap').append(`<h1>${length} - ${html}</h1>`)
            })
        })
    </script>
</head>
<body>

    <div id="wrap">
        <h1> header - 0 </h1>
    </div>

</body>
</html>
JavaScript
복사

•

입력 받을시 keyup 활용, 캐스팅한 특정메서드는 jquery를 반환, 전체 체크 선택 및 해제 로직

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

    <script>
        $().ready(() => {
            // 입력 받을시 keyup 활용
            // 캐스팅한 특정메서드는 jquery를 반환
            $('#msg').keyup(function(){
                let cnt = $(this).val().length
                let remain = 150 - cnt
                // console.log(cnt, remain)
                if (remain < 0) {
                    alert('소개글은 150자까지 작성이 가능합니다.')
                    let str = $(this).val().substr(0, 150)
                    $(this).val(str)
                    $('span').text('150')
                    return false
                }
                $('span').text(cnt)
            })
            
            // 전체 체크 선택 및 해제 로직
            $('#allCheck').change(function(){
                if (this.checked) {
                    $('#checkItem').children().prop('checked', true)
                } else {
                    $('#checkItem').children().prop('checked', false)
                }
            })    

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

    <input type="checkbox" id="allCheck">
    <label for="allCheck">all 전체 동의</label>
    
    <div id="checkItem">
        <input type="checkbox"> 사이트 이용 동의 <br>    
        <input type="checkbox"> 개인정보 이용 동의 <br>
        <input type="checkbox"> 마케팅 이용 동의 <br>
    </div>

    <hr>

    <textarea cols="50" rows="10" id="msg"></textarea>
    <span>0</span> / 150
</body>
</html>
JavaScript
복사

비동기 통신

•

ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_9</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
    <script>
        $().ready(() => {
            // $.ajax(options) => 객체 형식으로
            // $.ajax(url, {options})

            $.ajax('/data.json', {
                success : function(data) {
                    // http Code : 200
                    // 304 : 정상
                    console.log('type(data)', typeof(data))
                    $('body').append(data)
                },
                error : function(request, status, error){
                    console.log(request)
                    console.log(status)
                    console.log(error)
                }
            })
        })
    </script>
    
</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_9</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
    <script>
        $().ready(() => {
            // $.ajax(options) => 객체 형식으로
            // $.ajax(url, {options})

            $.ajax({
                url : '/data.xml', 
                success : function(data) {
                    // http Code : 200
                    // 304 : 정상
                    console.log('data', data)
                    console.log('type(data)', typeof(data))
                    // $('body').append(data)

                    // json parsing
                    // data.forEach(item => {
                    //     $('body').append(`<h1>${item.name} : ${item.price}</h1>`)
                    // });

                    // xml parsing
                    $(data).find('product').each(function(){
                        let name = $(this).find('name').text()
                        let price = $(this).find('price').text()
                        $('body').append(`<h1>${name} 10 : ${price}</h1`)
                    })

                },
                error : function(request, status, error){
                    console.log(request)
                    console.log(status)
                    console.log(error)
                }
            })
        })
    </script>
</head>
HTML
복사

2024. 6. 24 - Jquery

복습

이벤트

비동기 통신

기타