πŸ”Ή jQuery - filtering

jea_iΒ·2022λ…„ 1μ›” 8일
jquery
0

jQuery

λͺ©λ‘ 보기
4/11
post-thumbnail

πŸ”Ή jQuery - filtering

πŸ”… ν•„ν„°λ§λ©”μ†Œλ“œμ˜ μ’…λ₯˜

좜처 : http://www.devkuma.com/books/pages/224

.first() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 첫 번째 μš”μ†Œλ₯Ό 선택함.
.last() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ λ§ˆμ§€λ§‰ μš”μ†Œλ₯Ό 선택함.
.eq() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 전달받은 μΈλ±μŠ€μ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œλ₯Ό 선택함.
.filter() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 전달받은 μ„ νƒμžμ— ν•΄λ‹Ήν•˜κ±°λ‚˜, ν•¨μˆ˜ 호좜의 κ²°κ³Όκ°€ μ°Έ(true)인 μš”μ†Œλ₯Ό λͺ¨λ‘ 선택함.
.not() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 전달받은 μ„ νƒμžμ— ν•΄λ‹Ήν•˜κ±°λ‚˜, ν•¨μˆ˜ 호좜의 κ²°κ³Όκ°€ μ°Έ(true)인 μš”μ†Œλ₯Ό μ œμ™Έν•œ λ‚˜λ¨Έμ§€ μš”μ†Œλ₯Ό λͺ¨λ‘ 선택함.
.has() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 전달받은 μ„ νƒμžμ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œλ₯Ό μžμ† μš”μ†Œλ‘œ 가지고 μžˆλŠ” μš”μ†Œλ₯Ό λͺ¨λ‘ 선택함.
.is() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 전달받은 μ„ νƒμžμ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œκ°€ ν•˜λ‚˜λΌλ„ μ‘΄μž¬ν•˜λ©΄ μ°Έ(true)을 λ°˜ν™˜ν•¨.
.map() μ„ νƒν•œ μš”μ†Œ μ§‘ν•©μ˜ 각 μš”μ†Œλ§ˆλ‹€ 콜백 ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜κ³ , κ·Έ λ°˜ν™˜κ°’μœΌλ‘œ >κ΅¬μ„±λœ jQuery 객체λ₯Ό λ°˜ν™˜ν•¨.
.slice() μ„ νƒν•œ μš”μ†Œ μ€‘μ—μ„œ 전달받은 인덱슀 λ²”μœ„μ— ν•΄λ‹Ήν•˜λŠ” μš”μ†Œλ§Œμ„ 선택함.

<!DOCTYPE html>
<html lang="en">
<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>day63-4_filtering.html</title>
    <link rel="stylesheet" href="css/basicStyle.css">
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/day63-4_script.js"></script>
</head>
<body>
    <div id="wrapper">
        <div class="header">
            <h3>ν—€λ”μ œλͺ©</h3>
            <p>λ¬Έμž₯1</p>
        </div>
        <div class="section">
            <h3 class="part">μ„Ήμ…˜μ œλͺ©</h3>
            <p class="part">λ¬Έμž₯2</p>
            <p class="part">λ¬Έμž₯3</p>
            <ol class="part">
                <li>ν•­λͺ©1</li>
                <li>ν•­λͺ©2</li>
                <li>ν•­λͺ©3</li>
                <li>ν•­λͺ©4</li>
            </ol>
            <ul class="part">
                <li>ν•­λͺ©1</li>
                <li>ν•­λͺ©2</li>
                <li>ν•­λͺ©3</li>
                <li>ν•­λͺ©4</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script>
$(function(){
    /*
    μš”μ†ŒλŠ” λ§Œλ“€μ–΄μ§„ μˆœμ„œμ— 따라 인덱슀 λ²ˆν˜Έκ°€ ν• λ‹Ήλ©λ‹ˆλ‹€. (λ°°μ—΄κ³Ό 같은 ꡬ쑰)
    */
    var i = 0;
    var i = 1;
    var i = 2;
    //ν•˜λ‚˜μ˜ λ³€μˆ˜λ₯Ό μ—¬λŸ¬κ°œμ˜ μ €μž₯κ³΅κ°„μœΌλ‘œ λ‚˜λˆ„λŠ” κ²ƒμž…λ‹ˆλ‹€.
    var j = [0, 1, 2, 3, 'text', i];
        j[0] = '첫번째 곡간';
        var ul = ['li','li','li','li'];
    console.log(j);

    //indexλ²ˆν˜Έκ°€ 0번인 liλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
    $('ul>li').first().css({borderColor: 'red'});

    //indexλ²ˆν˜Έκ°€ 짝수인 liλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
    $('ol>li').even().css({color: 'red'});

    //indexλ²ˆν˜Έκ°€ ν™€μˆ˜μΈ liλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
    $('ul>li').odd().css({color: 'blue'});

    //indexλ²ˆν˜Έκ°€ 3번인 liλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.
    //equal ~κ³Ό κ°™λ‹€. νŠΉμ •μΈλ±μŠ€ λ²ˆν˜Έμ™€ 같은 μš”μ†Œλ₯Ό 선택
    $('ul>li').eq(3).css({color: 'olive'});

    //3.3λ²„μ „μ—μ„œ νŠΉμ •μΈλ±μŠ€ μš”μ†Œ μ„ νƒν•˜κΈ°
    $('.section p:first').css({background: 'olive'});
});
</script>

πŸ”… selector 와 filter κ΅¬λΆ„ν•˜κΈ°

: 콜둠으둜 ν‘œκΈ°λ˜λŠ” μš”μ†ŒλŠ” 필터링이라 ν•©λ‹ˆλ‹€.

$('μš”μ†Œ:ν•„ν„°') -> 필터링 μ…€λ ‰ν„° (ν•„ν„° μ„ νƒμž)
.filtering('μš”μ†Œ:ν•„ν„°') -> ν•„ν„°

μ œμ΄μΏΌλ¦¬μ½”μ–΄κ°€ μ§μ ‘μ„ νƒν•œκ²ƒμ€ μ„ νƒμžλΌκ³  ν•©λ‹ˆλ‹€.
λ©”μ„œλ“œμ—μ„œ μ„ νƒν•œ 것은 필터라고 ν•©λ‹ˆλ‹€.

  • &둜 μ‹œμž‘ν•˜λŠ”κ±΄ μ„ νƒμž, μ•„λ‹Œκ±΄ μ „λΆ€ ν•„ν„°*

μ„ νƒμžμ—μ„œ :first, :list, :eq(), :odd(), :even(), :gt(), lt()
이듀은 μžλ°”μŠ€νŠΈλ¦½νŠΈμ—μ„œ querySelector()μ—μ„œ μΆ©λŒμ„ μΌμœΌν‚΅λ‹ˆλ‹€.

profile
jea_i
μ—΄μ •μ—΄μ •μ—΄μ •πŸ”₯
이전 포슀트

πŸ”Ή jQuery - traversing

λ‹€μŒ 포슀트

πŸ”Ή jQuery - manipulation [inside]

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보