[jQuery] 7장 get/set 메소드1

get/set 메소드1

text()  - 모든 정보 읽음(get) / 모든 대상에 적용(set) 및 콜백으로 일부 대상을 골라 적용(조건 외 항목은 기존 내용을 유지하므로 반환 불필요)
html()  - 첫번째 항목만 읽음 / 모든 대상에 적용(set) 및 콜백으로 일부 대상을 골라 적용(조건 외 항목은 기존 내용을 유지하므로 반환 불필요)
val()   - 첫번째 항목만 읽음 / 모든 대상에 적용(set) 및 콜백으로 일부 대상을 골라 적용(조건 외 항목의 값을 반드시 반환해야 함)

메소드	설 명
text()	선택 요소의 text 내용 (html 코드 제외)
text(str)	선택 요소의 text 내용을 str로 변경
html() (= innerHTML 기능)	선택 요소의 html 내용 (여러개 선택 시, 첫 번째 요소의 내용만 반환함)
html(str)	선택 요소의 html 내용을 str로 변경 (여러개 선택 시, 모든 요소 반환함)
val()	양식 필드(form fields)의 값 반환 (value 속성의 값)
val(str)	양식 필드(form fields)의 값을 str로 변경

두번째 div 요소의 내용을 텍스트 필드에 넣기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div data-num="n1">디브1</div>
    <div data-num="n4">디브2</div>
    <div data-num="n9">디브3</div>
    <div data-num="n10">디브4</div>

    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 1. 두번째 div 요소의 내용을 텍스트 필드에 넣기
    // console.log( $('div').eq(1).text() ); // 디브2
    let $div2 = $('div').eq(1).text(); // get
    $('input').val($div2); // set
</script>
</body>
</html>

첫번째와 네번째 텍스트 필드의 내용을 'DIV'로 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div data-num="n1">디브1</div>
    <div data-num="n4">디브2</div>
    <div data-num="n9">디브3</div>
    <div data-num="n10">디브4</div>

    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 2. 첫번째와 네번째 텍스트 필드의 내용을 'DIV'로 변경하기
    /* $('input').eq(0).val("DIV1");
    $('input').eq(3).val("DIV4"); */
    // 위와 같은 형식으로도 할 수 있음
    $('input').val(function(i,v){
        // console.log(this); // input 전체 : 순차적인 요소 그 자체를 반환
        // console.log(i); // 인덱스 번호 : 순차적인 요소의 인덱스 정보 반환
        // console.log(v); // aa : 순차적인 요소 내부의 텍스트 정보 반환

        if(i == 0 || i == 3) {
            return "DIV" + (i+1);
        }
        return v;
    });
</script>
</body>
</html>

두번째와 세번째 div요소의 내용을 'div'로 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div data-num="n1">디브1</div>
    <div data-num="n4">디브2</div>
    <div data-num="n9">디브3</div>
    <div data-num="n10">디브4</div>

    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 3. 두번째와 세번째 div요소의 내용을 'div'로 변경하기
    $('div').text(function(p_idx,p_txt){
        console.log(p_idx);
        console.log(p_txt);
        if(p_idx == 1 || p_idx == 2) {
            return 'div' + (p_idx+1);
        }
    });
</script>
</body>
</html>

input태그 중에 value값이 bb인 것만 속성type을 checkbox로 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div data-num="n1">디브1</div>
    <div data-num="n4">디브2</div>
    <div data-num="n9">디브3</div>
    <div data-num="n10">디브4</div>

    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 4. input태그 중에 value값이 bb인 것만 속성type을 checkbox로 변경하기
    $('input').val(function(p_idx, p_val){
        console.log(p_idx, p_val);

        if(p_val == "bb") {
            // 속성을 정의
            console.log(this); // input 반환
            
            // this.type = 'checkbox';
            this.setAttribute('type', 'checkbox');
            // $(this).attr('type', 'checkbox');
            
            // 요소의 바깥쪽에 정보값을 표현해야 함
            this.after(p_val);
            // $(this).after(p_val);
            // this.outerHTML += p_val;
        }
        return p_val;
    });
</script>
</body>
</html>

div요소에 문자 "d"가 있는 항목만 스타일 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div data-num="n1">디브1</div>
    <div data-num="n4">div2</div>
    <div data-num="n9">div3</div>
    <div data-num="n10">디브4</div>
    <div data-num="n11">디div브5</div>

    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 5. div요소에 문자 "d"가 있는 항목만 스타일 변경하기
    $('div').html(function(p_idx,p_html){
        // console.log(p_idx, p_html); // 0 '디브1' 부터 3 '디브4'까지 출력

        // indexOf(문자) - 문자의 위치를 index로 반환
        console.log(p_html.indexOf('d'));

        // 0을 제외한 모든 숫자(음수값 포함)는 if문안에서 true로 자동형변환된다.
        // if(!p_html.indexOf('d')){ // index0의 위치에 있는 d만 조건에 부합하므로 적절하지 않음
        if(p_html.indexOf('d') != -1){
            this.style.backgroundColor = 'green';
            $(this).css('color', 'red');
        }
    });
</script>
</body>
</html>

data-num 속성의 값이 홀수인 것만 테두리 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div data-num="n1">디브1</div>
    <div data-num="n4">div2</div>
    <div data-num="n9">div3</div>
    <div data-num="n10">디브4</div>
    <div data-num="n11">디div브5</div>

    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">
    <input type="n_txt" value="aa">
    <input type="n_txt" value="bb">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // 6. data-num 속성의 값이 홀수인 것만 테두리 설정하기 - attr()
    $('div').attr("data-num", function(p_idx, p_attr){
        // console.log(p_idx, p_attr); // 0 'n1' 부터 4 'n11' 까지 출력
        
        // 문자열의 일부 정보 추출 - substring, slice, substr, charAt
        console.log(p_attr, p_attr.length, p_attr.substring(p_attr.length-1)); // 마지막 값만 추출
        let lastNum = p_attr.substring(p_attr.length-1); // 마지막 값만 추출

        if(lastNum %2) { // 0은 짝수, 1은 홀수 (if문에서 자동형변환되는 조건)
            // this.style.border = "4px solid black";
            $(this).css('border', "4px solid navy");
        }
    });
</script>
</body>
</html>

'jQuery' 카테고리의 다른 글

[jQuery] 9장 get/set 메소드3 (0)	2024.02.22
[jQuery] 8장 get/set 메소드2 (0)	2024.02.22
[jQuery] 6장 기타 필터 (0)	2024.02.21
[jQuery] 5장 내용 필터 (0)	2024.02.21
[jQuery] 4장 필터 및 기본 필터 (0)	2024.02.21

'jQuery' 카테고리의 다른 글

티스토리툴바