jquery 사용법 재정리.

 

간단요약:

1. 선택자 지정

2. 함수 지정

3. 속성 지정

 

jquery의 문법대로라면 이 문법대로 간략하게 자주 쓰는 함수를 설명함 아래로 ...

 

1. $('#아이디').css('속성','수치'); // 보이는 외형을 수정 속성은 style 공부를 해야 알 수 있음.

2. $('#아이디').animate('위치값','시간'); // 보이는 객체의 움직임을 지정

3. $('#아이디').text(); // 현재 객체가 가지고 있는 문자열 값

4. $('#아이디').val(); // form 안 input 혹은 selectbox가 가지고 있는 값

5. $('#아이디').toggle(); // 스위치같은 기능. 숨김과 보기를 제어하는 함수

6. $('#아이디').slideToggle(); // 숨김과 보기를 슬라이드로 보여줌.

7. $('#아이디').fadeIn(); 혹은 .fadeOut(); // 숨김과 보기를 밝기변화로 보여줌

8. $('#아이디').show(); 혹은 hide(); // 숨김과 보기를 다이렉트로 보여줌

 

jquery에서 함수로 일련의 행동을 지정한다면 이제 그 함수가 일어나는 조건을 컨트롤 할 수

있다.

ex) 클릭했을때, 더블클릭했을때, 초점이 생겼을때, 초점이 나갈때, 마우스를 올렸을때~~ 등등..

html 태그에 직접 지정하는 방법과 jquery로만 지정하는 방법이 있다.

1. <div onclick="test();"></div>  // 직접지정

2. $('div').click(function(){}); // 스크립트로 간접 지정

가독성을 위해선 1번이 좋지만 디자인과 기능을 완전분리하고 싶다면 2번이 좋다.

함수로 지정할땐 this라는 키워드를 사용 할 수 있다. this는 자기 자신을 가르킨다.

function test( object ){ // object는 개인이 편한대로 변경해서 사용하면 된다.

    object.css('border','1px solid red'); // 테스트라는 함수를 호출한 객체의 테두리를 준다.

}

<div onclick="test(this)">123</div> // 클릭을 하는순간 붉은 테두리가 생긴다.

 

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////////여기 까지 다 읽었다면 보이는것은 css와 jquery의 검색으로 다 만들 수 있어야함.