[jquery] jQuery 입문 01 (170328)

jQuery 입문 01

• jQuery란?

1. 엘리먼트를 선택하는 강력한 방법과
2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는
3. 자바스크립트 라이브러리

( 출처 : 생활코딩 )

• jQuery 로딩 방법

1. 외부 자바 스크립트 로딩시키기

2. js파일에 다운받아서 넣기

• jQuery 의 형태

- $(    ) :    

이 부분은 겉보기엔 array형태의 값을 반환한다. 하지만 단순한 array 형태가 아닌 jquery의 기능이 합쳐진 object이다.

-$(    )의 괄호 속 selector : 

이 곳은 선택자가 들어가는 자리.  css에서 선택자를 이용했듯 같은 방식으로 이용한다. ex) $("div"), $(".myClass"), $("#myId")

-.action1(     ) : 

취할 action이 이 자리에 온다. action에 따라 여러 개를 연속하여 실행할 수 있다.

** 출력 결과 **

• 액션1 : .text(  )

- 입력한 텍스트가 선택자 위치에 들어간다.

- input 값에는 작동하지 않는다. (input값은 val() 이용)

- javascript에 비하면 훨씬 편리하다

(자바스크립트의 경우)

var divs = document.querySelector("div");

for(var i in divs){

divs[i].innerText("hello");

} 

(jQuery의 경우)

$("div").text("hello!");

• 액션2 : .val( )
  
  

- $("선택자").val( ); 

-이 위치에는 string type의 값이 들어있다.

-값을 확인하는 과정

- $("선택자").val("블라블라"); 

-jquery object type

-값을 입력하는 과정

-.action( )을 연속하여 실행할 수 있다.

• 액션3 : .css(    )

** 출력 결과 **

- inline stylesheet를 조작하는 방법

- 기존에 있던 스타일을 덮어쓰지 않고 추가한다.

• 선택자에서 대괄호의 의미, 모두선택, 다중선택

- $("input[type=text]").val("아이디");

- 특정 속성값을 갖는 요소를 selector로 선택한다.

- 모두선택 : * 을 이용한다.

- 다중선택 : "div, p"처럼 ,로 구분하여 선택할 수 있다.

** 출력 결과 **