230331 서른 한 번째 수업_jQuery,Bootstrap

mary·2023년 3월 31일
0

국비 수업

목록 보기
31/72

동위(Sideways) 메소드:

같은 레벨에 있는 요소들을 선택할 수 있는 메소드

-$("선택자").siblings()
선택된 요소와 같은 레벨에 있는 모든 요소들 선택

-$("선택자").siblings("제시선택자")
선택된 요소와 같은 레벨에 있는 모든 요소들 중 제시한 값과 일치하는 요소들만 선택

-$("선택자").next()|prev()
선택된 요소와 같은 레벨에 있는 모든 요소들 중 바로 다음|이전요소 하나만 선택

-$("선택자").nextAll()|prevAll()
선택된 요소와 같은 레벨에 있는 모든 요소들 중 다음|이전요소 모두 선택

-$("선택자").nextUntil("제시선택자")|prevUntil("제시선택자")
선택된 요소와 같은 레벨에 있는 요소의 다음|이전요소들 중 제시한 값의 전까지 선택

    <div class="wrap">
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <p>p2</p>
    </div>

    <script>
        $(function() {
            const style1 = {color: "orange", border: "2px solid orange"};
            const style2 = {color: "blue", border: "2px solid blue"};
            const style3 = {color: "green", border: "2px solid green"};
            const style4 = {color: "red", backgroundColor: "aqua"};
            const style5 = {color: "purple", fontSize: "3em"}; //여기선 font-size아님

            $("h2").siblings().css(style1);
            $("h2").siblings("p").css(style2);

            $("h2").next().css(style3);
            $("h2").nextAll().css(style4);
            $("h2").nextUntil("p").css(style5);

            $("h2").prev().css("background", "pink");
            $("h2").prevAll().css("background", "lightyellow");
            $("h2").prevUntil("p").css("border", "dotted");
        })
    </script>

content 관련 메소드:

  • html(["문구"]): innerHTML 속성과 비슷

선택된 요소의 content영역의 값을 리턴해주거나 또는 변경해주는 메소드

$("선택자").html(): 선택된 요소의 content값을 반환해줌(html태그까지 반환)

$("선택자").html("문구"): 선택된 요소의 content영역에 문구를 넣어줌
(문구 안에 html태그가 있으면 태그로 해석)

    <h1 id="test1">
        <a>네이버로</a>
    </h1>

    <h1 id="test2">

    </h1>

    <script>
        $(function() {
            const aa = $("#test1").html();
            console.log(aa);

            $("#test2").html(aa);
            $("#test2").children().attr("href", "http://www.naver.com");
        })
    </script>
  • text(["문구"]) 메소드: innerText와 비슷

선택된 요소의 content영역의 값을 리턴해주거나 변경해주는 메소드

$("선택자").text(): 선택된 요소의 content영역의 값을 반환(html태그를 문자로 인식)

$("선택자").text("문구"): 선택된 요소의 content영역에 문구를 넣어(변경)줌(html태그를 문자로 넣음)

    <h1 id="test3">
        <a>구글로</a>
    </h1>

    <h1 id="test4">

    </h1>

    <script>
        $(function() {
            const aa = $("#test3").text();
            console.log(aa);

            $("#test4").text("<a>" + aa + "</a>");
        })
    </script>
    <hr>

    <div class="test">테스트</div>
    <div class="test">테스트</div>
    <div class="test">테스트</div>

    <script>
        $(function() {
            $(".test").html("<h1>글씨 변경</h1>");
            //자바스크립트에선 for문을 돌려야 적용됨

            //선택된 요소들에 순차적으로 접근할 때마다 해당 funcrion실행
            // 함수 실행 시 리턴값으로 문구 변경(콜백함수: 호출했을 때 리턴값이 바로 적용)
            let count = 0;
            $(".test").html(function() {
                return "<h1>글씨변경"+ ++count +"</h1>";
            })

            //해당 function이 호출될 때마다 
            //첫번째 인자값으로 순차적으로 접근하는 요소의 인덱스 번호 전달
            //두번째 인자값으로 순차적으로 접근하는 요소의 content 영역값 전달
            $(".test").thml(function(index,elem){
                return "<h1>글씨변경"+ index + "</h>";
            }) 

            // text() 동일하게 적용
        })
    </script>

요소 생성 및 객체

