jQuery 의 개요, 함수사용법, CSS함수와 인자 Parameter 설정

 

 

jQuery 함수 사용방법을 알아보기 전에, jQuery 에 대하여 간략하게 정리해보면 다음과 같다.

 

 

1. 개요 

 

1) JavaScript 라이브러리 이다 

2) JavaScript 로 만들어놓은 기능(코드)의 집합이다

3) 여전히 문법은 JavaScript 기반이다

4)  jQuery = CSS 의 선택자 (태그, 아이디, 클래스 등등) + JavaScript 기능 + 확장기능

 

 

2. 사용방법

 

 

1) jQuery 기능이 들어있는 코드파일이 필요하다 

2) http://www.jquery.com 에서 다운로드 받거나 링크하여 사용한다.

 

 

3 jQuery 함수 

 

1) 모든 jQuery 구문은 항상 jQuery 함수로 부터 시작된다.

 

        jQuery("#div").css("background-color", "red");   

 

   위 구문은 다음과 동일하다

 

     $("#div").css("background-color", "red");              // jQuery() 를 간략하게 표현한 것이 $() 이다.

 

   아울러, 위 구문은 jQuery를 사용하지 않고 javascript 로 표현하자면, 다음과 같다.

 

     document.getElementById("div1").style.backgroundColor = "yellow";   

 

 

 

2) 태그선택자/ 아이디선택자 / 클래스 선택자/ 계층선택자 를 이용한 jQuery 정의

 

 

     $("input").css("background-color", "red"); 

 

 

     $("#div1").css("background-color", "red"); 

 

 

 

     $(".test").css("background-color", "red");   

 

   

    $(".test > span").css("background-color", "blue"); 

   

 

 

3) JavaScript 객체와 jQuery 객체의 상관관계 

 

 

    var temp1 = document.getElementById("div1");

  

    var temp2 = $("#div1");

  

    위의 경우 temp1 과 temp2 는 같은 결과이다.

 

 

    아래와 같이 javascript 객체와 jQuery 객체는 서로서로 형변환이 가능하다.

 

     //순수 자바스크립트 객체 -> jQuery객체 형변환

     $(document.getElementById("div1")).css("color", "yellow");

 

     //jQuery객체 -> 순수 자바스크립트 객체

 

     $("#div1")[0].title = "도움말";

 

 

 

4. jQuery 로 CSS 함수 호출예제

 

 

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").css("border-width", function(i){

             return i + 25;

        });

    });

});

 

</script>

 

 

 

jQuery 가 제공하는 css 함수를 이용하면 특정 엘리먼트의 css 속성을 변경할 수가 있는데, 

이때, css 함수에 인자로 전달되는 값은 css 속성이나 css 속성을 결과값으로하는 함수가 될수있고,

특이하게 css 자체함수가 될 수도 있다.

 

 

아래와 같이 CSS 가 정의되어 있다고 가정할때, 

#FFF 와 scale(0.5, 0.5) 는 겉보기에는 상수와 함수로 상이하게 보이지만,

jQuery  입장에서는 전달해야하는 문자열일 뿐이다.

 

div {

    color : #FFF;
    transform: scale(0.5, 0.5);
}

 

따라서 jQuery 에서 color 값에대하여 접근할 때는 아래와 같이 하면 된다. 

 

$('div').css('color', "#FFF");

 

그리고, scale(0.5,0.5) 의 경우에는 아래와 같이 코딩하면 된다.

 

$("div").css('transform', 'scale(0.5,0.5)');

 

만약 scale 값이 사용자의 화면전환 등으로 인하여, 동적으로 변경되어야 할 경우에는 아래와 같이 

parameter 를 이용하여 사용할 수 있다. 

 

var nDeviceHeight = window.innerHeight;

var nDeviceWidth  = window.innerWidth;

 

 

$("div").css('transform', 'scale('+nDeviceHeight +','+nDeviceWidth  +')');

 

위 코드의 scale 부분이 'scale(nDeviceHeight, nDeviceWidth)' 와 같이 코딩되지 않고 

위와 같이 코딩된 이유는 jQuery 의 CSS 함수에 들어가는 인자는 문자열이기 때문이다.

 

앞서 말했듯이 #FFF 와 scale(0.5, 0.5) 는 겉보기에는 상수와 함수로 상이하게 보이지만,

jQuery  입장에서는 전달해야하는 문자열일 뿐이기 때문이다.