Front/jquery
-
[제이쿼리] jQuery 속성조작 메서드Front/jquery 2020. 4. 1. 09:28
제이쿼리(jQuery) 속성 조작 메서드 안녕하세요? 장장스입니다. 제이쿼리 객체조작 메서드를 포스팅하려고 합니다. 객체 조작 메서드는 객체를 생성하거나 조작, 복제할 수 있습니다. 이번 포스팅은 그 중 하나인 속성 조작 메서드를 포스팅하겠습니다. 속성조작 메서드 속성 조작 메서드는 말그대로 속성 조작 메서드는 요소의 속성을 바꿀 때 사용합니다. 수치를 바꿀 땐 수치 조작 메서드, 객체를 생성하거나 삭제 또는 복제할 때 사용하는 객체 조작 메서드가 있습니다. html( ) /text( ) 메서드 종류 설명 $("요소 선택").html(); 선택한 요소의 하위 요소를 가져와 문자열로 반환합니다. $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소를 전부 제거하고 지정한 새 요소를 생성합니..
-
[제이쿼리] jQuery 배열(array) 메서드Front/jquery 2020. 3. 31. 09:34
제이쿼리 배열 메서드 jQuery Array 안녕하세요? 장장스입니다. 제이쿼리 배열 메스드입니다. ○each()/ $.each 메서드 each()/ $.each 메서드는 배열에 저장된 요소를 하나씩 순서대로 선택하면서 인덱스와 값을 가져옵니다. ▼javascript $(function(){ var fruit = [ {"fruit":"사과"}, {"fruit":"포도"}, {"fruit":"딸기"} ]; $(fruit).each(function(index, obj){ console.log(index + ":", obj); }); console.log("==== The End 1 ===="); $.each($("#menu02 li"), function(index, obj){ console.log(index..
-
[제이쿼리] jQuery 콘텐츠 탐색 선택자(selector)Front/jquery 2020. 3. 29. 06:14
제이쿼리(jQuery) 콘텐츠 탐색 선택자(selector) 안녕하세요? 장장스입니다. 콘텐츠 탐색 선택자에 대한 포스팅입니다. 콘텐츠 탐색 선택자(1) 종류 설명 $("요소 선택:contains(텍스트)") 지정한 텍스트를 포함하는 요소만 선택한다. $("요소 선택").contents() 선택한 요소의 하위 요소 중 1 깊이의 텍스트와 태그 노드를 선택한다. $("요소 선택:has(요소명)") $("요소 선택").has("요소명") 선택한 요소 중 지정한 태그를 포함하는 요소만 선택한다. $("요소 선택:not(요소명)") $("요소 선택").not(제외할 요소 선택) 선택한 요소 중 지정한 요소만 제외한 채 선택한다. $("요소 선택").탐색 선택자().end() 필터링되기 이전의 선택자가 적용 되도..
-
[제이쿼리] jQuery 속성 탐색 선택자(selector)Front/jquery 2020. 3. 27. 17:09
제이쿼리(jQuery) 위치 탐색 선택자(selector) 안녕하세요? 장장스입니다. 탐색 선택자 중 위치 탐색 선택자에 대한 포스팅입니다. 속성 탐색 선택자는 선택한 요소에 속성이 일치하는지 혹은 속성에 내가 원하는 값이 포함되어있는지를 알아 볼수 있는 선택자입니다. 속성 탐색 선택자() 종류 설명 $(["요소 선택[속성]") 선택한 요소 중 지정한 속성이 포함된 요소만 선택합니다. $("요소 선택[속성^=값]") 선택한 요소 중 속성값이 명시한 값으로 시작하는 요소만 선택합니다. $("요소 선택[속성$=값]") 선택한 요소 중 속성값이 명시한 값으로 끝나는 요소만 선택합니다. $("요소 선택[속성*=값]") 선택한 요소 중 속성값이 명시한 값을 포함하는 요소만 선택합니다. $(":type 속성 값")..
-
[제이쿼리] jQuery 위치 탐색 선택자(selector)Front/jquery 2020. 3. 25. 17:13
제이쿼리(jQuery) 위치 탐색 선택자(selector) 안녕하세요? 장장스입니다. 오늘은 탐색 선택자를 포스팅하려고 합니다. 탐색 선택자는 크게 위치 탐색 선택자와 속성 탐색 선택자가 있습니다. 이번 포스팅에서는 위치 탐색 선택자를 다뤄보도록 하겠습니다. 위치 탐색 선택자 종류 설명 $("요소").first() $("요소:first") 전체 요소 중 첫 번째 요소만 선택한다. $("요소").last() $("요소:last") 전체 요소 중 마지막 요소만 선택한다. $("요소:odd") 요소 무리중 짝수 번쨰 요소만 선택한다. $("요소:even") 요소 무리중 홀수 번쨰 요소만 선택한다. $("요소:first-of-type") 요소 무리 중 첫 번째 요소만 선택한다. $("요소:last-of-type..
-
[제이쿼리] jQuery 인접 관계 선택자(selector)Front/jquery 2020. 3. 23. 02:09
제이쿼리(jQuery) 인접 관계 선택자(selector) 안녕하세요? 장장스입니다. 직접 선택자에 이어 인접 관계 선택자를 포스팅하겠습니다. 인접 관계 선택자 종류 사용법 설명 부모 요소 선택자 $("요소 선택").parent() 선택한 부모 요소를 선택합니다. 상위 요소 선자 $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택합니다. 가장 가까운 상위 요소 선택자 $("요소 선택").closest("div") 선택한 요소의 상위 요소 중 가장 가까운 만 선택합니다. 하위 요소 선택자 $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택합니다. 자식 요소 선택자 $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택니다. 자식 요소들..
-
[제이쿼리] jQuery 직접 선택자(selector)Front/jquery 2020. 3. 21. 12:59
jQuery 직접 선택자(selector) 안녕하세요? 장장스입니다. 제이쿼리(jQuery) 존재의 이유인 선택자(selector)에 대해서 포스팅해보려고 합니다. 자바스크립트 제이쿼리 라이브러리에서는 다양한 선택자를 제공합니다. 선택자의 개념을 간단하게 정리하고, 직접 선택자에 대해 자세히 설명하겠습니다. 선택자란? 선택자는 HTML 요소를 선택하여 가져옵니다. 제이쿼리 선택자는 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있습니다. 이때 HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 HTML에서 작성한 CSS는 '정적이다'라고 표현합니다. 하지만, 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있습니다. 선택자를 좀 더 깊이있게 공부하려면 docum..
-
[제이쿼리] 제이쿼리(jQuery) 라이브러리 설치하기Front/jquery 2020. 3. 19. 00:09
제이쿼리 설치하기 안녕하세요? 장장스입니다. 오늘은 자바스크립트하면 빠질 수 없는 제이쿼리 라이브러리 설치방법에 대해서 알아보겠습니다. 제이쿼리란? 제이쿼리(jQuery)는 모딜라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 자바스크립트를 이용해 만든 라이브러리 언어입니다. 즉, 자바스크립트로 만들어진 다양한 함수들의 집합인 것입니다. 왜 사용하는걸까요? 먼저 호환성 문제 입니다. 자바스크립트의 문서 객체 모델 DOM과 이벤트 객체는 호환성이 떨어지는 단점이 존재했습니다. 예를 들어 인접 요소 선택자 중 다음 요소 선택자는 브라우저별로 결과가 달랐던 것이죠. 이를 해결하기 위해 등장한 제이쿼리는 호환성 문제를 해결했습니다. 다음은 편리한 애니메이션 효과 기능 구현입니다. 자바스크립트로 에..