jQuery (23)

jQuery

[jQuery] 17장 효과, 애니메이션

반응형

 

효과 : 숨기기 / 표시

 

 

  • toggle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <div id="d1">
        <img src="../images/chi1.jpg" alt="chi">
    </div>
    <input type="button" id="toLeft" value="&lt;&lt;&lt;&lt;">
    <input type="button" id="toRight" value="&gt;&gt;&gt;&gt;">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    // effect
    $('#d1').on('click', function(){
        // fast(200), slow(600ms), default(400ms)
        // $('img').slideToggle('fast');
        $('img').toggle('fast');
    });

</script>
</body>
</html>

 

결과 화면1 : 이미지 클릭 시 이미지 사라짐, 괄호 안에 입력하는 것에 따라 속도와 방식이 다름

 

 

 

애니메이션

 

 

  • animate
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  position: relative;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <div id="d1">
        <img src="../images/chi1.jpg" alt="chi">
    </div>
    <input type="button" id="toLeft" value="&lt;&lt;&lt;&lt;">
    <input type="button" id="toRight" value="&gt;&gt;&gt;&gt;">

<script src="../js/jquery-3.7.1.min.js"></script>
<script>

    // animate
    // 방향 기준으로 안쪽 이동시 양수(+), 바깥쪽 이동시 음수(-)
    $('#toRight').click(function(){
        // $('img').animate({left: '+=10px'}, 100);
        $('img').animate({right: '-=10px'}, 100);
    });
    $('#toLeft').click(function(){
        $('img').animate({left: '-=10px'}, 100);
        // $('img').animate({right: '+=10px'}, 100);
    });

</script>
</body>
</html>

 

결과 화면2 : 버튼 클릭하는 것에 따라 이동됨

 

 

  • css와 animate 비교
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  position: relative;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <input type="button" value="확인" id="btn3">
    <p id="p1">무궁화 꽃이 피었습니다. - CSS</p>
    <p id="p2">무궁화 꽃이 피었습니다. - animate</p>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#btn3').click(function(){
        $('#p1').css('font-size', '+=2px');
        $('#p2').animate({'font-size':'+=2px'});
    });
</script>
</body>
</html>

 

결과 화면3 : 확인 클릭 시 각자 다른 방식으로 폰트 크기가 커짐

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 19장 JSON  (1) 2024.02.27
[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기  (1) 2024.02.27
[jQuery] 16장 필터링  (0) 2024.02.26
[jQuery] 15장 DOM 탐색  (0) 2024.02.26
[jQuery] 14장 trigger와 trigger Handler  (0) 2024.02.26
jQuery

[jQuery] 16장 필터링

반응형

 

필터링

 

 

메소드 설 명
$(selector).first() 선택한 요소의 첫 번째 요소를 반환
$(selector).last() 선택한 요소의 마지막 요소를 반환
$(selector).eq(index) 선택한 요소 중 index 번째 요소를 반환
$(selector).filter(criteria, function(index)) 선택한 요소 중 특정 조건(criteria)에 일치하는  요소들을 반환
$(selector).not(criteria, function(index)) 선택한 요소 중 특정 조건(criteria)에 일치하는 요소를 제거하고 반환
$(selector).is(selectorElement, function(index, element)) 선택된 요소 중 하나가 selectorElement와 일치하는 지 확인.
true 또는 false를 리턴

 

 

 

  • filter()

 

1. 선택자 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
    <div id="d1">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <input type="button" value="filter()">
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('input').on('click', function(){

        // 선택자 활용
        $('li').filter(':even').css('color', 'red');
        $('li').filter(':first-child').css('backgroundColor', 'gray');
    });
</script>
</body>
</html>

 

결과 화면1

 

 

2. 변수 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
    <div id="d1">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <input type="button" value="filter()">
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('input').on('click', function(){

        // 변수 활용
        let a = ':odd'; // 홀수 선택 가상클래스
        let b = $('li').eq(3);
        $('li').filter(a).css('border', '4px double blue');
        $('li').filter(b).css('box-shadow', '4px 4px 2px blue');
    });
</script>
</body>
</html>

 

결과 화면2

 

 

3. 함수 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
    <div id="d1">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <input type="button" value="filter()">
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('input').on('click', function(){

        // 함수 활용
        $('li').filter(function(i, v){
            console.log(i, v); // i: 인덱스 / v-li

            return i == 0 || i == 3
        }).css('color', 'pink');
    });
</script>
</body>
</html>

 

결과 화면3

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>filter(): 선택자, 변수, 함수를 이용해 필터링하는 메소드</h4>
    <div id="d1">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <input type="button" value="filter()">
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('input').on('click', function(){

        // 함수 활용
        /* $('li').filter(function(i, v){
            console.log(i, v); // i: 인덱스 / v-li

            return i == 0 || i == 3
        }).css('color', 'pink'); */

        // 위의 함수와 반대되는 결과물
        $('li').not(function(i, v){
            console.log(i, v); // i: 인덱스 / v-li

            return i == 0 || i == 3
        }).css('color', 'yellow');

    });
</script>
</body>
</html>

 

결과 화면4

 

 

 

  • is()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="../js/jquery-3.7.1.min.js"></script>

    <h4>is(): 일치여부를 boolean으로 반환</h4>
    <div id="d2">
        <!-- id = d2 내부 div를 부모로 가진/갖지않은 p요소 -->
        <div>
            <p>부모(div)있는 p</p>
        </div>
        <p>부모(div)없는 p</p>
        <div>
            <p>부모(div)있는 p</p>
        </div>
        <form id="frm">
            <p>부모(form)있는 p</p>
        </form>
    </div>

<script>
    $('p').on('click',function(){
        if( $(this).parent().is('#d2 div') ) {
            // 해당 부모영역에 스타일 적용
            $(this).parent().css('backgroundColor', 'gold');
        } else {
            // 조건에 맞지 않는 부모의 type과 id 정보를 출력
            alert(`부모의 요소 타입은 ${$(this).parent().prop('tagName')} 이고, `
                 + `id = ${$(this).parent().attr('id')}` );
        }
    });
</script>
</body>
</html>

 

결과 화면5-1 : id가 d2인 div만 스타일 적용됨

 

결과 화면5-2 : 색이 변하지 않는 것을 클릭 시 요소 타입과 id가 출력됨

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기  (1) 2024.02.27
[jQuery] 17장 효과, 애니메이션  (0) 2024.02.27
[jQuery] 15장 DOM 탐색  (0) 2024.02.26
[jQuery] 14장 trigger와 trigger Handler  (0) 2024.02.26
[jQuery] 13장 이벤트 연결 메소드  (0) 2024.02.23
[jQuery] 15장 DOM 탐색
1 2 3 4 5 6 ··· 8

티스토리툴바