본문 바로가기
공부기록/JavaScript

3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기

by project100 2023. 3. 21.

+ 메서드 체이닝(Method Chaining)

기능들이 연결된 것처럼 연속적으로 처리된다. 

동일한 요소에 여러 명령을 차례로 실행할 수 있는 연결 기술

 

기존명령 + .새메서드() + .새메서드() + .......

$("선택자").css("color", "red").slideUp().slideDown();

 

3. 형제 요소 선택

$("선택자").siblings() : 모든 동일 계층 요소

$("선택자").prev() : 선택자 이전요소(하나)  선택요소 위쪽

$("선택자").prevAll() :이전의 모든 요소

$("선택자").prevUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외)

$("선택자").next() : 선택자 요소의 다음 요소(하나) 선택요소 아래쪽

$("선택자").nextAll() : 다음의 모든 요소

$("선택자").netxtUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외)

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>동일 계층 선택</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        .siblings * {
            display: block;
            border: 2px solid rgb(211, 211, 211);
            color: rgb(250, 205, 205);
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>

<body>
    <!-- 같은 계층에 있다. -->
    <div class="siblings">div (parent)
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
        <p>p</p>
    </div>
    <button id="prevUntil">prev until</button>
    <button id="prevAll">prev all</button>
    <button id="prev">prev</button>
    <button id="sib">sibling</button>
    <button id="next">next</button>
    <button id="nextAll">next all</button>
    <button id="nextUntil">next until</button>
</body>
<script>
    //3초 후 새로고침 함수 만들기
    function turnBack() {
        setTimeout(function () {
            location.reload();
        }, 3000);
    };

    $("#prev").click(() => {
        $("h3").prev().css({
            "color": "rgb(203, 18, 190)",
            "border": "2px solid green"
        })
        turnBack();
    });
    $("#prevAll").click(() => {
        $("h3").prevAll().css({
            "color": "rgb(203, 18, 190)",
            "border": "2px solid yellow"
        })
        turnBack();
    });
    $("#prevUntil").click(() => {
        $("h3").prevUntil("p").css({
            "color": "rgb(203, 18, 190)",
            "border": "2px solid rgb(100, 253, 14)"
        })
        turnBack();
    });

    $("#sib").click(() => {
        $("h3").siblings().css({
            "color": "red",
            "border": "2px solid hotpink"
        })
        turnBack();
    });
    $("#next").click(() => {
        $("h3").next().css({
            "color": "red",
            "border": "2px solid orange"
        })
        turnBack();
    });
    $("#nextAll").click(() => {
        $("h3").nextAll().css({
            "color": "red",
            "border": "2px solid blue"
        })
        turnBack();
    });
    $("#nextUntil").click(() => {
        $("h3").nextUntil("h6").css({
            "color": "red",
            "border": "2px solid skyblue"
        })
        turnBack();
    });

</script>

</html>

 

4. 요소 필터링

$("선택자").first() : 선택한 요소들 중 첫 번째 요소

$("선택자").last() : 선택한 요소들 중 마지막 요소

$("선택자").eq(n) : 선택한 요소들 중 n번째 요소 n은 0부터 시작

$("선택자").filter("지정요소") : 선택한 요소들 중 지정요소

$("선택자").not("지정요소") : 선택한 요소들 중 지정요소를 제외한 요소

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
    <div style="border: 1px solid black;">
        <p>첫번째 div 엘리먼트</p>
        <p class="sel">두번째 div 엘리먼트</p>
        <p>세번째 div 엘리먼트</p>
        <p class="sel">네번째 div 엘리먼트</p>
    </div>
    <br>
    <div style="border: 1px solid black;">
        <p>다섯번째 div 엘리먼트</p>
        <p class="sel">여섯번째 div 엘리먼트</p>
        <p>일곱번째 div 엘리먼트</p>
        <p class="sel">여덟번째 div 엘리먼트</p>
    </div>
    <button id="first">first</button>
    <button id="last">last</button>
    <button id="eq">eq(n)</button>
    <button id="filter">filter</button>
    <button id="not">not</button>
</body>

<script>
    //3초 후 새로고침 함수 만들기
    function turnBack() {
        setTimeout(function () {
            location.reload();
        }, 3000);
    };

    $("#first").click(function () {
        $("div p").first().css("background-color", "yellow");
        turnBack();
    });

    $("#last").click(function () {
        $("div p").last().css("background-color", "yellow");
        turnBack();
    });

    $("#eq").click(function () {
        $("div p").eq(3).css("background-color", "yellow");
        turnBack();
    });

    $("#filter").click(function () {
        $("p").filter(".sel").css("background-color", "orange");
        turnBack();
    });

    $("#not").click(function () {
        $("p").not(".sel").css("background-color", "green");
        turnBack();
    });
</script>

</html>

 

요소의 속성값 가져오기 / 변경하기

1. 속성 값 가져오기

  • attr() 메서드 : 요소의 속성값을 가져오는 메서드. 메서드 객체 안에 들어가 있는 함수

변수 = $("선택자").attr("속성");

변수 = document.getElementById("선택자").getAttribute("속성");

예) let h = $("a").attr("href"); 

      let v = $("input").attr("value");

 

  • val() 메서드 : input 태그의 입력값을 가지고 오는 메서드

