( 공부복습 ) 속성 관련 메서드

by 디자이너 윈썸 2022. 3. 2. 22:09

▶ attr( ) 메서드

선택한 요소의 attribute(속성)를 선택, 생성, 변경

실행분류	형식
취득	$("a").attr("href")
생성, 변경	$("a").attr("ref", "http://icoxpublish.com").attr("target","_blnk");
생성, 변경	$("a").attr({href:"http://icoxpublish.com",target:"_blank"});
콜백 함수	$("a").attr("href", function(index,h) { // index는 각 a 요소의 index 0 1, 2 // h는 각 a요소 href 속성 return attribute( 속성 ) // 각 a 요소의 속성을 생성 및 변경 }); ..... <a href="http://www.daum.net" target="_blank" title="새창">다음</a> <a href="http://www.naver.com" target="_blank" title="새창">네이버</a> <a href="http://www.nate.com" target="_blank" title="새창">네이트</a>

<!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="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log($("#site > a:eq(0)").attr("href"));
            $("#site > a:eq(1)").attr("href", "http://m.naver.com").text("네이버 모바일");
            $("#site a").attr("title", function () {
                return "새창";
            });
        });
    </script>
</head>

<body>

    <div id="site">
        <a href="http://www.daum.net" target="" _blank">다음</a>
        <a href="http://www.naver.com" target="" _blank">네이버</a>
        <a href="http://www.nate.com" target="" _blank">네이트</a>
    </div>

</body>
</html>

index.html

0.00MB

▶ prop( ) 메서드

attr( )가 html attribute( 속성 )에 관련된 메서드라면 prop( )는 자바스크립트 property(프로파티)에 관련된 메서드

prpo( ) 메서드는 요소의 속성을 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>prop() 메서드</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log($("input:checkbox").eq(0).attr("checked"));
            console.log($("input:checkbox").eq(1).prop("checked"));
            $("input:checkbox").eq(0).attr("checked", "checked");
            $("input:checkbox").eq(1).prop("checked", "checked");
            console.log($("input:checkbox").eq(0).attr("checked"));
            console.log($("input:checkbox").eq(1).prop("checked"));
        });
    </script>
</head>

<body>

    <input type="checkbox" id="html"><label for="html">html</label>
    <input type="checkbox" id="cssl"><label for="css">css</label>

</body>

</html>

index3.html

0.00MB

저작자표시 비영리 변경금지 (새창열림)

'♥ 코딩(Coding) > 제이쿼리(jQuery)' 카테고리의 다른 글

( 공부복습 ) 이벤트 (0)	2022.04.13
( 공부복습 ) 스타일, 위치 관련 메서드 (0)	2022.04.12
( 공부복습 ) 클래스 관련 메서드 (0)	2022.02.27
( 공부복습 ) jQuery 주요 메서드_요소 관련 메서드 (0)	2022.02.26
( 공부복습 ) jQuery 주요 메서드_배열 관련 메서드 (0)	2022.02.26