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 저장
- 데이터 저장
문법 : $(selector).data(ket,value)
key : string type의 변수 -> data가 저장될 key 값 추후 이 key 값으로 데이터를 받아온다.
value : object type 으로 JavaScript에서 지원하는 모든 type의 데이터를 저장 가능
-
데이터 읽기
문법: $(selector).data(key)
key : 앞서 저장한 data를 불러오기 위한 key 값
key 를 생략하고 .data() 만 호출 시 해당 엘리먼트에 저장된 모든 data 들이 JSON형식으로 리턴됩니다. -
데이터 삭제
문법: $(selector).removeData(key)
key : string type 으로 삭제할 data 의 key 값
