[JQuery]_개념, 사용한 함수 정리 1번

JQuery 사용을 안하려고 하다가 결국 사용을 해야할거같아서 기본 개념과 사용한 함수를 정리합니다.

 

제이쿼리(jQuery)란?

제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.

제이쿼리 문법]

 

제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있습니다.
$(선택자).동작함수();
 
달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다.

 

html 문서가 먼저 로드되고 이후에 script 문서가 로드되야 오류가 나지 않기 때문에 하단부에 보통 아래와 같은 형식으로 선언을 한다.

JS 에서는 보통 onload function 을 쓰거나

JQuery에서는

로 간단하게 사용할 수 있다.

 

사용한 JQuery

 

1. $.extend

기본 정의: 파라미터로 받은 object를 합쳐서 다시 돌려주는 함수 

사용 이유는 그리드를 덮어쓰기 위해 사용함

 

문법 : $.extend(a, b) 이런식으로 사용하게 되면 a위에 b를 덮어쓰게 된다.

덮어쓰고 다시 반환하기 때문에 만약 a값을 손상시키지 않으려먼 빈 {}를 첫번째 인자에 넣어주면 된다.$.extend({} ,a ,b)

파라미터의 값에 한계는 없고 계속해서 덧붙여서 merge할 수 있다.

 

만약 오브젝트인 경우에는 안의 property의 이름이 같으면 내용이 아에 덮어져 버려 삭제가 된다.

property가 덮어씌워지는 object에 없어도 같이 붙이고 싶다면 첫번째 인자에 true를 지정하면 된다.

$.extend(true, a, b)

 

2. $.data

data 함수는 HTML 엘리먼트 내에 데이터를 저장하고 읽는 역할을 하는 함수

사용이유 : 1. 서버에서 조회된 데이터를 추후 grid를 id 별로 다시 불러와서 그리기 위해 data 저장

1. 데이터 저장
문법 : $(selector).data(ket,value)

key : string type의 변수 -> data가 저장될 key 값 추후 이 key 값으로 데이터를 받아온다.
value : object type 으로 JavaScript에서 지원하는 모든 type의 데이터를 저장 가능

2. 데이터 읽기
문법: $(selector).data(key)
key : 앞서 저장한 data를 불러오기 위한 key 값
key 를 생략하고 .data() 만 호출 시 해당 엘리먼트에 저장된 모든 data 들이 JSON형식으로 리턴됩니다.

3. 데이터 삭제
문법: $(selector).removeData(key)
key : string type 으로 삭제할 data 의 key 값