Day 29 - jQuery 사용하기

카테고리 없음

Day 29 - jQuery 사용하기

ksyke 2024. 9. 2. 16:36

jQuery 다운받기

https://releases.jquery.com/
https://code.jquery.com/jquery-1.12.4.min.js

=> 다른이름으로 받기 해서 워크스페이스에 다운받는다.

Document : https://api.jquery.com/

jQeuery의 버전

ver 1.x : pc 버전
ver 2.x : mobile 버전
ver 3.x : pc와 mobile을 통합한 버전

html에 jQuery 불러오기

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

태그 불러오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            $('h2').css('color','red'); // 태그 선택자
            $('.cl01').css('color','yellow'); // 클래스 선택자 
            $('h1+p+h2~h2~ul>li>a').css('color','green');
            $('h1+p+h2~h2~ul>li:nth-child(2n-1)>a').css('color','orange');
            $('a[href="#i4"]').css('color','purple');
        }
    </script>
</head>
<body>
    <h1>대제목</h1>
    <p>내용1</p>
    <h2 class="cl01">소제목1</h2>
    <p id="id01" class="cl01 cl02">내용1</p>
    <p class="cl01">내용2</p>
    <h2 class="cl02">소제목2</h2>
    <p>내용3</p>
    <h2 id="id02">소제목3</h2>
    <p class="cl01">내용4</p>
    <p>내용5</p>
    <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#i4">item3</a></li>
    </ul>
</html>

메소드 불러오기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            $('h1').next().css('color','red');
            $('h1').next().next().css('color','green');
            $('h1').next().next().prev().prev().css('color','orange');
            $('ul').children().css('color','purple');
            $('ul').children().first().css('color','blue');
            $('ul').children().first().next().css('color','pink');
            $('ul').children().first().next().children().css('color','pink');
            $('ul').children().first().next().children().first().css('color','red');
            $('ul').children().first().next().children().first().parent().parent().prev().prev().prev().css('color','orange');
        }
    </script>
</head>
<body>
    <h1>대제목</h1>
    <p>내용1</p>
    <h2 class="cl01">소제목1</h2>
    <p id="id01" class="cl01 cl02">내용1</p>
    <p class="cl01">내용2</p>
    <h2 class="cl02">소제목2</h2>
    <p>내용3</p>
    <h2 id="id02">소제목3</h2>
    <p class="cl01">내용4</p>
    <p>내용5</p>
    <ul>
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
    <li><a href="#i4">item3</a></li>
    </ul>
</html>

$('h1+p+h2+p').nextAll().css('color','red');
$('h1+p+h2+p').prevAll().css('color','green');
$('h1+p+h2+p').siblings().css('color','pink'); //자기자신을 뺸 나머지 모든 형제요소

$('ul').find('a').css('color','orange'); //자식요소를 검색할 떄
$('h2').filter('p+p+h2').css('color','purple'); 
$('ul').children().filter('li:first-child').css('color','yellow'); 
$('ul').children().eq(1).css('color','beige'); 
$('ul').has('p').css('color','beige'); 
$('li').not(":nth-child(2)").children().css('color','green'); 
$('h1').next().add($('h1')).css('color','purple'); 
$('li:eq(0)').css('color','purple'); 
$('li:gt(6)').css('color','purple'); 
$('li:lt(3)').css('color','yellow');

메소드 속성 받기

var color=$('h1').css('color');
console.log(color); // rbb(0,0,0) - jQuery가 부여하는 css는 in-line 속성이 아니다.

var colors=$('h1').css(['color','backgroun-color']); 
console.log(colors); // return값은 object로 나온다. 

$('li>a').css('color',function(a,b){return 'rgb('+(a*25)+',0,0)';});

$('h1').css({'color':'green','background-color':'yellow'});

var input_type=$('input:eq(1)').attr('type');
console.log(input_type);
var img_src=$('img').attr('src');
// console.log(img_src);
$('img').attr('width','200px'); // in-line 방식의 속성 부여하기 

var input_val=$('input').first().val();
console.log(input_val);

$('input').first().attr('readonly','readonly');
$('input').first().prop('readonly',true);
$('input').eq(1).prop('disabled',true);
$('input[type="checkbox"]').eq(0).prop('checked',true);
$('option').eq(3).prop('selected',true);

움직이는 이미지 만들기

method 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <style rel="stylesheet" type="text/css">
        body{width:1200px;}
        img{width:200px;}
    </style>
    <script type="text/javascript">
        var cnt=0;
        var callback=function(){
            cnt++;
            if(cnt>6)cnt=1;
            $('.loop').html('<img src="imgs/image0'+cnt+'.jpg"/>');

        };
        $(function(){
            $('.loop').html('<img src="imgs/image01.jpg"/>');
            setInterval(callback,1000);
        })
    </script>
</head>
<body>
    <div class="loop"></div>
</body>
</html>

method 2

var cnt=0;
var callback=function(){
    $('img').first().appendTo('.loop');
};
$(function(){
    $('.loop').html($('.loop').html()+'<img src="imgs/image01.jpg"/>');
    $('.loop').html($('.loop').html()+'<img src="imgs/image02.jpg"/>');
    $('.loop').html($('.loop').html()+'<img src="imgs/image03.jpg"/>');
    $('.loop').html($('.loop').html()+'<img src="imgs/image04.jpg"/>');
    $('.loop').html($('.loop').html()+'<img src="imgs/image05.jpg"/>');
    $('.loop').html($('.loop').html()+'<img src="imgs/image06.jpg"/>');
    setInterval(callback,1000);
})

method 3

