π»jQuery() ν¨μ
jQuery λΌμ΄λΈλ¬λ¦¬μ ν΅μ¬μ΄λ©°, HTML λ¬Έμ λ΄μμ μμλ₯Ό μ ννκ³ μ‘°μνκΈ° μν κ°λ ₯ν λꡬμ΄λ€.
μ΄ ν¨μλ₯Ό μ¬μ©νμ¬ CSS μ νμλ₯Ό μ΄μ©ν΄ HTML μμλ₯Ό μ°Ύκ³ , ν΄λΉ μμμ λν΄ λ€μν μμ μ μννλ€.
π»jQuery() ν¨μ νΉμ§
- 1. CSS μ νμ λλ λ€λ₯Έ ννμ μ¬μ©ν΄μ νκ·Έλ₯Ό κ²μνλ€.
- 2. λ°νκ°μ 무μΈκ°λ₯Ό μ μ©νλ©΄ νμ μλμΌλ‘ 루νκ° λμλμ΄ κ° μμλ§λ€ μ μ©λλ€.
- 3. μλ°μ€ν¬λ¦½νΈ κ°μ²΄μ jQuery κ°μ²΄λ μλ‘ νλ³νν μ μλ€.
κΈ°λ³Έ λΌλ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>jQuery ν¨μ</h1>
<input type="button" value="νμΈ" name="btn1" id="btn1">
<hr>
<!-- μλ° μμ± -->
<!-- div#box$.box{μμ$}*5 -->
<div id="box1" class="box">μμ1</div>
<div id="box2" class="box">μμ2</div>
<div id="box3" class="box">μμ3</div>
<div id="box4" class="box">μμ4</div>
<div id="box5" class="box">μμ5</div>
<script src="../asset/js/jquery-1.12.4.js"></script>
</body>
</html>
1. CSS μ νμ λλ λ€λ₯Έ ννμ μ¬μ©ν΄μ νκ·Έλ₯Ό κ²μνλ€.
jQuery('CSS μ νμ').css() λ‘ μ κ·Όνλ€.
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
// jQuery + CSS μ νμ
jQuery('#btn1').css('color', 'blue');
</script>
2. λ°νκ°μ 무μΈκ°λ₯Ό μ μ©νλ©΄ νμ μλμΌλ‘ 루νκ° λμλμ΄ κ° μμλ§λ€ μ μ©λλ€.
CSS μ‘°μλ² λΉκ΅νκΈ°(DOM, forEach, jQuery)
λ€μ―κ° boxμ color μ‘°μ
DOM
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
//DOM
const list = document.getElementsByClassName('box');
for (let i=0; i<list.length; i++) {
list[i].style.color = 'blue';
}
});
</script>
forEach
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
//list : HTMLCollection (μ μ¬λ°°μ΄)
const list = document.getElementsByClassName('box');
//forEach > new Array()μμλ§ λμνλ€.
// list.forEach(box => box.style.color = 'yellow');
Array.from(list).forEach(box => box.style.color='yellow'); //arrayλ‘ λ©νν΄μ€λ€.
});
</script>λ°°μ΄κ³Ό forEach μ¬μ©μ μ£Όμν΄μΌν μ μ΄ μλλ° μ¬μ€ 'const list = document.getElementsByClassName('box');'λ‘ μ°Ύμ listλ λ°°μ΄μ΄ μλ HTMLCollection ννμ μ μ¬λ°°μ΄μ΄λ€. HTMLCollection μ μμ ν λ°°μ΄μ΄ μλκΈ°μ λ°°μ΄ μ¬μ©λ²λλ‘ μ¬μ©ν μ μλ€. κ·Έλμ Array.from()μ ν΅ν΄ λ©ννμ¬ μ¬μ©νλ€.
jQuery
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
//νκ·Έ μ νμ
jQuery('div').css('color', 'orange');
});
</script>
μμ μ½λλ νμ΄μ§ λ΄μ λͺ¨λ <div> μμμ μμμ orangeμμΌλ‘ λ³κ²½νλ€. κ·Έλ¬λ μ΄ μ½λμμλ 루νλ₯Ό μ§μ μμ±νμ§ μμλ€. jQueryλ μ νν λͺ¨λ <div> μμμ λν΄ μλμΌλ‘ 루νλ₯Ό μ€ννμ¬ κ° μμμ λν΄ μ€νμΌμ μ μ©νλ€.
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
//id μ νμ
jQuery('#box1').css('color','blue');
//class μ νμ
jQuery('.box').css('color', 'green');
//κ·Έ μΈ μ νμ
jQuery('h1, div:nth-child(even)').css('color','red');
});
</script>νκ·Έ μ νμ, id μ νμ, class μ νμ λ± μ¬λ¬ μ νμλ€λ‘ μ κ·Όμ΄ κ°λ₯νλ€.
μ΄ νΉμ§μ jQueryμ κ°λ ₯ν νΉμ§ μ€ νλλ‘, κ°λ°μκ° κ° μμμ λν 루νλ₯Ό μμ±ν νμ μμ΄, jQueryκ° λ΄λΆμμ μλμΌλ‘ μ²λ¦¬ν΄μ£Όμ΄ μ¬λ¬ μμλ₯Ό μΌκ΄μ μΌλ‘ μ²λ¦¬νκ±°λ μ‘°μν λ λ§€μ° νΈλ¦¬νλ€.
3. μλ°μ€ν¬λ¦½νΈ κ°μ²΄μ jQuery κ°μ²΄λ μλ‘ νλ³νν μ μλ€.
BOM, DOM, jQuery λ°©μμΌλ‘ btn1μ μ°Ύλλ€.
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
//btn1 μ°ΎκΈ°
//BOM
const a = document.all.btn1;
//DOM
const b = document.getElementById('btn1');
//jQuery
const c = jQuery('#btn1');
alert(a===b); //true
alert(a==c); //false
});
</script>BOMμΌλ‘ μ°Ύμ aμ DOMμΌλ‘ μ°Ύμ bλ μ§μ± λΉκ΅ μ°μ°μλ‘ λΉκ΅νμ λ κ°κ³Ό μλ£νκΉμ§ κ°μ trueλ₯Ό λ°ννλ€.
νμ§λ§ jQueryλ‘ μ°Ύμ cμ aλ₯Ό λΉκ΅νλ falseλ₯Ό λ°ννλ€. μ΄λ κ°μ΄ μλ‘ λ€λ₯΄λ€λ κ²μ μ μ μλ€.
BOMκ³Ό DOMμ κ°μ μλ£νμ λ°ννμ§λ§ jQueryλ 'jQuery κ°μ²΄'λ₯Ό λ°ννλ€.
μλ‘ λ€λ₯Έ κ°μ²΄λ‘ μΈμνκΈ°μ BOM&DOMμ jQuery λ©μλλ νΈνμ΄ μλλ€.
<script>
const btn1 = document.getElementById('btn1');
btn1.addEventListener('click', function() {
//BOM
const a = document.all.btn1;
//DOM
const b = document.getElementById('btn1');
//jQuery
const c = jQuery('#btn1');
a.value = 'ok';
b.value = 'ok';
a.setAttribute('value', 'ok');
// c.value='ok'; //λΆκ°λ₯
c.val('ok');
});
</script>BOMμΌλ‘ μ°Ύμκ°μ²΄μ DOM λ©μλμΈ setAttributeλ₯Ό μ μ©μμΌλ μ μλνκ³ , DOMμκ² μ°Ύμ κ°μ²΄μ BOM λ©μλμΈ valueλ₯Ό μ μ©μμΌλ μ μλνλ€.
νμ§λ§ jQueryλ‘ μ°Ύμ κ°μ²΄μ BOM, DOM λ©μλλ₯Ό μ μ©νλ©΄ μλνμ§ μλλ€. jQueryλ‘ μ°Ύμ κ°μ²΄μλ jQuery λ©μλμΈ valμ μ μ©μμΌμΌνλ€.
νλ³ν
BOM, DOM κ°μ²΄λ₯Ό jQuery κΈ°λ₯μ μ¬μ©ν΄μΌ ν λκ° μλ€. μ΄λ΄ λλ BOM, DOM κ°μ²΄λ₯Ό jQueryλ‘ νλ³ν ν΄μ€λ€.
BOM, DOM → (νλ³ν) → jQuery
jQuery(a).val('ok');νλ³ννλ λ°©λ²μ κ°μ²΄λ₯Ό jQueryλ‘ λ§΅νν΄μ£Όλ©΄ λλ€.
jQuery → (νλ³ν) → BOM, DOM
c[0].value = 'ok';jQuery κ°μ²΄λ λ°°μ΄λ‘ ꡬμ±λμ΄ μμ΄ [index]λ₯Ό μ¬μ©ν΄μ κΊΌλ΄λ μκ°, μμ μλ°μ€ν¬λ¦½νΈ κ°μ²΄κ° λ°νλλ€.
'WEB > jQuery' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [jQuery] μ€ν¬λ‘€ μ΄λ²€νΈ : νλ‘μΈμ€ λ° λ§λ€κΈ° (0) | 2023.10.16 |
|---|---|
| jQueryλ‘ CSS μ‘°μ (0) | 2023.10.16 |
| [jQuery] jQuery μ΄λ²€νΈ ν¨μ (0) | 2023.10.13 |
| [jQuery] jQuery μ€μΉ (0) | 2023.10.13 |
