[JS] JQuery

JQuery

크로스 브라우징(호환성), 애니메이션 효과 등을 쉽게 구현할 수 있는 자바스크립트 라이브러리입니다. css 선택자를 활용하여, 객체 조작 가능하며 라이브러리로 외부파일을 내 프로젝트(작업 페이지)에 삽입해야 합니다.

JQuery 연결방법

1) CDN 방식

네트워크 차단된 프로젝트에서는 쓰일 수 없습니다.

2) 다운로드 방식

제이쿼리 사이트에서 js 파일 다운로드 후 프로젝트에 삽입합니다.

---

1. 선택자

직접선택자

- 제이쿼리는 css 선택자로 객체 검색이 가능

- 제이쿼리 함수 인수에는 css 선택자가 삽입되어 요소 취득

- 제이쿼리는 문서(html) 로드 순서 상관 없이 쓸 수 있도록 제공되는 메소드 존재 (ready())

- 조회된 요소노드는에 메소드(이벤트) 적용 시 조회된 모든 객체에 이벤트를 자동 바인딩

구문

$('선택자') → 제이쿼리 함수에 인수값을 선택자를 넣어 실행하면, 검색된 제이쿼리 객체가 반환된다.

<div id="myDiv">아이디 검색</div>
<div class="myClass">클래스 검색 </div>
<div class="myClass">클래스 검색 </div>
<div class="myClass">클래스 검색 </div>
<script type="text/javascript">
$(function(){
    // $(document).ready(function(){}); 와 동일한 효과

    console.log($('body'), '테그명으로 객체 검색');
    console.log($('#myDiv'), '아이디로 객체 검색');
    console.log($('.myClass'), '클래스로 객체 검색');
    console.log($('[id]'), '속성명으로 객체 검색');
    console.log($('[class=myClass]'), '속성명과 속성값으로 객체 검색');
    });
</script>

1. $('#아이디') : domcument 객체의 아이디 값을 조회하여 일치하는 객체 1개 반환한다.
2. $('.클래스명') : domcument 객체의 클래스 값을 조회하여 일치하는 객체 반환한다.
3. $('태그명') : domcument 객체의 테그명을 조회하여 일치하는 객체 반환한다.
4. $('[속성명]') : domcument 객체의 각 테그에 해당 속성이 있는 모든 객체를 조회하여 일치하는 객체 반환 조회된  요소노드는에 메소드(이벤트) 적용 시 조회된 모든 객체에 이벤트를 자동 바인딩한다.
5. $('[속성명=속성값]') : domcument 객체의 각 테그에 해당 속성과 속성의값이 일치하는 객체를 조회하여 반환한다.

※제이쿼리 객체가 반환이 되었다면 체이닝기법으로 제이쿼리 메서드 혹은 속성을 사용 가능하다.

ready()

문서로딩 완료 이후 실행되는 메소드로 제이쿼리 함수 인수에는 css 선택자가 삽입되어 요소를 취득합니다.

<script type="text/javascript">
    $(document).ready(function(){
        //문서 로딩 완료 이후 실행
    });
</script>

<script type="text/javascript">
    $(function(){
        // $(document).ready(function(){}); 와 동일한 효과
    });
</script>

인접관계 선택자

<div id="parent1">
    <div id="parent2">
        <div id="selector"></div>
    </div>
</div>
 
<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
    //1단계 위 부모 객체 검색
    console.log($('#selector').parent(), 'parent');
    //전체 부모 검색
    console.log($('#selector').parents(), 'parents');
    //인수값에 해당되는 부모 검색
    console.log($('#selector').parents('#parent1'), 'parents("#parent1")');

    //1단계 아래 자식 객체 검색
    console.log($('#parent1').children(), 'children');
    //인수값에 해당되는 자식 검색
    console.log($('#parent1').find('#selector'), 'find("#selector")');
</script>

부모 객체 검색

이미 선택된 객체에서 부모 요소 검색 할 수 있는 메소드입니다.

1. $('선택자').parent() : 검색된 객체에서 한단계 위 부모 요소 검색한다.

2. $('선택자').parents('선택자') : 검색된 객체에서 인수값에 해당되는 부모 요소 검색한다.

자식 객체 검색

검색된 객체에서 자식 요소를 검색할 수 있는 메서드입니다.

1. $('선택자').children() -> 검색된 객체에서 자식 요소 1단계 아래 객체 전체 검색한다.
2. $('선택자').find('선택자') -> 검색된 객체에서 인수값에 해당되는 자식요소 전체 검색한다.

위치 탐색 선택자

검색된 객체 중 인덱스로 객체 검색 혹은 첫번째와 마지막 객체 검색을 할 수 있는 메서드입니다. 이외 홀수 짝수 배수 등 다양한 객체를 검색이 가능합니다.

