본문 바로가기
Front/JavaScript

ACE-T's JS Part 03. Jquery 기초를 배워봅시다!

by 태하팍 2014. 5. 10.
반응형


2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은??


2014/05/08 - [Script/JavaScript] - ACE-T's JS_Part 02. Style과 Event 다루기!!


오늘은 어제 적용해본 Jquery에 대해서 간단히 설명 하려고 합니다 ㅎㅎ


<< 전체 화면 >>




하나하나씩 적용한 내용을 살펴 보도록 하겠습니다!~


Result  : Jquery로 CSS변경 해보기


UI source




JS source

$(document).ready(function(){                         // DOM 생성이 완료 되면 실행.

 

     // CSS 변경해보기!!

$('#study').css('background','pink');            // $('')라는 것으로  Jquery object화 하는 것 입니다.

$('#develop').css('background','yellow');    // 또한 매개변수로는 #이면 id, .이면 class, 그냥이면 element

$('#result').css('background','skyblue');     // .css() 를 통해 css의 내용들을 바꾼다는 내용입니다.  

    
     // 여러가지 테스트 흔적..ㅋㅋ
     //$('body ul #notice').hide();            // body 찾고 자식셀렉터인 ul 찾고 #notice, 즉 id가 notice를 찾습니다.  

//var home = $('div ul');                   // 변수에 대입도 가능 합니다.  var 변수 = $(''); - jquery 객체

//home.find('#fCome').hide();         // .hide()는 뜻그대로 숨기는 기능 입니다. .show()도 있겠죵!

//$('.tab-pane').hide();






    Result : Jquery로 이미지 조정 해보기



UI Source



JS Source

var imgAttr1 = $('.carousel-inner #img1');  // 이것 또한 class찾고 id가 img1인 것을 찾습니다.

var imgAttr2 = $('.carousel-inner #img2');

var imgAttr3 = $('.carousel-inner #img3');

imgAttr1.width('1050px');        // width는 가로, height는 세로 크기 조절!

imgAttr1.height('350px');

imgAttr2.width('1050px');

imgAttr2.height('450px');

imgAttr3.width('1050px');

imgAttr3.height('550px');






Result



UI Source



JS Source

/* facebookLink */

//$('#facebookLink').fadeIn();        // 없던 것이 보이게!

$('#facebookLink').slideDown();   // 없던 것이 보이게!






Result - Jquery를 사용한 애니메이션 효과



UI Source




JS Source

// 애니메이션 효과 입니다. 날아오기!!

var div1=$('#div1');

div1.animate({            // 애니메이션 효과!   0,0 에서 300, 300으로 이동하게 된다.

top: 300,

left: 300

},1000);                      // 빠르기 지정

div1.slideUp(2000);   // 있던 것이 사라지게!


//$('#div1').text('말만? NO!, 생각만? NO!!'); // 텍스트가 교체! html()도 있다!

//$('#div1').empty();  // div는 남아있지만 텍스트는 사라진다.

//$('.carousel-inner #attrTest').attr('src', 'resources/img/acet.png'); // 요소의 속성값을 변경하는 메소드!






Result - Jquery를 이용한 이벤트


검색 버튼 눌렀을 경우


마우스를 가져다 댈 경우


커서가 있을 경우



UI Source




JS Source

//$('#searchInput').val('검색할 키워드를 넣어주세요!');

     var searchInput=$('#searchInput');    // 변수로 저장, id가 searchInput인 input box

searchInput.width('20em');                 // 길이 조정


/***** EVENT ******/

// click

var searchBtn = $('#searchBtn');

   searchBtn.click(function(){               // click event는 간단히  click()를 사용하면 된다.

   //$('#searchInput').empty();

   alert("click 되었습니다.");

});



// mouseenter, mouseleave

searchInput.mouseenter(function(){      // 마우스를 가져다 대었을 때

   searchInput.val('검색할 키워드를 넣어주세요!');

});


    searchInput.mouseleave(function(){      // 마우스를 띄었을 때

    searchInput.val('');  // empty()가 안먹힘;;

    //$('#searchInput').val('검색할 키워드를 넣어주세요!');

});

    

    

   // focus, blur

    searchInput.focus(function(){            // 마우스 커서

       searchInput.val(''); // empty();

    });

    

    

});






저번 시간에 한번 해봐야겠다던 그 이벤트!

um..자바스크립트쪽은 따로 더 공부를 하면서 정리하도록 하겠습니다^^

// 사용자 이벤트 테스트 

/*window.onload=function(){

   var sBtn = window.document.getElementById("searchBtn");

   sBtn.addEventListener("click", function(e){

  // 1. 이벤트 생성

  var myEvent = document.createEvent("Event");


  // 2. 이벤트 객체에 이벤트와 함께 담아 보낼 데이터 추

  myEvent.data1 ="Sorry Not yet..Support! 검색은 루씬 검색엔진으로 할 예정 입니다!";


  // 3. 이벤트 초기화

  myEvent.initEvent("myEvent", false, false);


  // 4. 이벤트 발생

  sBtn.dispatchEvent(myEvent);    

   });

   

   sBtn.addEventListener("myEvent", function(e){

       alert("검색은..!, target ="+e.target.id+", data1 ="+e.data1);


    });

}*/


<< 소스 파일 >>


변수로 뺀 js

mainPage.js


변수로 빼지 않고 일일이 $('')로 한 소스

old_mainPage.js


mainPage.css



<< 참고 사항 >> - 친구가 제공!



끝으로 자바스크립에서의 DOM접근을 구현해보다가 Jquery를 통해 접근을 해보니 정말 간단하고 쉬운것을 알 수가 있었습니다.

기초적인 것만으로도 간단히 사이트를 꾸며 볼수 있었던 것 같습니다.

차근차근 하나씩 해봐야겠네요^-^/


facebook group - javascript 제대로 배우기에 올리는 글 입니다.

감사합니다.


                 - END -

반응형