var cnt=0;
var callback=function(){
    cnt++;
    if(cnt>6)cnt=1;
    $('img').attr('src','imgs/image0'+cnt+'.jpg');
};
$(function(){
    $('.loop').html('<img src="imgs/image01.jpg"/>');
    setInterval(callback,1000);
})

배열

var node=$('h1')[0];
console.log(node);

console.log($('<h2>test</h2>'));

console.log($(['item1','item2','item3']));
console.log($(['h2','p']));
console.log($('h2','p'));
console.log($('<h2/>,<p/>').text('test'));

var arr=['item1','item2','item3','item4'];
for(var i=0; i<arr.length; i++){console.log(arr[i]);};
arr.forEach(function(a,b){console.log(a,b);});
// (arr).each(function(a,b){console.log(a,b);});
$(document.querySelectorAll('h2'));
var cb=function(){console.log('call');};
$(cb);

// $(document).ready(function(){alert($('h1').text());});
// $(document).unload(function(){console.log('unloaded');});
// $(window).error(function(){console.log('err');});

// $(window).resize(function(e){
//     console.log('resize',e);
// })
$(window).resize(function(e){
    console.log('resize',$(window).width(),$(window).height());
});
$(window).scroll(function(e){
    console.log($(document).height()-$(window).height());
    console.log('scroll',$(window).scrollTop());
});

버튼

$(function(){
    // $('button').eq(0).click(function(e){
        //     console.log('첫번째 버튼');
    // });
    // $('button').eq(1).dblclick(function(e){
        //     console.log('두번째 버튼');
    // });
    // $('button','.target').click(function(e){
        //     console.log($(e.target).text());
    // });
    $('button')
        .first().click(function(e){
            console.log('첫번째');
        })
        .next().click(function(e){
            console.log('두번째');
        })
        .next().click(function(e){
            console.log('세번째');
    });
});

$('button')
    .first()
    .click(function(e){
        console.log('클릭');
    })
    .mouseup(function(e){
        console.log('버튼 위로');
    })
    .mousedown(function(e){
        console.log('버튼 아래로');
});

마우스

$(function(){
    $('button')
        .hover(function(e){
        console.log('hover');
    })
    .mouseover(function(e){
        console.log('mouseover');
    })
    .mouseenter(function(e){
        console.log('mouseenter');
    });
});

이벤트 전파 막기

$('div').mouseenter(function(e){
    console.log('위로');
}).mouseleave(function(e){
    console.log('밖으로');
});

마우스 위치

$('div').mousemove(function(e){
    console.log(e.screenX,e.screenY);
})

키 이벤트

작성시 글 작성

$('input')
    .keydown(function(e){
        console.log('keydown',e.key,e.keyCode,$(e.target).val());
    })
    .keypress(function(e){
        console.log('keypress',e.key,e.keyCode,$(e.target).val());
    })
    .keyup(function(e){
        console.log('keyup',e.key,e.keyCode,$(e.target).val());
        $('.target').html($(e.target).val()+"<br/>");
});

엔터 누름시 글 작성

$('input')
    .change(function(e){
        $('.target').html($('.target').html()+$(e.target).val()+"<br/>");
        $(e.target).val("");
});

form 이벤트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <style rel="stylesheet" type="text/css">
        .target{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .target>div{
            background-color: green;
            width: 200px;
            height: 200px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('form').submit(function(){
                if($('input').eq(0).val()=='')
                    return false;
                if($('input').eq(1).val()=='')
                    return false;
            });
            $('input').eq(0)
                .focus(function(e){
                    $(e.target).val("");
                })
                .blur(function(e){
                    if($(e.target).val().length<4) {
                        // alert('4자 이상');
                        $(e.target).focus();
                    }
                });
            $('input').eq(1)
                .focusin(function(e){
                    $(e.target).val("");
                })
                .focusout(function(e){
                    if($(e.target).val().length<4) alert('4자 이상');
                });
        });

    </script>
</head>
<body>
    <h1></h1>
    <form action="#">
        <div><label><input type="text" name="id"></label></div>
        <div><label><input type="password" name="pw"></label></div>
        <div>
            <input type="radio" name="ra"><label>item1</label>
            <input type="radio" name="ra"><label>item2</label>
            <input type="radio" name="ra"><label>item3</label>
        </div>
        <div>
            <input type="checkbox" name="ck"><label>item1</label>
            <input type="checkbox" name="ck"><label>item2</label>
            <input type="checkbox" name="ck"><label>item3</label>
        </div>
        <div>
            <select name="" id="">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
                <option>option4</option>
            </select>
            <div><button type="submit">입력</button>
                <button type="reset">취소</button></div>
        </div>
    </form>
</body>
</html>

event 트리거

$(document).ready(function(){
    // $('button').click(function(){
    //     console.log('클릭');
    // });

    // jQuery 1.3+
    // $('button').live('click',function(e){
    //     console.log('클릭');
    // });

    // jQuery 1.4.3+
    // $(document).delegate('button','click',function(e){
    //     console.log(e.target.innerHTML);
    // });

    // jQuery 1.7 ~
    $(document).on('click','button',function(e){
        // console.log(e.target.innerHTML);
        console.log(e.target.this);
        $('button').after('<button>new'+(cnt++)+'</button>');
    });
});
var cnt=1;

$(document).on('ready',function(){
    $('button').on('click',function(e){
        console.log('클릭');
    });
});

이벤트 끄기

$('button').on('click',function(e){
    console.log('클릭');
    $(e.target).off('click');
});

var callback=function(e){
    alert('클릭');
};
$('button').on('click',function(e){
    console.log('클릭');
    $('button').off('click',callback); // 버튼을 클릭하는 alert의 이벤트를 끈다. 
});
$('button').on('click',callback);

한번만 동작하는 이벤트 만들기

$('button').one('click',function(e){
    console.log('클릭');
});