jQuery 기본(1)

"$"객체의 사용 
1. jQuery 함수로부터 전달되는 파라미터 받기 
-jQuery의 모든 기능은 $라는 객체의 하위로 포함되어 있다. 
-“$”는 jQuery의 모든 기능을 담고 있는 객체이자 함수이다. 
-jQuery 함수로 페이지가 열릴 때 특정 함수를 호출하게 되면, 이 함수는 파라미터로  $라는 객체를 받는다. 이 객체를 통하여 jQuery의 막강한 기능을 사용할 수 있게 된다.

2.HTML 요소를 획득하기
-Classic Javascript에서 사용하던 document.getElementById(“id값”) 구문은 $(“CSS 셀렉터”) 형태로 축약된다

3.innerHTML의 간결화
-$ 함수를 사용하여 획득한 요소는 html 함수를 내장하고 있는 객체 형태가 된다. 
-innerHTML 대신 html() 함수를 사용하여 요소 안에 새로운 내용을 추가할 수 있다.

// h1.innerHTML = "Hello Javascript";   -->기존 Javascript
h1.html("Hello jQuery");                     --> jQuery 기능

4.함수의 이름 대신, 함수 자체를 사용하기
-jQuery(함수이름); 형태로 사용되는 구문은, jQuery(function($) { ... }); 형식으로 한 번 더 축약될 수 있다. 
-이 형태가 jQuery의 표준 실행 문법이다.