예) let v =$("input").val();

 

  • text() 메서드 : innerText 속성과 같은 메서드 화면에 있는 글자를 그대로 가져오거나 글자를 변경해서 출력해 주는 

예) let v = $("p").text();

 

  • html() 메서드 : innerHTML 속성과 같은 메서드 요소를 제어할 수 있는 

예) let t = $("div").html(); 요소를 문자열로 가지고 올 수 있다.

 

  • css() 메서드 : 스타일 시트 속성값을 가져오는 메서드

예) let view = $("div").css("display");

 

 

2. 속성 값 변경하기

 

$("선택자").attr("속성", "속성값");

예) $("a").attr("href", "http://www.naver.com"); 

 

$("선택자").val("변경값");

$("선택자").text("변경값");

$("선택자").html("변경값"); 

 

$("선택자").css("속성", "변경값");  하나만 변경

$("선택자").css({"속성1": "변경값1", "속성2": "변경값2", .....}); 여러개 변경

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성 값 가져오기/변경하기</title>
     <!-- 내가 사용할 값보다 무조건 위에 위치 -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <h2>범위</h2>
    <fieldset>
        <legend>숫자 입력</legend>
        범위(0~100) :
        <input type="range" id="point" min="0" max="100" value="30" step="1"><br>
        선택값 : <span id="msg"></span>
    </fieldset>
</body>
<script>
    let p = $("#point").val();
    // $("#msg").text(p);
    $("#msg").html(`<b>${p}</b>`);

    $("#point").change(function(){
        // p = $("#point").val();
        p = $(this).val();
        $("#msg").html(`<b>${p}</b>`);
    });
</script>

class 속성 변경 (스타일 바꾸기)

자바스크립트의 classListt의 jQuery 버전

1. addClass("클래스명") : 선택한 요소에 클래스명 추가

2 removeClass("클래스명") : 요소에 클래스명 삭제

3. toggleClass("클래스명") : 위 두 기능을 합침

4. hasClass("클래스명") : 클래스명이 들어가 있으면 true, 없으면 false

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>클래스 변경</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<style>
    .ex {
        background-color: chocolate;
        text-align: center;
        width: 200px;
        height: 200px;
    }
</style>

<body>
    <button id="add">추가</button>
    <button id="rem">삭제</button>
    <button id="tg">토글</button>
    <div>BOX</div>
</body>
<script>
    $("#add").click(() => {
        $("div").addClass("ex");
    });

    $("#rem").click(() => {
        $("div").removeClass("ex");
    });

    // $("#tg").click(function(){
    //     $("div").toggleClass("ex");
    //     let sw = $("div").hasClass("ex");
    //     console.log(sw);
    //     if (sw == true) {
    //         $(this).text("OFF")
    //     } else { 
    //         $(this).text("ON");
    //     }
    // });

    $("#tg").click(() => {
        $("div").toggleClass("ex");
        let sw = $("div").hasClass("ex");
        console.log(sw);
        if (sw == true) {
            $("#tg").text("OFF")
        } else { 
            $("#tg").text("ON");
        }
    });

