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

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

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

window.onalod -  페이지 리소스가지 모두 완료 되었을때 실행

$(document).ready() - 이미지등 리소스와 상관없이 DOM 생성이 완료되면 실행.

$("#changePasswordButton").unbind("click"); -  id가 changePasswordButton인 click 이벤트를 해제한다.

$("#changePasswordButton").click(function(e) {

 e.preventDefault();

 $("#changePasswordForm").submit();

}); - id가 changePasswordButton인 click 하였을 경우 submit()하여 준다.

함수

1. die(); - live 이벤트로 연결했을 경우 모든 이벤트 제거

2. live(); - 이벤트 등록(jquery1.7에서는 사라져서 on을 사용한다고함)

3. ajaxForm(); - form태그에 관련된 부분을 비동기로 처리할때 사용하는 함수

3-1. dataType : 반환 받을 데이터 형식. json,xml,script 이렇게 세종류 지원

3-2. beforeSubmit : 폼전송 되기 전에 호출되는 콜백함수. 유효성 검사하는 로직을 넣으면 좋다. return false 로 submit을 cancel 한다.

3-3. success : 성공했을때 실행되는 콜백. 서버에서 반환되는 값을 받아 처리한다.

3-4. restform : 폼을 리셋시킨다.

4. each(); script에서 데이터 검증을 할때 같은 name 값이거나 class 를 each를 사용해서 데이터를 불러올수 있음.

.html()  - HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다.

           만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다

.arrt() - 인자에 따라 2가지로 사용할 수 있습니다. 하나의 인자만 있다면 속성값을 가져오는 것이고 2개의 인자를 쓰면 속성값을 요소에 부여하는 것입니다.

.animate() - css 속성들을 이용하여 사용자 애니메이션을 수행 하는 것 입니다.

.get() -  기본적으로 서버로부터 데이터를 가져오는데 사용됩니다.

.post() - 서버로부터 일부 데이터를 가져옵니다.

 

$( '#dialog' ).dialog({

 title : '레이어 팝업',   //--- 팝업 타이틀에 나타나는 문구 설정

 width : 200,      //---넓이 설정

 maxWidth : 300,    //--- 최대 넓이 설정

 height : 300,      //---높이 설정

 maxHeight : 400,   //--- 최대 높이 설정

 modal : true,    //--- 레이어 팝업을 뜰 때 부모창을 비활성화 설정.

 resizable : false,   //--- 사이즈 조절 불가 설정 maxWidth나 maxHeight가 쓸모없어짐.

 dragStart : function(){     //--- 이벤트 옵션 설정. 드래그가 시작되면 호출...

  alert( 'dragStart' );

 }

});

[객체탐색]

- filter() : 조건에 맞는 객체 선택

  . $("h3:even").css

  . $("h3").filter(":even").css

  . $("h3").filter(function(index) {

        return index %  3 == 0;

       });

- end() : 문서 객체 탐색 종료

  . $("h1").css("background", "orange").filter(":even").css("color", "red").filter(":odd"); 

   => filter 사용 시 전체 결과가 리턴되는 것이 아니라 filter된 element들만 리턴되어 의도대로 처리되지 않는다. 이를 해결하기 위해서는 아래와 같이 메서드 체이닝을 분리해서 처리하던가

    $("h1").css("background", "orange");

    $("h1:even).css("color", "white");

    $("h1:odd).css("color", "red");

   end() 메서드를 사용하여 filter전 element들을 대상으로 처리하도록 해야 함.

    $("h1").css("background", "orange").filter(":even").css("color", "white").end().filter(":odd").css("color", "red");

 - eq(), first(), last() : 조건에 맞는 객체 선택

  . $("h1:frist").css()

  . $("h1").first().css()

 - is() : true/false , 인자로 넣은 선택자 인지 아닌지

  . $("h1").each(function() {

      if($(this).is('.selected')) {

         //현재 실행되는 엘리먼트에 selected라는 클래스 속성이 있으면 실행하는 코드

        }

      }

 - find() 특정 엘리먼트를 찾아준다.

 

※ Jquery 특징

1. Selector 

 - html 문서의 DOM 엘리먼트를 선택, 접근하는 역할을 한다.

 - 전역선택자 : $("*")

 - 태그 선택자 : $("tag_name")

 - 아이디 선택자 : $("#id_value")

 - 클래스 선택자 : $(".class_value")

 - 자손 선택자 : $("parent > a_child")

 - 후손 선택자 : $("parent all_childs")

 - 속성 선택자 :  [속성=값]   |, ~, ^, $, *

 - 가상클래스선택자 : $(:button)

 :not(),:nth-child(), :nth-last-child(), :nth-last-of-type(), 

 :nth-of-type(), :odd, :only-child, :only-of-type, :parent

2. Method Chain

 - 메소드 하나만 사용하는 것이 아닌 메소드체인 형태로 사용가능해서 코드의 반복을 피할수 있고 가독성도 뛰어나다.

예) $('#id').메소드1().메소드2('size','10').메소드3(); 

3. Ajax

 - Ajax를 구현하기 위해서는 복잡한 자바 스크립트가 필요했는데 이것을 단순화 시켜 누구나 사용가능하게 해주었다.

예) $.ajax({

 type: "POST",

 url: "/org.tree.dialog.do",

 data: {"orgId": orgId},

 cache: false,

 async: true,

 dataType: "html",

 success: function(data, textStatus, XMLHttpRequest) {

  $("#orgTreeDialog").html(data);

 },

 error:function (xhr, ajaxOptions, thrownError){

  alert_error(xhr, thrownError);

 }

});

4. 플러그인

 

------------

jQuery.ajaxSetup( options ) - Ajax 요청 시 옵션 값들을 정의합니다.

예 제 

$.ajaxSetup() 함수에서 옵션값을 정의하고 실제 Ajax 요청 함수에는 간단히 data 만 추가하여 통신합니다.

$.ajaxSetup({

   url: "/xmlhttp/",

   global: false,

   type: "POST"

});

$.ajax({ data: myData });

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

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

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

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

감사합니다.

                 - END -