개발자 성장일지

제 7장 jQuery 함수 본문

JavaScript

제 7장 jQuery 함수

hdigimon 2023. 12. 12. 15:06

1. jQuery 함수

  • 제이쿼리는 HTML 문서 객체(DOM) 를 제어하기 위해 라이브러리 함수 제공
  • 선택자로 웹 문서에서 특정 요소를 찾아 그 요소를 참조하는 jQuery 객체를 생성 후 라이브러리 함수 호출

2. jQuery 문서 탐색 함수

  • 웹 문서에서 특정 요소를 탐색할 때 사용

 

코드

더보기

jQuery 탐색함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_jQuery 탐색함수</title>
    <!--
        날짜 : 2022/10/12
        이름 : 황원진
        내용 : jQuery 탐색함수 실습하기
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){

            // jQuery()
            let tags = $('ul > li'); // 문서 객체 배열 (list가 5개)
            console.log('tags 길이 : ' + tags.length);

            // eq()
            tags.eq(1).css('color', 'red');
            tags.eq(2).css('color', 'blue');

            // first(), last()
            tags.first().css('color', 'green');
            tags.last().css('color', 'orange');

            // slice()
            tags.slice(1, 3).css('background', 'yellow');

            // each()
            tags.each(function(){
                $(this).css('border', '1px solid black');
            });

            // children()
            tags.eq(3).children().css('border', '1px solid red'); //span, ol 선택

            // next(), prev()
            tags.first().next().next().css('color', 'orange');
            tags.last().prev().css('background', 'skyblue');

            // find()
            tags.find('.seomyun').css('color','red');
            
            // parent()
            tags.find('.seomyun').parent().prev().css('background','pink');

        });
    </script>
</head>
<body>
    <h3>jQuery 탐색함수</h3>

    <ul>
        <li id="seoul">서울</li>
        <li>대전</li>
        <li>대구</li>
        <li>
            <span>부산</span>
            <ol>
                <li class="seomyun">서면</li>
                <li>경성대</li>
                <li>해운대</li>
                <li>남포동</li>
            </ol>
        </li>
        <li class="gwangju">광주</li>
    </ul>
    
</body>
</html>

 

3. jQuery 문서 조작 함수

  • 웹 문서에서 특정 요소를 조작할 때 사용

 

코드

더보기

jQuery 조작함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_jQuery 조작함수</title>
    <!--
        날짜 : 2022/10/12
        이름 : 황원진
        내용 : jQuery 조작함수 실습하기
    -->
    <style>

        .box{
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .red {background-color: red;}
        .green {background-color: green;}
        .blue {background-color: blue;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){

            // attr()
            $('#img').attr({
                'src':'./img/flower1.jpg',
                'alt': '벚꽃'
            });

            // css()
            $('.box1').css('width','100px').css('height','100px').css('border','1px solid black');
            $('.box2').css({
                'width':'100px',
                'height':'100px',
                'border':'1px solid black',
                'background':'orange'
            });

            // text(), html()
             let rs1 = $('#korea').text();
             let rs2 = $('#korea').html();

             console.log("rs1 : " + rs1);
             console.log("rs2 : " + rs2);

             $('p:eq(0)').text('<i>text 내용입니다.</i>');
             $('p:eq(1)').html('<i>html 내용입니다.</i>');

             $('section > div').eq(0).html($('#korea').html());
             $('section > div').eq(1).html($('#korea').text());
             $('section > div').eq(2).text($('#korea').html());
             $('section > div').eq(3).text($('#korea').text());

             // 추가, 이동 함수
             let city = $('article > ul');

             city.append('<li><i>제주도</i></li>');
             city.prepend('<li><i>서울특별시</i></li>');

             city.find('.gsd > li:eq(1)').appendTo('.city > li:eq(1) > ol');
             city.find('.gsd > li:eq(1)').prependTo('.city > li:eq(5) > ol');
             city.find('.gsd > li:eq(3)').prependTo('.city > li:eq(1) > ol');

             // class 함수
             $('.box:eq(0)').addClass('red');
             $('.box:eq(1)').removeClass('green');
             $('.box:eq(2)').toggleClass('blue');


        });
    </script>
</head>
<body>
    <h3>jQuery 조작함수</h3>
    
    <h4>attr 함수</h4>
    <img src="" alt="" id="img"/>

    <h4>css 함수</h4>
    <div class="box1">box1</div>
    <div class="box2">box2</div>

    <h4>text, html 함수</h4>
    <ul id="korea">
        <li>서울</li>
        <li>대전</li>
        <li>대구</li>
        <li>부산</li>
        <li>광주</li>
    </ul>
    <p></p>
    <p></p>

    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

    <h4>추가, 이동 함수</h4>
    <article>
        <ul class="city">
            <li><i>경기도</i><ol></ol></li>
            <li><i>충청도</i><ol></ol></li>
            <li><i>강원도</i><ol></ol></li>
            <li>
                <i>경상도</i>
                <ol class="gsd">
                    <li>창원</li>
                    <li>수원</li>
                    <li>목포</li>
                    <li>부여</li>
                    <li>원주</li>
                    <li>파주</li>
                </ol>
            </li>
            <li><i>전라도</i><ol></ol></li>
        </ul>
    </article>


    <h4>class 함수</h4>
    <div class="box">box1</div>
    <div class="box green">box2</div>
    <div class="box blue">box3</div>
    
</body>
</html>

'JavaScript' 카테고리의 다른 글

제 9장 jQuery 애니메이션  (0) 2023.12.12
제 8장 jQuery 이벤트  (0) 2023.12.12
제 6장 jQuery 개요 및 선택자  (0) 2023.12.12
제 5장 객체  (1) 2023.12.12
제 4장 배열과 함수  (0) 2023.12.11
'JavaScript' Related Articles more