1. $('선택자').first() : 선택된 객체 중 첫번째 요소 선택한다.
2. $('선택자').last() : 선택된 객체 중 마지막 요소 선택한다.
3. $('선택자').eq(index) : 선택된 객체중 인수 값에 해당되는 인덱스 객체 검색한다.

속성 상태에 따른 탐색 선택자

선택한 요소 중 속성 상태에 따라 요소를 선택합니다.

(hidden, checked, selected에 해당되는 객체를 선택할 수 있다.)

<input type="checkbox" class="myCheck" value="1">
<input type="checkbox" class="myCheck" value="2">
<input type="checkbox" class="myCheck" value="3">
<button type="button" id="checkBtn">확인</button>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
        $('#checkBtn').click(function(){
            //체크된 대상 선택
            var checks = $('.myCheck:checked');
            console.log(checks, '체크된 대상');
            console.log(checks.length, '체크된 대상 크기 확인');
            //체크박스 유효성 검사 예제
            if(checks.length == 0){
                alert('1개 이상 선택 하셔야 합니다.');
                return;
        	}
        	//체크된 대상의 값을 확인하기
            checks.each(function(){
                //value 속성으로 값 확인
                console.log(this.value, 'value 속성으로 값 확인');
                //val() 메서드로 값 확인
                console.log($(this).val(), 'val() 메서드로 값 확인');
                //is() 메서드로 상태속성확인
                console.log($(this).is(':hidden'), 'is() 메서드로 값 확인');
        	});
        });
	});
</script>

1. $(':hidden') :선택된 객체가 display:none되어 있는 객체 선택한다.
2. $(':checked') : 선택된 객체가 checked되어 있는 객체 선택한다.
3. $(':selected') : 선택된 객체가 selected되어 있는 객체 선택한다.
4. $('선택자:속성상태') : 직접 선택자와 같이 쓰인다.
5. is('선택자:속성상태') : 위의 속성상태의 진위여부를 파악 할 수 있다.   반환되는 값은 boolean형 이다.

---

2. 이벤트

이벤트 등록 메소드

검색된 객체에 이벤트를 메서드 활용하여 등록이 가능합니다. 

(click, change, keypress, keyup, keydown, blur, hover 등의 다양한 메서드가 존재)

<button type="button" id="actionBtn">확인</button>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script>
 
<script type="text/javascript">
    $(function(){
        //이벤트 등록
        $('#actionBtn').click(function(){
            console.log(this, $(this));
        });

        //on 메서드로 이벤트 등록
        $('#actionBtn').on('click',function(){
            console.log(this, $(this));
        });
    });
</script>

1. $('선택자').이벤트메서드(function(){});
2. $('선택자').인접관계선택자메서드().이벤트메서드(function(){});
3. $('선택자').on('이벤트명', function(){});

※ 이벤트 발동 시점에서 발동 대상은 this 키워드를 활용하여 선택이 가능하며, this는 domcument 객체임으로 $(this)로 변환하여 쓰게되면 제이쿼리 객체로 변환하여 사용이 가능합니다.

이벤트 제거 메소드

등록된 이벤트를 제거할 수 있다.

<button type="button" id="actionBtn">확인</button>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script>
 
<script type="text/javascript">
    $(function(){
        //이벤트 등록
        $('#actionBtn').click(function(){
            console.log(this, $(this));
        });
        //이벤트 제거
        $('#actionBtn').off();
    });
</script>

1. $('선택자').off() : 전체 이벤트 제거한다.
2. $('선택자').off('이벤트명') : 인수값에 해당되는 이벤트 제거한다.

이벤트 트리거

등록된 이벤트를 강제 실행 할 수 있습다.

<button type="button" id="actionBtn">확인</button>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script>
 
<script type="text/javascript">
    $(function(){
        //이벤트 등록
        $('#actionBtn').click(function(){
            console.log(this, $(this));
        });
        //이벤트 트리거
        $('#actionBtn').click();
        $('#actionBtn').trigger('click');
    });
</script>

1. $('선택자').이벤트메서드();
2. $('선택자').trigger('이벤트명');

---

3. 배열 관련 메서드

다중 검색된 객체를 배열관련 메서드로 반복문 처럼 활용할 수 있습니다.

<input type="checkbox" class="myCheck" value="1">
<input type="checkbox" class="myCheck" value="2">
<input type="checkbox" class="myCheck" value="3">
<input type="checkbox" class="myCheck" value="4">
<input type="checkbox" class="myCheck" value="5">

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 
<script type="text/javascript">
    //선택된 객체 each로 반복
    $('.myCheck').each(function(i, d){
    	//console.log(this, $(this))
    	console.log(i, d);
    });

    //선택된 객체의 인덱스값 가지고 오기
    var index = $('.myCheck').index($('.myCheck').eq(0));
    console.log(index, 'index');

    //이벤트 등록 후에 이벤트 발동시 인덱스값 가지고 오기
    $('.myCheck').click(function(){
        var i = $('.myCheck').index(this);
        console.log(i, '인덱스 조회');
    });
