JS 라이브러리 - jQuery

라이브러리, 프레임워크 : 브라우저에 내장되어 있지 않은 언어 => 상대적으로 무거움

바닐라자바스크립트 : 브라우저에 내장되어 있는 언어 => 상대적으로 가벼움

1. Setting

• CDN 연결
  • 라이브러리 파일 다운로드 사용버전 - jQuery 1.12.4 / jQuery Migrate 3.4.0 
  • http://jQuery.com

jQuery

jQuery = DOM 처리 문법

1.head 위에 script 짤 때

$(document).ready(function(){
    //jQery code;
})

2. body 아래에 script 짤 때 = $(document).ready(function(){} 생략 가능 == window.onload = function(){} 과 같은원리

3. jQuery(document).ready(function(){} == $(function){}

 

2.selector

$('')

 

css 선택자

--체이닝 기법--

$('선택자').method().method().method().method()....; // chaining 기법

$('h1').css('color','red').css('background','green');
$('p').css('color','red').css('background','green');
$('ul').css('color','red').css('background','green');
$('').css('color','red').css('background','green');

필터 선택자

$('tr:odd').css('background','green');
$('tr:even').css('background','yellow');
$('tr:first').css('background','#000').css('color','#fff');
$('tr:last').css('background','#f00').css('color','#00f')

함수 필터 선택자

eq('번호') == css child-of-type()와 같지만 index 번호를 0부터 셈한다 => nth 잘 사용하지 않음

 $('h2:eq(1)').css('background', '#000000').css('color', 'White');

addClass() / removeClass()

1.class 제거 / 추가

$('li').addClass('back1');

$('li').removeClass('back1');

2.each 문 == for 문 ( 배열의 반복문 )

$('선택자').

    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="" alt="">

        $('img').each(function(index){
            $(this).addClass('high_light_'+index);
            // console.log(index,item, this);
        });
        $('img').each(function(index){
            $(this).attr('src','./img'+(index+1)+'.jpg')
;        });

배열관리

   var array = [
    {name:'hanbit Media',link:'http://hanb.co.kr'},
    {name:'Naver',link:'http://naver.com'},
    {name:'Daum',link:'http://daum.net'},
    {name:'Paran',link:'http://paran.com'}
   ] ;

   var output ='';

output += '<ul>';
   $.each(array, function (index,item){
    output += '<li>';
    output +='<a href="'+item.link+'">';
    output +='<span>'+(index+1)+item.name+'</span>';
    output += '</a>';
    output +='</li>'
    });
output += '</ul>';
document.body.innerHTML += output;

--체이닝 기법 끝--

체이닝 기법과 다르게객체 스타일로 속성 설정 가능

ex)

$('선택자').css({

속성 : 값;

속성: 값;

});

$('h3:even').css({backgroundColor:'Black',color:'White'})

$('h3:even').css({'background-color':'Black', color:'White'});

filter() 메소드   =>  (선택자).filter.(선택자);

  <h3>Header-0</h3>
  <h3>Header-1</h3>
  <h3>Header-2</h3>
  <h3>Header-3</h3>
  <h3>Header-4</h3>
  <h3>Header-5</h3>

$('h3').filter(':even').css({
    backgroundColor: 'Black',
    color: 'White'
});

filter() 메소드   =>  (선택자).filter.(function(){ }); => 함수의 retrun 값이 true 가 나와야한다

ex)

1.

 

$('h3').filter(function(index){
    return index % 3 == 0;
}).css({
    backgroundColor:'black',
    color:'white'
})

2.

$('h3').css('background','orange').filter(':even').css('color','red');

end() 메소드 => 문서의 객체 선택을 한 단계 뒤로 돌린다

$('h2').css('background', 'Orange').filter(':even').css('color', 'White').end().filter(':odd').css('color', 'Red');

eq() / first() / last()

$('h2').eq(2).css('background','Orange');
$('h2').first().css('background','Red');
$('h2').last().css('background','Green');

is(id/class/태그명) 메소드 => 문서 객체의 특징을 판별 true/false 반환 ★

** hasClass('클래스명');

class 체크

<p class="select">문서의 단락 내용1</p>
<p>문서의 단락 내용2</p>
<p>문서의 단락 내용3</p>
<p class="select">문서의 단락 내용4</p>

$('p').each(function(index){
    if($(this).is('.select')){
        $(this).css('background','Orange');
        console.log(index);
    }
})

문서에 객체 스타일 추가하기

$('선택자').css('속성','retrun값') => for문처럼 작동한다

<div>박스안의 내용</div>
<p>문서의 단락 내용1</p>
<p>문서의 단락 내용2</p>
<p>문서의 단락 내용3</p>

var color = ['Red','Blue','Purple'];

$('div').css('color','Green')
$('p').css('color',function(index){
    return color[index];
});

문서 객체의 내부 추가

html() , text() 메소드

=> tag 와 textnode 를 생성하는 메소드

=> JS 의 객체.innerHTML 과 같다

=> 중복 사용시 덮어쓰기 처리

$('div.d1').html('<h1>div 박스안에 내용</h1>');
$('p.p1').text('p 박스안에 내용');

여러 태그 사용을 원할 때

=> 변수를 잡아준 뒤 변수안에 태그를 잡아준 후 html() 문에 변수를 호출하는 방법으로 사용

var text = '';
text+='<h1>div 박스안에 내용</h1>';
text+='<p>단락요소입니다</p>';
text+='<img src="./images/Desert.jpg">';

$('.d1').html(text);
$('.p1').text('p 박스안에 내용');

.text() 메소드는 텍스트만 처리하기 때문에 태그를 작성해도 텍스트 그대로 출력

 

문서객체 추가/제거

$('.d1').remove(); //특정 문서 객체 제거
$('.d1').empty(); // 특정 문서 객체 후손 모두 제거

$(A).appendTo(B)메소드 => A를 B의 뒷부분에 추가 

=> 태그의 생성 $(생섷할 태그).appnedTo(생성할 태그의 부모태그)

=>$('선택자').appendTo('생성할 태그의 부모태그') : 태그의 이동(부모의 자식중에 가장 마지막으로 이동)

=>$('선택자').prependTo('생성할 태그의 부모태그') : 태그의 이동(부모의 자식중에 가장 위로 이동)

=> html(),text() 와 다르게 덮어쓰기가 아닌 추가의 개념

=>$(A).prependTo(B)메소드 : A를 B의 앞부분에 추가

<div class="box">
</div>

$('<h1>Heelo World ..!</h1>').appendTo('.box');
$('<p>Heelo World content</p>').appendTo('.box');
$('<img src="images/img1.jpg">').appendTo('.box');

          $(A).append(B)  => B를 A의 뒷 부분에 추가
          $(A).prepend(B)  => B를 A의 앞 부분에 추가
          $(A).after(B)  => B를 A의 뒷 부분에 추가
          $(A).before(B)  => B를 A의 뒷 부분에 추가

 

appendTo() 와 setInterval() 을 이용해 바뀌는 이미지 만들기

<style>
    .gallery{
        width:200px;
        height:150px;
        border:2px solid #f00;
        overflow:hidden
    }
</style>

<body>

    <div class="gallery">
        <img src="images/Chrysanthemum.jpg"/>
        <img src="images/Desert.jpg"/>
        <img src="images/Hydrangeas.jpg"/>
        <img src="images/Jellyfish.jpg"/>
        <img src="images/Koala.jpg"/>
    </div>

    <script>
        
        $('img').css('width',200);

        setInterval(function(){
            $('img').first().appendTo('.gallery');
        },4000)

    </script>
</body>