요소 생성 및 제거

  • 동적으로 요소 생성
  1. 문자열로 만드는 방법

    let el1 = "

    Creat Element By Text

    ";

  2. DOM 메소드로 만드는 방법(creatElement, creatTextNode)

    let el2 = document.createElement("p");
    let text = document.createTextNode("Creat Element By DOM");
    el2.appendChild(text);

  3. jQuery로 만드는 방법

    let el3 = $("

    Creat Element By jQuery

    ");

  • 삽입 관련 메소드

선택된 요소를 기준으로 새로운 요소들을 추가시켜주는 메소드
★
$(A).append(B): A요소내에 맨 뒤에 B를 추가(자손/하위)
$(A).prepend(B): A요소내에 맨 앞에 B를 추가(자손/하위)

$(A).after(B): A요소 뒷부분에 B를 추가(동위)
$(A).before(B): A요소 앞부분에 B를 추가(동위)
---------------------------------------------------------------
$(B).appendTo(A): B를 A요소내에 맨 뒤에 추가(자손/하위)
$(B).prependTo(A): B를 A요소내에 맨 앞에 추가(자손/하위)

$(B).insertAfter(A): B를 A요소내에 뒷부분에 추가(자손/하위)
$(B).insertBefore(A): B를 A요소내에 앞부분에 추가(자손/하위)

    <h1 id="test1">
        <span>A1</span>
        <span>A1</span>
    </h1>
    <h1 id="test2">
        <span>A2</span>
        <span>A2</span>
    </h1>
    <h1 id="test3">
        <span>A3</span>
    </h1>
    <h1 id="test4">
        <span>A4</span>
    </h1>

    <script>
        $(function() {
            //★part1
            $("#test1").append("<span class='added'>B1</span>"); //자손 맨 뒤에 추가
            $("#test2").prepend("<span class='added'>B2</span>"); //자손 맨 앞에 추가

            $("#test3").before("<span class='added'>B3</span>"); //요소 앞에 추가
            $("#test4").after("<span class='added'>B4</span>"); //요소 뒤에 추가

            //part2: 잘 사용 안 함
            $("<span class='added'>C1</span>").appendTo("#test1"); //요소내 맨 뒤에 추가
            $("<span class='added'>C2</span>").prependTo("#test2"); //요소내 맨 앞에 추가

            $("<span class='added'>C3</span>").insertBefore("#test3"); //요소내 앞에 추가
            $("<span class='added'>C4</span>").insertAfter("#test4"); //요소내 뒤에 추가
        })
    </script>

  • 요소객체 복제 메소드:
    변수 = $("선택자").clone([true|false]): 선택된 요소를 복제해서 반환해주는 메소드
    true|false(기본값): 복제할 요소에 걸려있는 이벤트까지 복사할 것인지 지정
    <div id="clTest">
        <div id="item1" class="item">
            <span>안녕</span>
        </div>
    </div>

    <button id="clone">복제</button>
    <div id="clResult"></div>

    <script>
        $(function() {
            //이벤트 함수 
            $(".item").hover(function() {
                $(this).addClass("purple");
            }, function() {
                $(this).removeClass("purple");
            });

            //복제 버튼 클릭시 #itme1의 요소를 복사하여 #clResult에 넣기
            $("#clone").click(function() {
                const copy = $("#item1").clone(true);
                $("#clResult").append(copy);

            // 한줄로 표현 $("#clResult").append($("#item1").clone([true]));
            // appendTo 표현 $("#item1").clone(true).appendTo("#clResult");
            })
        })
    </script>
  • 요소 객체 제거 메소드:

    $("선택자").empty(): 선택된 요소의 하위요소들을 제거해주는 메소드

$("선탣자").remove()|detach(): 선택된 요소를 제거 후 제거된 요소를 반환하는 메소드
-remove(): 제거한 요소의 이벤트는 가져오지 x
-datach(): 제거한 요소의 이벤트까지 가져옴

    <div id="remvTest">
        <div id="item2" class="item">
            <span>안녕</span>
        </div>
    </div>

    <button id="empty">empty</button>
    <button id="remove">remove</button>
    <button id="datach">detach</button>

    <div id="remvResult"></div>

    <script>
        $(function() {
            $("#empty").click(function() {
                $("#item2").empty(); //하위요소 <span> 삭제
                $("#remvTest").empty(); //하위요소 #item2 삭제
            })

            $("#remove").click(function() {
                const el = $("#item2").remove();
                $("#remvResult").append(el);
            })
            $("#detach").click(function() {
                const el2 = $("#item2").detach();
                $("#remvResult").append(el2);
            })
        })
    </script>

*총정리*

요소.css("스타일속성","값"):변경
요소.css("스타일속성"): 반환

요소.val("텍스트"): value값 변경
요소.val(): value값 반환

요소.html("텍스트"): 변경(html태그 인식)
요소.html(): 반환

요소.text("텍스트"): 변경(문자로 인식)
요소.text(): 반환

요소.attr("그외속성명", "값"): 속성 변경
요소.attr("그외속성명"): 속성값 반환

요소.이벤트(function() {실행내용;})

요소.addClass("클래스명"): 클래스속성 삽입
요소.removeClass("클래스명"): 클래스속성 제거


그 외 메소드:

each() 메소드:

배열의 모든 인덱스에 순차적으로 접근할 때 사용
객체가 가지고 있는 모든 속성에 순차적으로 접근할 때 사용
for in문과 유사하게 수행되는 메소드

1) $.each(객체|배열, function([매개변수..]) {
순차적으로 접근할 때마다 실행할 내용;
})