</script>
</html>

 

요소의 추가 / 삭제

1. $("선택자").append("추가요소") : 선택자는 부모요소, 자식요소(추가)를 현 구성의 맨 밑에 추가

2. $("선택자").prepend("추가요소") : 선택자는 부모요소, 자식요소(추가)를 현 구성의 맨 위에 추가

3. $("선택자").after("추가요소") : 선택자의 형제 요소를 선택자 뒤에 추가

4. $("선택자").beforer("추가요소") : 선택자의 형제 요소를 선택자 위에 추가

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소의 추가</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
    <button id="apnd">Append</button>
    <button id="ppnd">Prepend</button>
    <button id="after">after</button>
    <button id="before">before</button>
    <ol>
        <li>항목 1</li>
    </ol>
</body>
<script>
    let i = 1;
    // ol 아래쪽에 추가
    $("#apnd").click(() => {
        $("ol").append(`<li>항목 ${++i}</li> `);
    });
    // ol 위쪽에 추가
    $("#ppnd").click(() => {
        $("ol").prepend(`<li>항목 ${++i}</li>`);
    });
    // ol 형제 아래쪽에 생성
    $("#after").click(() => {
        $("ol").after(`<p>요소 ${++i}</p>`);
    });
    // ol 형제 위쪽에 생성
    $("#before").click(() => {
        $("ol").before(`<p>요소 ${++i}</p>`);
    });
</script>

</html>

여러 요소 함께 추가 

$("선택자").append(ad1, ad2, ad3);

 

예) 

        let txt1 = "<b>추가할 내용 </b>";
        let txt2 = "<i>추가된 내용 </i>";
        let txt3 = document.createElement("b");
        txt3.innerHTML = "jQuery ";

 

    $("#svapp").click(() => {
        
        $("#p1").append(txt1, txt2, txt3);
    });
 
 
출력 문구
추가할 내용 추가된 내용 추가할 내용 추가된 내용 추가할 내용 추가된 내용  jQuery 
 

jQuery가 추가되지 않는 이유는

추가될 요소의 생성을 버튼을 누를 때마다 해야 하는데.

처음에 한 번만 하는 방식이 되어서 txt3이 제대로 처리되지 않았던 문제

    $("#svapp").click(() => {
        let txt1 = "<b>추가할 내용 </b>";
        let txt2 = "<i>추가된 내용 </i>";
        let txt3 = document.createElement("b");
        txt3.innerHTML = "jQuery ";
        $("#p1").append(txt1, txt2, txt3);
    });

출력 문구

추가할 내용 추가된 내용 jQuery 추가할 내용 추가된 내용 jQuery 추가할 내용 추가된 내용 jQuery

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>요소의 추가</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
    <button id="svapp">문장추가</button>
    <p id="p1">내용 추가 위치 </p>
</body>
<script>
    let txt1 = "<b>추가할 내용 </b>";
    let txt2 = "<i>추가된 내용 </i>";
    let txt3 = "<b>jQuery </b>";
    
    $("#svapp").click(() => {
        $("#p1").append(txt1, txt2, txt3);
    });
</script>

</html>

 

 

저작자표시 비영리 변경금지

'공부기록 > JavaScript' 카테고리의 다른 글

3월 22일 JavaScript - jQuery 요소삭제, AJAX  (0) 2023.03.22
3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계)  (0) 2023.03.21
3월 20일 (2) JavaScript - jQuery event, effect  (0) 2023.03.20
3월 20일 (1) JavaScript - 예제, jQuery  (0) 2023.03.20
3월 17일 (2) JavaScript - locatoin, history  (0) 2023.03.17

관련글

티스토리툴바