λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
jQuery

[jQuery] 속성 κ΄€λ ¨ λ©”μ„œλ“œ μ•Œμ•„λ³΄κΈ°

by 코딩곡책 2022. 9. 3.
λ°˜μ‘ν˜•

jQuery : 속성 κ΄€λ ¨ λ©”μ„œλ“œ

μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” 속성 κ΄€λ ¨ λ©”μ„œλ“œμ— λŒ€ν•΄ μ•Œμ•„λ΄…μ‹œλ‹€.

attr() λ©”μ„œλ“œ

μ„ νƒν•œ μš”μ†Œμ˜ attribute(속성)λ₯Ό 선택, 생성, λ³€κ²½ν•  수 μžˆλ‹€.

μ‹€ν–‰ λΆ„λ₯˜ ν˜•μ‹
취득 $("a").attr("href");
생성, λ³€κ²½ $("a").attr("href", "http://www.google.com/").attr("target", "_blank");
$("a").attr({href: "http://www.google.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>

attr() λ©”μ„œλ“œ : 예제 μ½”λ“œ

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>attr() λ©”μ„œλ“œ<title> 
    <script src="jquery-3.3.1.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>
결과 보기 
<div id="site">
    <a href="http://www.daum.net" target="_blank" title="μƒˆμ°½">λ‹€μŒ</a> 

    <a href="http://m.naver.com" target="_blank" title="μƒˆμ°½">넀이버 λͺ¨λ°”일</a> 

    <a href="http://www.nate.com" target="_blank" title="μƒˆμ°½">λ„€μ΄νŠΈ</a>
</div>

μ½”λ“œνŽœ κ²°κ³Ό

prop() λ©”μ„œλ“œ

attr()κ°€ html attribute(속성)에 κ΄€λ ¨λœ λ©”μ„œλ“œλΌλ©΄ prop()은 μžλ°”μŠ€ν¬λ¦½νŠΈ ν”„λ‘œνΌν‹°(property)에 κ΄€λ ¨λœ λ©”μ„œλ“œμ΄λ‹€. prop() λ©”μ„œλ“œλŠ” μš”μ†Œμ˜ 속성을 true/false둜 μ œμ–΄ κ°€λŠ₯ν•˜λ‹€.

prop() λ©”μ„œλ“œ : 예제 μ½”λ“œ

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>prop() λ©”μ„œλ“œ<title> 
    <script src="jquery-3.3.1.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", true);
            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="css"><label for="css">css</label>
</body> 
</html>
결과 보기 
<input type="checkbox" id="html" checked="checked">
<label for="html">html</label>
<input type="checkbox" id="css">
<label for="css">css</label>

// undefined
// false
// checked
// true

μ½”λ“œνŽœ κ²°κ³Ό

attr() λ©”μ„œλ“œλŠ” checked 속성이 μš”μ†Œμ— μΆ”κ°€λ˜λŠ” 반면, prop() λ©”μ„œλ“œμ˜ trueλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ ν”„λ‘œνΌν‹°λ‘œ μ²˜λ¦¬λ¨μ„ μ•Œ 수 μžˆλ‹€. Google Chromeμ—μ„œ 검사(F12) > Console μ°½μ—μ„œ 확인 κ°€λŠ₯.

λ°˜μ‘ν˜•

'jQuery' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[jQuery] μŠ€νƒ€μΌ κ΄€λ ¨ λ©”μ„œλ“œ μ•Œμ•„λ³΄κΈ°  (5) 2022.09.03
[jQuery] 클래슀 κ΄€λ ¨ λ©”μ„œλ“œ μ•Œμ•„λ³΄κΈ°  (6) 2022.09.03
[JavaScript] jQuery(제이쿼리) - 탐색 μ„ νƒμž  (3) 2022.08.30
[JavaScript] jQuery(제이쿼리) - ν•„ν„° μ„ νƒμž  (3) 2022.08.30
[JavaScript] jQuery(제이쿼리) - 속성 μ„ νƒμž  (4) 2022.08.30

κ΄€λ ¨κΈ€

λŒ“κΈ€

Reference Book

JavaScript

JavaScript

λ³΄λŸ¬κ°€κΈ°
HTML

HTML

λ³΄λŸ¬κ°€κΈ°
CSS

CSS

λ³΄λŸ¬κ°€κΈ°
κ΄‘κ³  μ€€λΉ„μ€‘μž…λ‹ˆλ‹€.

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”