만약 객체를 제시했다면
첫번째 매개변수에는 순차적으로 접근할 때마다의 객체의 속성명(key)이 담김
두번째 매개변수에는 해당 속성값(value)이 담김

2) 객체|배열.each(function([매개변수..]) {
순차적으로 접근할 때마다 실행할 내용;
})

만약 배열을 제시했다면
첫번째 매개변수에는 순차적으로 접근할 때마다의 인덱스번호가 담김
두번째 매개변수에는 해당 인덱스의 값이 담김

    <script>
        $(function() {
            const arr = ['정','보','교','육','원'];
            for(let i in arr) {
                console.log("인덱스: " + i + ", 값: "+ arr[i]);
            }
            console.log("--------------------------");

            //each 방법1
            $.each(arr, function(index, value) {
                console.log("인덱스: " + index + ", 값: "+ value);

            })
            console.log("--------------------------");

            //each 방법2
            $(arr).each(function(index, value) {
                console.log("인덱스: " + index + ", 값: "+ value);
            })
            console.log("--------------------------");

            const student = {
                name: "홍길동",
                age: 20,
                addr: "서울"
            }
            for(let key in student) {
                console.log("속성명: " + key + "속성값: " + student[key]);
            }
            console.log("--------------------------");
            
            //each로 하면
            $.each(student, function(key, value) {
                console.log("속성명: " + key + "속성값: " + value);
                //백틱 표현: console.log(`속성명:  ${key}, 속성값: ${value}`);
            })

            //-------------------응용 예시--------------------------
            $("#btn").click(function() { //로드될 때말고 버튼 클릭하면 테이블 보이기
            const student2 = [{name:"고애신", age:20, addr:"서울"}
                            ,{name:"홍길동", age: 23, addr:"경기"}
                            ,{name:"아무개", age: 25, addr: "인천"}]
            let result="";
            $.each(student2, function(index, obj) {
                result += `<tr>
                                <td>${obj.name}</td>
                                <td>${obj.age}</td>
                                <td>${obj.addr}</td>
                            </tr>`;
            })
            console.log(result);
            $("#area1 tbody").html(result);
            })
        })
    </script>
    <button id="btn">학생조회</button><br><br>
    
    <table border="1" id="area1">
        <thead>
            <tr>
                <th>이름</th>
                <th>나이</th>
                <th>주소</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <br>

    <div id="area2">
        <h1>item-1</h1>
        <h1>item-2</h1>
        <h1>item-3</h1>
        <h1>item-4</h1>
        <h1>item-5</h1>
    </div>

    <script>
        $(function() {
            $("#area2").children().each(function(index,elem) {
                console.log(elem);

                //elem.addClass("highlight-" + index); => 안 됨
                // elem에 javascript방식으로 선택된 요소객체가 담겨있어서
                //elem.className = "highlight-" + index; 이렇게 해야됨

                //자바스크립트 => jQuery 변환 후 jQuery메소드 사용
                $(elem).addClass("highlight-" + index);
                //변수 선언 안 했다면 $(this).addClass("highlight" + index);
            })
        })
    </script>

is()메소드:

$("선택자").is("선택자")

선택된 요소가 내가 전달하고자 하는 값과 일치하는지 판단해 반환(t|f)

    <h3 class="test">test1</h3>
    <h3 >test2</h3>
    <h3 class="test">test3</h3>
    <h3 class="test">test4</h3>
    <h3 >test5</h3>
    <h3 class="test">test6</h3>

    <script>
        $(function() {
         //이 문서상의 모든 h3요소에 순차적으로 접근하면 test클래스가 존재하면 배경색 바꾸기
            $("h3").each(function() {
                if($(this).is(".test")) {
                    $(this).css("backgroundColor","lightyellow");
                }
            })
        })
    </script>

부트스트랩:

소스코드를 긁어와 간단하고 다양한 디자인으로 원하는 것을 구현할 수 있음

https://www.w3schools.com/ 에서 튜토리얼의 부트스트랩에 들어가서 버전을 선택하고
각각에 맞는 CSS 링크와 java script 스크립트를 복사 붙여넣기 해온다.

    <title>종합 예제</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        tbody>tr:hover {
            cursor: pointer;
        }
    </style>

버전에 맞는 왼쪽 메뉴탭에서 table, form, button 등의 서식을 긁어와 수정 사용할 수 있다.

템플릿의 경우는 다운로드 받아 아예 소스코드를 drag and drop해서 코드창에 탭 창으로 넣을 수 있고 W3school 홈페이지 뿐만 아니라 서치하면 더 많은 템플릿을 다운받을 수 있는 홈페이지들이 있다.

profile
mary
내 인생을 망치러 온 나의 구원, 개발
이전 포스트

230330 서른 번째 수업_jQuery

다음 포스트

230403 서른 두 번째 수업_jQuery

0개의 댓글