jQuery (23)

jQuery

[jQuery] 8장 get/set 메소드2

반응형

 

get/set 메소드2

 

 

메소드 설 명
attr(attribute) 속성 값 반환
(속성 명 존재하지 않을 시 undefined)

ex) $(“a”).attr(“href”);
attr(attribute, value) 속성 및 값 설정
ex) $(“a”).attr(“href”, “http://www.naver.com”);
attr(attribute, fn(index,currentvalue)) 함수 이용, 속성 및 값 설정
attr({attribute:value, attribute:value, … }) 여러 속성 및 값 설정
removeAttr(attribute) 속성 제거
ex) $(“a”).removeAttr(“href”);

 

 

 

  • attr
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
    <h4>요소의 속성 정보 얻기/설정하기 [파일명 추출 후 title속성으로 설정하기]</h4>
    <img src="../images/mang10.gif" title="a">
    <img src="../images/mang11.jpg" title="b">
    <img src="../images/mang12.gif" title="c">
    <img src="../images/mang13.gif" title="d">
    <img src="../images/mang14.gif" title="e">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // get - (html, val, attr 공통적으로) 첫번째 항목만 반환
    // console.log( $('img').attr('src') ); // ../images/mang10.gif

    // set - 모든 항목에 일괄 적용
    // $('img').attr('title', '일괄설정'); // 마우스를 사진에 가져다댈 시 전부 일괄설정으로 뜸

    // set2 - 콜백에서 제공하는 순차적인 정보를 이용해 각 항목의 title을 설정
    $('img').attr('title', function(p_idx, p_attr){
        console.log(p_idx, p_attr);

        let $src = $(this).attr('src'); // 각 요소의 src속성 정보
        console.log($src);
        
        // 파일명 추출 - substring, slice(str,end)
        let str = $src.lastIndexOf('/') + 1; // 추출할 문자의 시작 index
        let end = $src.lastIndexOf('.'); // 추출할 문자의 끝 index

        console.log($src.substring(str, end));
        return $src.slice(str,end);
    });
</script>
</body>
</html>

 

결과 화면1

 

 

 

 

  • removeAttr
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
    <h4>요소의 속성 정보 얻기/설정하기 [파일명 추출 후 title속성으로 설정하기]</h4>
    <img src="../images/mang10.gif" title="a">
    <img src="../images/mang15.gif" title="b">
    <img src="../images/mang12.gif" title="c">
    <img src="../images/mang13.gif" title="d">
    <img src="../images/mang14.gif" title="e">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('img').attr('title', function(p_idx, p_attr){
        console.log(p_idx, p_attr);

        let $src = $(this).attr('src');
        
        let str = $src.lastIndexOf('/') + 1;
        let end = $src.lastIndexOf('.');

        console.log($src.substring(str, end));
        return $src.slice(str,end);
    });

    // remove - 속성 제거
    $('img').eq(4).removeAttr('src');

</script>
</body>
</html>

 

결과 화면2

 

 

 

  • 속성 추가
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
    <h4>요소의 속성 정보 얻기/설정하기 [파일명 추출 후 title속성으로 설정하기]</h4>
    <img src="../images/mang10.gif" title="a">
    <img src="../images/mang15.gif" title="b">
    <img src="../images/mang12.gif" title="c">
    <img src="../images/mang13.gif" title="d">
    <img src="../images/mang14.gif" title="e">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('img').attr('title', function(p_idx, p_attr){
        let $src = $(this).attr('src');
        
        let str = $src.lastIndexOf('/') + 1;
        let end = $src.lastIndexOf('.');

        console.log($src.substring(str, end));
        return $src.slice(str,end);
    });
    
    // 여러 속성 추가
    $('img').eq(4).attr({'src':'../images/mang1.jpg',
                         'alt':'대체text', 'title':'타이틀변경'});
</script>
</body>
</html>

 

결과 화면3

 

 

 