5.함수 간결화
-4번의 jQuery 함수를 직접적으로 호출하는 것이 표준 사용 방법이지만, 
-축약으로 "$"를 함수로 직접 사용하는 것도 지원하기 때문에 대부분의 웹사이트들이 이 방법을 사용한다.
$(function() {
... jQuery 를 활용한 기능 구현 ...
}

jQuery의 CSS 셀렉터
jQuery에서 제어할 대상에게 접근하는 방법

-h1 태그 요소에 대한 획득 
var mytag = $("h1");

-hello 라는 CSS 클래스를 갖는 요소에 대한 획득 
var mytag = $(".hello");
 
-hello 라는 id 속성을 갖는 요소에 대한 획득
var mytag = $("#hello");

jQuery 에서 CSS 셀렉터의 중요성 
jQuery에서는 제어할 대상을 객체화 하기 위한 파라미터로 CSS의 셀렉터가 사용되기 때문에, CSS 셀렉터를 정리하는 것은 요소에 대한 접근을 위
해서 매우 중요하다. 
즉 프로그래밍적인 표현으로 다시 정리하자면, CSS의 셀렉터가 jQuery에서 객체 생성을 위한 생성자 파라미터로 사용된다.

CSS 구체성 단위
TAG :  1점
CLASS : 10점
ID :  100점
HTML태그의 style속성 사용 : 1000점
!importent : 1000점보다 높음

JQery 이벤트 처리 개요

jQuery에서 이벤트를 정의하는 시점 
이벤트의 처리는 사용자가 어떤 행위를 하게 되는 특정 HTML요소에 적용하여 동작을 구현하는 것이다.  
그러므로 이벤트는 사용자가 어떤 행위를 하게 되는 특정 HTML 요소에 대하여 적용한다. 
HTML요소에 이벤트를 정의하기 위해서는 브라우저가 해당 요소를 인지한 이후여야한다. 
즉, 이벤트를 정의하는 구문은 jQuery의 load처리 안에서 기술된다.
결론 : 한마디로 $(function () { } 안에 작성해라

 

이벤트를 정의하는 방법
$("셀렉터").이벤트이름(function() {
... 처리내용 ...
});

이벤트 종류
click, dbclick, hover, kewdown, keyup, keypress, focus, change, submit, error 등

Form관련 이벤트와 입력값 관련 기능
form 요소의 입력값 처리하기
-<input type=”text”>, <input type=”password”>, <textarea> 요소의 입력값은 val() 함수를 사용하여 사용자가 입력한 내용을 리턴받을 수 있다.

var foo = $("CSS셀렉터").val();

-val() 함수에 파라미터를 전달하면 반대로 값을 강제 설정할 수 있다.
var foo = “안녕하세요”;
$("CSS셀렉터").val(foo);

라디오 버튼의 체크 상태 검사하기
<input type=”radio”>에서 선택된 항목은 jQuery의 :checked 가상 클래스로 표현된다. 
특정 요소가 가상클래스의 조건이 충족되는지를 검사하기 위해서는 is() 함수를 사용한다.

var foo = $("CSS셀렉터").is(“:checked”);

is() 함수의 리턴값을 if문으로 검사하면, true인 경우 체크가 되었다고 판단하는 것이 가능해 진다.

if (foo) {
... 체크되었음 ..
}

라디오 버튼의 체크 항목 값 가져오기
<input type=”radio”>에서 선택된 항목은 jQuery의 :checked 가상 클래스로 표현되므로, 해당 항목에 대한 요소를 획득하여 val() 함수로 값을 얻어오게 되면, 체크된 라디오 버튼의 값을 획득할 수 있다.

var foo = $("CSS셀렉터:checked").val();

체크박스의 체크 항목 값 가져오기
체크박스 역시 라디오 버튼과 같은 방식으로 선택항목의 값을 가져올 수 있다. 하지만, 체크박스는 여러개를 선택할 수 있는 요소이기 때문에, val() 함수의 리턴값이 하나의 값이 아니라, 배열 형태가 된다.

var foo = $("CSS셀렉터:checked").val();    -------> 사용법은 같지만 배열이다.

체크박스의 값을 판단하기 위한 each() 함수
-다중 선택이 처리 가능한 체크박스는 선택된 항목들에 대하여 배열을 이루게 된다. 
-배열 요소들은 jQuery 안에서 each() 함수를 내장하고 있다.  
-each() 함수에 파라미터로 전달된 함수는 배열의 개체 수 만큼 반복 실행된다. 
-파라미터 함수 안에서 $(this)는 각 반복회차에서 읽고 있는 위치의 배열 요소이다. 
-각 배열값에 대하여 val() 함수를 사용하면 선택된 항목의 값을 하나씩 읽을 수 있다.
// 체크박스의 선택항목들을 추출

var hobby = $("input[name='hobby']:checked");
// hobby의 개체 수 만큼 반복적으로 function()이 실행된다.
hobby.each(function() {
// 각 반복되는 처리 안에서 $(this)는 hobby안에 포함된 개체이다.
// --> 체크된 n번째 체크박스임
alert($(this).val());
});

드롭다운 버튼의 선택 항목 표현
<select> 태그로 표현되는 드롭다운 버튼은 HTML 태그에서 각각의 항목을 <option>태그로 표현하기 때문에, <select>태그가 아닌, <option>태그 중 하나가 선택되는 것이다. 이 때, 드롭다운의 선택 항목은 :selected 가상클래스로 표현된다.

선택 항목의 위치
var foo = $("select의 CSS셀렉터 > option:selected").index();

선택항목의 값
선택항목의 값은 val() 함수를 사용하며, <option>태그 항목에 value 속성이 없을 경우, 시작태그와 끝태그 사이의 값을 리턴한다.
var foo = $("select의 CSS셀렉터 > option:selected").val();

요소의 속성값 읽기

HTML태그 요소의 특정 속성값을 얻기 위해서는 attr() 함수를 사용한다.

var 변수 = $(“요소”).attr( “속성이름” );

속성값 변경/추가 하기
HTML태그 요소의 특정 속성값을 지정할 경우도 attr() 함수를 사용한다.

$(“요소”).attr( “속성이름”, “값” );

attr() 함수는 json 형태의 값을 지정하여서 다중처리가 가능하다.

$(“요소”).attr({
    “속성1이름”: “값”,
    “속성1이름”: “값”,
    “속성n이름”: “값”
});


체크박스의 전체 선택 기능
1. 하나의 selector로 전체 체크 
전체 체크 박스를 한번에 제어하기 위해서는 모든 체크박스를 일괄적으로 표현할 수 있는 셀렉터를 사용해야 한다. 이럴 경우 CSS에서는 class 값을 
사용하는 것이 일반적이다. 
전체 체크 기능을 갖는 체크박스는 자신 이외의 다른 체크박스들과는 구분 되어야 하므로, 다른 체크박스들과 중복되지 않는 selector를 사용한다. 
아래의 selector는 #all_check와 .hobby_check로 구분된다.

전체체크는 ID로 제어하고 개별체크는 class로 제어한다.

<!-- 전체 선택용 체크박스 -->
<input type="checkbox" id="all_check" value="Y" />
<!-- 개별 항목들에 대한 체크박스 -->
<input type="checkbox" id="hobby1" class="hobby_check" value="축구" />
<input type="checkbox" id="hobby2" class="hobby_check" value="농구" />
<input type="checkbox" id="hobby3" class="hobby_check" value="야구" />

2. 전체 선택 체크박스의 상태 변경 감지 
전체 선택을 위한 체크 박스의 상태가 변경되었을 경우, 자기 스스로의 체크 상태를 나머지 체크박스들에게 적용해 준다. 
체크 상태의 감지를 위해서는 “:checked” 가상클래스가 적용되어 있는지를 검사한다. 이 기능은 jQuery의 is() 함수가 갖고 있다.

// #all_check 요소의 상태가 변한 경우
$("#all_check").change(function() {
      // 스스로의 체크 상태 판별
      var is_check = $(this).is(":checked");
      ...
});

3. 체크박스의 체크 상태 속성 제어
체크박스의 선택상태를 판별하는데 쓰이는 checked는 이름만 존재하고 값이없는 형태의 속성이다.  
이러한 속성들의 경우, 값의 적용 여부를 prop()함수에 속성이름과 boolean값의 파라미터로 전달하여 변경 가능하다.

$(".hobby_check").prop("checked", is_check);