</script>

$('선택자').each(function(){}) : 콜백함수의 메게변수 값으로 인덱스값 전달
$('선택자').index(객체) : 인덱스 검색 메서드 (선택자로 검색된 객체 중 index메서드의 인수 객체에 해당되는 인덱스 반환)

---

4. 속성 및 요소 조작 메서드

1) 요소 조작 메소드

선택한 객체의 자식요소의 정보를 가지고 오거나 변경합니다.

<div id="container">
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text2</li>
</ul>
</div>
<button type="button" id="getBtn">요소 가지고 오기</button>
<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
        $('#getBtn').click(function(){
            //html 요소 가지고 오기
            console.log($('#container').html(), 'html요소 가지고 오기');
            //text 요소 가지고 오기
            console.log($('#container').text(), 'text요소 가지고 오기');

            //요소 삽입하기
            var htmlStr = '';
            htmlStr += '<ul>'
            htmlStr += '<li>Text4</li>';
            htmlStr += '</ul>';
            $('#container').html(htmlStr);

            //$('#container').text('<h1>안녕하세요</h1>');

        });
    });
</script>

1. html() : 선택된 객체의 자식 html요소를 가지고 오거나 변경 한다. (innerHTML)
2. text() : 선택된 객체의 자식 text요소를 가지고 오거나 변경 한다. (innerText)

2) 속성 조작 메소드

-  attr(), removeAttr()

선택한 객체의 속성을 생성, 변경, 제거 한다.

<button type="button" id="attrBtn" data-name="홍길동" data-age="20">attr확인</button> 

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
        $('#attrBtn').click(function(){
            //선택한 객체의 속성값을 가지고 온다.
            var name = $(this).attr('data-name');
            var age = $(this).attr('data-age');
            var id = $(this).attr('id');
            console.log(name, age, id);
            //선택한 객체에 속성  생성
            $(this).attr('data-addr', '서울');
            //선택한 객체의 속성을 제거
            $(this).removeAttr('data-age');
        });
    });
</script>

<select id="attrChange">
    <option value=""> :: 선택 :: </option>
    <option value="홍길동" data-age="20" data-addr="서울"> 홍길동 </option>
    <option value="이순신" data-age="25" data-addr="인천"> 이순신 </option>
    <option value="고길동" data-age="30" data-addr="부산"> 고길동 </option>
</select>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
        $('#attrChange').change(function(){
            var val = $(this).val();
            console.log(val, '변경된 값 확인');
            //selected된 option의 속성값 가지고오기
            var option = $(this).children('option:selected');
            var age = option.attr('data-age');
            var addr = option.attr('data-addr');
            console.log(val, age, addr);
        });
    });
</script>

1. attr('속성명') : 선택한 객체의 속성의 값을 가지고온다.
2. attr('속성명','속성값') : 선택한 객체의 속성을 생성 혹은 변경한다.
3. removeAttr('속성명') : 선택한 객체에 인수값에 해당되는 속성을 제거한다.

- prop()

선택한 객체의 상태속성의 값을 가지고오거나 변경한다.

<input type="checkbox" class="propCheck" value="1">
<input type="checkbox" class="propCheck" value="2">
<input type="checkbox" class="propCheck" value="3">
<button type="button" id="propCheckBtn">prop확인</button>
<button type="button" id="allCheckBtn">전체 선택 확인</button>
<button type="button" id="allNotCheckBtn">전체 해제 확인</button>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
        $('#propCheckBtn').click(function(){
            $('.propCheck').each(function(i){
            var result = $(this).prop('checked');
            console.log(i, result);
            });
        });
        $('#allCheckBtn').click(function(){
            //선택된 객체의 전체 상태 변경
            $('.propCheck').prop('checked', true);
        });
        $('#allNotCheckBtn').click(function(){
            $('.propCheck').prop('checked', false);
        });
    });
</script>

1. prop('상태속성명') : 선택된 객체의 상태속성을 확인하여 결과를 boolean값으로 반환한다.
2. prop('상태속성명', true or false) : 선택된 객체의 상태속성을 변경한다.

- val()

<input type="text" id="userName">

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
    	var val = $('input#userName').val();
    	console.log(val);
    });
</script>

1. val() : 선택된 객체에 value의 속성이 있다면 value의 값을 반환한다.
2. val('값') : 선택된 객체에 value의 속성이 있다면 value속성에 값을 삽입한다.

-css()

<button type="button" id="bodyColorBtn">배경색변경</button>