사용자 정의 속성

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>사용자 정의 속성(User Defined Attributes)</h4>
    <!-- (규칙) 속성 정의시 대문자 표기 안 됨-->
    <div yujin="유진" data-alias="별명" data-hobby="취미" data-message-code="jmt"></div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    let v_div = document.querySelector('div');

    console.log(v_div.yujin); // undefined
    console.log(v_div['yujin']); // undefined
    console.log(v_div.getAttribute('yujin')); // 정보 확인 가능
    console.log(v_div.dataset.yujin); // undefined

    // JS - dataset속성으로 접근하되 data - 키워드는 생략
    console.log(v_div.dataset.alias); // 별명
    console.log(v_div.dataset.hobby); // 취미
     // 하이픈(대시)를 마이너스로 인식하므로 카멜표기법으로 변경 접근
    console.log(v_div.dataset.messageCode); // jmt

    // JQ - data('data-키워드는 생략/kebab케이스, camel케이스 둘다 가능'), attr(속성값 원형 그대로) 메소드로 접근 가능
    console.log( $(v_div).data('alias') ); // 별명
    console.log( $(v_div).data('message-code') ); // jmt
    console.log( $(v_div).data('messageCode') ); // jmt
    console.log( $(v_div).attr('data-message-code') ); // jmt
    console.log( $(v_div).attr('data-hobby') ); // 취미
</script>
</body>
</html>

 

결과 화면4

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 10장 요소 추가 메소드, 삭제 및 복사 메소드  (0) 2024.02.22
[jQuery] 9장 get/set 메소드3  (0) 2024.02.22
[jQuery] 7장 get/set 메소드1  (0) 2024.02.22
[jQuery] 6장 기타 필터  (0) 2024.02.21
[jQuery] 5장 내용 필터  (0) 2024.02.21
jQuery

[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>

 

결과 화면1

 

 

 

  • 첫번째와 네번째 텍스트 필드의 내용을 '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>

 

결과 화면2

 

 

 

  • 두번째와 세번째 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>

 

결과 화면3

 

 

 

  • 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>

 

결과 화면4

 

 

 

  • 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>

 

결과 화면5

 

 

 

  • 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>

 

결과 화면6

 

 

반응형

'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

[jQuery] 6장 기타 필터

반응형

 

기타 필터

 

필터 설 명
:hidden 1) display : none 인 것
2) type=hidden 인 것
3) width=0 height=0 인 것
4)부모요소가 hidden 인 것
:visible 1) display :none 이 아니 것 
2) type =hidden 이 아니 것
3) width=0 height=0 이 아닌 것
4) 부모요소가 hidden 이 아닌 것
5) Visibility =hidden opacity=0 인 것 

 

 

 

  • hidden, visible
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <fieldset>
        <legend>:visible :hidden</legend>
        <p>보이는 문단</p>
        <p style="visibility: hidden;">숨겨진 문단</p>
        <p style="display: none;">자리를 차지하지 못한 문단</p>
        <p style="opacity: .2;">투명한 문단</p>
    </fieldset>
</body>
</html>

 

결과 화면1

 

 

=> visible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <fieldset>
        <legend><a href="javascript:vsb()">:visible</a> <a href="javascript:hdn()">:hidden</a></legend>
        <p>보이는 문단</p>
        <p style="visibility: hidden;">숨겨진 문단</p>
        <p style="display: none;">자리를 차지하지 못한 문단</p>
        <p style="opacity: .2;">투명한 문단</p>
    </fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>

let vsb = function(){
    $('p:visible').each(function(){ // 콜백함수에서 제공하는 두 매개변수는 활용시에만 선언해도 됨
        console.log( this ); // display: none;으로 지정한 문단 제외 전부 찍힘
        console.log(this.innerText); // innerText특성상 랜더링 이후의 정보를 제공함
        console.log( $(this).text() );
    });
};

let hdn = function(){
};
</script>
</body>
</html>

 

결과 화면2

 

 

=> hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <fieldset>
        <legend><a href="javascript:vsb()">:visible</a> <a href="javascript:hdn()">:hidden</a></legend>
        <p>보이는 문단</p>
        <p style="visibility: hidden;">숨겨진 문단</p>
        <p style="display: none;">자리를 차지하지 못한 문단</p>
        <p style="opacity: .2;">투명한 문단</p>
    </fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>

let vsb = function(){
};

let hdn = function(){
    $('p:hidden').each(function(i, v){ // 첫번째 인자는 무조건 index 혹은 key로 들어옴
        console.log(v);
    });
};
</script>
</body>
</html>

 

결과 화면3

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 8장 get/set 메소드2  (0) 2024.02.22
[jQuery] 7장 get/set 메소드1  (0) 2024.02.22
[jQuery] 5장 내용 필터  (0) 2024.02.21
[jQuery] 4장 필터 및 기본 필터  (0) 2024.02.21
[jQuery] 3장 jQuery 선택자  (0) 2024.02.21
1 ··· 3 4 5 6 7 8

티스토리툴바