객체

  <script>

    // 객체 생성
    var obj = {
      'name': '홍길동',
      'age': 30
    };

    // 속성(프로퍼티) 추가 extend() 메소드
    $.extend(
      obj,      // 객체 obj에 속성을 추가하겠다
      {
        'mobile': '010-1111-1111',
        'address': 'seoul'
      }
    )

    // 속성(프로퍼티) 순회 each() 메소드
    
    // 1. 속성만 순회하기
    $.each(obj, function(p){ 
    // obj: 순회할 객체, p: obj에 있는 속성을 하나씩 꺼내서 순회
      console.log(p, obj.p, obj[p]);  
      // p는 string 타입이므로 obj.p는 지원하지 않고, obj[p]만 가능하다.
    })

    // 2. 속성과 값 모두 순회하기
    $.each(obj, function(p, value){
      console.log(p, value);
    })

속성만 순회한 결과

obj.p를 지원하지 않는 이유

p가 스트링 'name'일 경우
p === 'name'
obj.p === obj.'name' (문법오류발생)
obj[p] === obj['name']

---

배열

// 배열 생성 및 초기화
var fourSeason = ['spring', 'summer', 'autumn', 'winter'];

// 배열 요소 순회 each() 메소드
$.each(fourSeason, function(i){        // i : 배열 인덱스
console.log(i, fourSeason[i]);
})
$.each(fourSeason, function(i, elem){  // i : 배열 인덱스,  elem : 배열 요소
console.log(i, elem);
  
// 배열 생성 및 초기화
var people = [
	{
		'name': 'alice',
		'age': 30,
    	 'mobile': '010-0000-0000'
	},
	{
        'name': 'james',
        'age': 40,
        'mobile': '010-1111-1111'
      }
	]

fourSeason 배열의 요소를

오른쪽과 같은 형태로 적어주려면

    var ol = $('<ol>');
    
    $.each(fourSeason, function(i, elem){
      ol.append($('<li>').text(elem));
    })

    $('#box1').append(ol);

이 때 아래 두 줄은 둘 다 box1에 넣겠다는 의미의 동일한 코드. 아무거나 써도 됨

$('#box1').append(ol);
ol.appendTo($('#box1));

---

effect

  <div>
    <button onclick="location.reload()">새로고침</button>
    <button id="btn_open">열기</button>
    <button id="btn_close">닫기</button>
    <button id="btn_toggle">토글</button>
  </div>
  <div id="img"></div>


  <script>


    /*
      닫기 효과
      1. hide()     : 그냥 닫힌다.
      2. fadeOut()  : 서서히 닫힌다.
      3. fadeTo()   : 서서히 투명해진다.
      4. slideUp()  : 위로 슬라이드되면서 닫힌다.
    */
    $('#btn_close').click(function(){
      // $('#img').hide();
      /*
      $('#img').fadeOut(2000, 'linear', function(){
        alert('닫혔습니다.');
      });  // 2초 동안 서서히 닫힌다. 일정하게 닫힌다. 닫히면 function(){}이 실행된다.
      */
      /*
      $('#img').slideUp(2000, 'linear', function(){
        alert('닫혔습니다.');
      });  // 2초 동안 위로 슬라이드되면서 닫힌다. 일정하게 닫힌다. 닫히면 function(){}이 실행된다.
      */
      $('#img').fadeTo(2000, 0.5);  // 2초 동안 opacity: 0.5로 조정한다.
    })


    /*
      열기 효과
      1. show()      : 그냥 나타난다.
      2. fadeIn()    : 서서히 나타난다.
      3. slideDown() : 아래로 슬라이드되면서 나타난다.
    */

    $('#btn_open').click(function(){
      // $('#img').show();
      /*
      $('#img').fadeIn(2000, 'swing', function(){
        alert('열렸습니다.');
      });  // 2초 동안 서서히 나타난다. 속도가 다르게 열린다. 열리면 function(){}이 실행된다. (swing은 기본값이라 안적어도됨. 빨리 변한다)
      */
      /*
      $('#img').slideDown(2000, 'linear', function(){
        alert('열렸습니다.');
      });  // 2초 동안 아래로 슬라이트되면서 나타난다. 속도가 다르게 나타난다. 나타나면 function(){}이 실행된다. (linear는 일정한 속도로 변한다)
      */
    })


    /*
      토글 효과
      1. toggle()      : 그냥 나타났다 사라진다.
      2. fadeToggle()  : 서서히 나타났다 사라진다.
      3. slideToglle() : 위/아래로 슬라이드되면서 나타났다 사라진다.
    */
    $('#btn_toggle').click(function(){
      // $('#img').toggle();
      // $('#img').fadeToggle();
      $('#img').slideToggle();
    })


  </script>