[jQuery] jQuery 기본 문법 이해하기

[jQuery] jQuery 기본 문법 이해하기

1. jQuery 정의

: HTML 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리.
: 부트스트랩도 의존도를 줄여간다고 하고, 요즘은 점유율이 낮아지고 있는 추세이다.

 

2. jQuery 호출

html 문서 내부에 script로 추가한다.
jQuery 홈페이지에서 코드를 복사할 수 있는데, 그것을 html 문서 내에 붙여넣기 하면 jQuery를 사용할 수 있다.

 

3. 기초 문법

1) 선택자

: DOM을 통해 HTML 요소를 선택하여 가져와서 쉽게 제어할 수 있다.

$(선택자).메소드();
id 선택을 위해서는 ‘#id', class 선택을 위해서는 ‘.class’로 쓰면된다.
지정 태그와 일치하는 요소를 선택하기 위해서는 “태그명”으로 쓰면된다.

$(‘#content’)
: content 값을 가져오게 된다.

 

+ DOM이란??

2022.06.18 - [프로그래밍 언어/Javascript] - [JavaScript] DOM(Document Object Model) 이해하기

 

2) 메소드

메소드 명	기능
.click()	선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 함.
.hide();	선택한 요소를 즉시 사라지게 한다.
.show();	선택한 요소를 즉시 보이게 한다.
.val();	form의 선택 요소 텍스트 값을 설정하거나 받아온다.
.text();	선택 요소의 텍스트 내용을 설정하거나 받아온다.
.html();	선택 요소에 html 코드를 넣거나 받아온다.
.attr();	element의 속성(attribute)값을 가져오거나 추가한다.
.on();	이벤트 통합메소드. (events, [selector], [data], handler) 매개변수를 가짐
.css()	선택한 요소의 css속성값을 가져오거나 style 속성을 추가한다.
.fadein();	선택한 요소를 서서히 나타나게 한다. (duration, complete) 매개변수를 가진다(선택 요소).
.fadeout();	선택한 요소를 서서히 사라지게 한다. (duration, complete) 매개변수를 가진다(선택 요소).
.animate();	애니메이션 효과를 만든다. (properties [, duration ] [, easing ] [, complete ]) properties 필수. (properties: 애니메이션 효과를 줄 속성)

 

 

 

3) 익명함수, 즉시실행함수

 

(1) 익명함수(Anonymous function)

함수명 대신 변수명에 함수 코드를 저장하는 구현 방식
익명함수는 호출 시 변수명을 함수명처럼 사용한다.
익명함수의 소스 코드는 변수값이므로 끝에 세미콜론을 대입한다.

// 1. 기본구조 
var 변수명 = function( 매개변수 )
  {
    실행문;
  };

// 2. void 함수 형태
var hello = function( ) {
    document.write("Hello World!");
  };

// 3. return 있는 형태
var hi = function( ) {
  var string = "Hello World!";
  return string;
};

 

 

 

(2) 즉시실행함수

함수 정의 과정없이 바로 함수를 호출하는 함수.
한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용된다.
자바의 람다와 비슷한 기능이라고 보면 될 것이다.

// 1. 기본형태
(function () {
    // statements
})()

// 2. 기명 즉시 실행함수
(function square(x) {
    console.log(x*x);
})(2);


// 3. 익명 즉시 실행함수
(function (x) {
    console.log(x*x);
})(2);