<script src="resource/js/jquery-3.6.1.js" type="text/javascript"></script> 

<script type="text/javascript">
    $(function(){
        var bodyObj = $('body');
        $('#bodyColorBtn').click(function(){
            //css style 속성값 가지고 오기
            var backgroundColor = bodyObj.css('background-color');
            console.log(backgroundColor, 'backgroundColor');
            //css style 부여
            //bodyObj.css('background-color', 'rgba(255, 0, 0, 1)')
            //bodyObj.css('background-color', '#f00');
            bodyObj.css({
                'background-color' : '#f00',
                'color' : '#fff'
            });
        });
    });
</script>

1. css('style 속성명') : 선택된 객체에 적용된 인수값에 해당되는 style 속성의 값을 반환한다.
2. css('style 속성명', 'style 속성의 값') : 선택된 객체에 style 속성을 부여한다.
3. css({'style속성명': 'style 속성의 값', 'style속성명': 'style 속성의 값'}) : 선택된 객체에 style 속성을 여러개 적용시킬때 사용한다.

- addClass(), removeClass(), hasClass()

<style> .red-back-color{background-color: #f00;} </style>
<button type="button" id="toggleClassBtn">클래스변경토글</button>
<script type="text/javascript">
    $(function(){
        var bodyObj = $('body');
        $('#toggleClassBtn').click(function(){
        //hasClass -> 해당 클래스가 있는지 확인
        if(bodyObj.hasClass('red-back-color')){
            	//removeClass -> 해당 클래스 제거
            	bodyObj.removeClass('red-back-color');
            }else{
            	//addClass -> 해당 클래스 삽입
            	bodyObj.addClass('red-back-color');
            }
        });
    });
</script>

1. addClass('클래스명') -> 선택된 객체에 클래스를 추가한다.
2. removeClass('클래스명') -> 선택된 객체에 인수값에 해당되는 클래스를 제거한다.
3. hasClass('클래스명') -> 선택된 객체에 인수값에 해당되는 클래스가 있는지 확인하여 boolean형태의 값으로 반환한다.

---

5. 객체 조작 메서드

- before('새 요소') , after('새 요소')

<div id="center">센터</div>
<button type="button" id="beforBtn">이전삽입</button>
<button type="button" id="afterBtn">다음삽입</button>
<script type="text/javascript">
    var centerObj = $('#center');
    var cnt1 = 0;
    $('#beforBtn').click(function(){
        centerObj.before('<div>이전'+cnt1+'</div>');
        cnt1++;
    });
    var cnt2 = 0;
    $('#afterBtn').click(function(){
        centerObj.after('<div>다음'+cnt2+'</div>');
        cnt2++;
    });
</script>

1. before('새 요소') : 선택된 객체의 이전 위치에 인수값에 해당되는 html 삽입한다.
2. after('새 요소') : 선택된 객체의 다음 위치에 인수값에 해당되는 html 삽입한다.

- remove(), clone()

<ul>
<li>
<button type="button" class="appendBtn">선택된 객체 마지막에 삽입</button> 
<button type="button" class="prependBtn">선택된 객체 첫번째에 삽입</button> 
</li>
</ul>
<script type="text/javascript">
    //중복되는 코드 함수로 작성하기
    var liCloneFn = function(obj, cnt){
    //클릭대상의 부모객체 검색하여 복제
    var liClone = obj.parent().clone();
    liClone.find('button').each(function(){
            var getText= $(this).text();
            $(this).text(getText + cnt);
        });
        return liClone;
    }
    //동적바인딩 
    var cnt1 = 0;
    $(document).on('click', '.appendBtn', function(){
        console.log(this);
        var liClone = liCloneFn($(this), cnt1);
        //클릭대상의 ul 부모객체 검색하여 복제된 대상을 ul 마지막 요소에 삽입
        $(this).parents('ul').append(liClone);
        cnt1++;
    });
    var cnt2 = 0;
    $(document).on('click', '.prependBtn', function(){
        console.log(this);
        var liClone = liCloneFn($(this), cnt2);
        $(this).parents('ul').prepend(liClone);
        cnt2++;
    });
</script>

1. remove() : 선택된 객체를 제거
2. clone() : 선택된 객체를 복제

---

동적바인딩

동적으로 생성된 객체에 이벤트를 등록 할 수 있습니다. on 메서드에 3개의 인수값이 들어가며, 1번째는 이벤트명, 2번째는 선택자, 3번째는 함수가 들어갑니다.

<div id="center">센터</div>

<button type="button" id="beforBtn">이전삽입</button>

<button type="button" id="afterBtn">다음삽입</button>

<script type="text/javascript">

    $(document).on('click', '.prependBtn', function(){
    	//코드 작성
    });

</script>