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

티스토리툴바