λ°μν
jQuery μμ± μ νμ
μ μ΄μΏΌλ¦¬μμ μ¬μ©λλ μμ± μ νμμ λν΄ μ΄ν΄λ΄ μλ€.
μμ± μ νμ
| μ νμ μ’ λ₯ | μ νμ μ€λͺ | |
|---|---|---|
| μμ[μμ±] | $("span[class]") | span μμ μ€ class μμ±μ κ°μ§κ³ μλ μμλ₯Ό μ ν |
| μμ[μμ±='κ°'] | $("span[class='abc']") | span μμ μ€ classκ° 'abc'μΈ μμλ₯Ό μ ν |
| μμ[μμ±!='κ°'] | $("span[class!='abc']") | span μμ μ€ classκ° 'abc'κ° μλ μμλ₯Ό μ ν |
| μμ[μμ±~='κ°'] | $("span[class~='abc']") | span μμ μ€ classκ° 'abc'λ₯Ό ν¬ν¨νλ μμλ₯Ό μ ν. 'abc' μμΌλ‘ μ°κ²°λ λ¬Έμκ° μμ΄μΌ νλ©° 'bg abc'λ μ νλμ§λ§ 'bg_abc'λ μ νλμ§ μμ. |
| μμ[μμ±*='κ°'] | $("span[class*='abc']") | span μμ μ€ classκ° 'abc'λ₯Ό ν¬ν¨νλ μμλ₯Ό λͺ¨λ μ ν. 'bg abc', 'bg_abc' λͺ¨λ μ ν. |
| μμ[μμ±|='κ°'] | $("span[class|='abc']") | span μμ μ€ classκ° 'abc'λ 'abc-'λ‘ μμνλ μμλ₯Ό μ ν. |
| μμ[μμ±^='κ°'] | $("span[class^='abc']") | span μμ μ€ classκ° 'abc'λ‘ μμνλ μμλ₯Ό μ ν. |
| μμ[μμ±$='κ°'] | $("span[class$='abc']") | span μμ μ€ classκ° 'abc'λ‘ λλλ μμλ₯Ό μ ν. |
μμ μ½λ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>μμ± μ νμ<title>
<style>
li {
margin: 5px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$(".list1 > li[class='list_1']").css("border", "2px solid red");
$(".list1 > li[class!='list_1']").css("border", "2px solid orange");
$(".list2 > li[class~='list']").css("background", "yellow");
$(".list2 > li[class*='list']").css("border", "2px solid green");
$(".list3 > li[class|='list']").css("border", "2px solid blue");
$(".list4 > li[class^='list']").css("border", "2px solid navy");
$(".list4 > li[class$='bg']").css("background", "purple");
});
</script>
</head>
<body>
<ul class="list1">
<li class="list_1">λ΄μ©1_1</li>
<li class="list_2">λ΄μ©1_2</li>
<li class="list_3">λ΄μ©1_3</li>
</ul>
<ul class="list2">
<li class="list bg">λ΄μ©2_1</li>
<li class="list_1">λ΄μ©2_2</li>
<li class="list_2">λ΄μ©2_3</li>
</ul>
<ul class="list3">
<li class="list">λ΄μ©3_1</li>
<li class="list-1">λ΄μ©3_2</li>
<li class="list-bg">λ΄μ©3_3</li>
</ul>
<ul class="list4">
<li class="list">λ΄μ©4_1</li>
<li class="list-1">λ΄μ©4_2</li>
<li class="list-bg">λ΄μ©4_3</li>
</ul>
</body>
</html>
μ½λν κ²°κ³Ό
λ°μν
'jQuery' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [jQuery] ν΄λμ€ κ΄λ ¨ λ©μλ μμ보기 (6) | 2022.09.03 |
|---|---|
| [JavaScript] jQuery(μ μ΄μΏΌλ¦¬) - νμ μ νμ (3) | 2022.08.30 |
| [JavaScript] jQuery(μ μ΄μΏΌλ¦¬) - νν° μ νμ (3) | 2022.08.30 |
| [JavaScript] jQuery(μ μ΄μΏΌλ¦¬) - κΈ°λ³Έ μ νμ (4) | 2022.08.30 |
| [JavaScript] jQuery(μ μ΄μΏΌλ¦¬) μμ보기 (5) | 2022.08.30 |
λκΈ