선택자 (5) 썸네일형 리스트형 [JQuery] 그외 선택자 그 외 선택자 콘텐츠 탐색 선택자 요소나 속성의 포함 여부에 따라 특정요소를 선택. 종류 사용법 설명 $("요소선택:contains(텍스트)") $("li:contains("내용")") 요소 중 "내용"이라는 텍스트를 포함하는 요소만 선택 $("요소선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소 선택 $("요소선택:has(요소명)") $("요소선택").has(요소명) $("li:has("span")") 요소 중 을 포함하는 요소만 선택 $("요소선택:not(:제외요소)") $("요소선택").not(:제외요소) $("li:not(:first)") 요소 중 첫번째 요소만 제외하고 선택 $("요소선택").filter(필터요소) $("li").fi.. [JQuery] 탐색 선택자 / 속성 선택자 탐색 선택자 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 선택할 때. 위치 탐색 선택자 : 요소의 위치를 기준으로 선택 속성 탐색 선택자 : 요소의 지정된 속성을 기준으로 선택. 위치 탐색 선택자 종류 요소의 위치나 인덱스 번호를 이용해 특정 요소를 좀 더 정확하게 선택. 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 요소 중 첫번째 요소만 선택 $("요소 선택:last") $("요소 선택").last() $("li:last") $("li").last() 전체 요소 중 마지막 요소만 선택 $("요소 선택:odd") $("li:odd") 요소 그룹 중 홀수번째 요소만 선택 $("요소 선.. [JQuery] 기본 다지기 JQuery 자바스크립트를 이용해 만든 라이브러리 언어. 자바스크립트로 만들어진 다양한 함수들의 집합. 자바스크립트가 가지고 있는 "각 브라우저에 따른 호환성 문제"를 해결 쉽고 편리한 애니메이션 효과 기능 구현 1. jquery 사이트에서 라이브러리 파일을 다운받아 웹 문서에 연동 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use AP.. [Javascript] 문서 객체 모델 (DOM, Document Object Model) DOM , Document Object Model HTML 문서의 구조 의미. HTML tag는 각각의 기능 (Method)과 속성 (Properites)을 갖고 있다. 이런 태그들을 (트리) 구조적으로 갖고 있는 문서 객체라 보면 될듯. 배우는 목적 자바스크립트를 사용해 문서 객체를 선택하고 속성이나 스타일(CSS)을 적용하기 위해서 단, 브라우저별 (크롬, 오페라, 사파리 등) 차이가 존재하기에 호환성 문제가 있으므로, 브라우저별로 확인이 필요하다. html은 root가 되고, 그 아래는 node 라 부른다. node에는 아래와 같이 존재한다. html 태그를 연결하는 요소 노드 (Element node) 텍스트를 연결하는 Text node 태그에 속성을 연결해 주는 속성 노드 (Attribute n.. [CSS 기본] 선택자 CSS 기본 , 기초 내용들 선택자 종류 종류 사용 예 속성 전체 선택자 * { 속성 : 값; } 전체 요소 선택할 때 사용 요소명 선택자 요소명 {속성: 값;} ex) h1 { color: red; } 태그 이름(요소명)으로 선택할 때 id #id명 {속성: 값;} id를 가진 요소 선택시 (단독 사용) class .class명 {속성: 값;} class 가진 요소 선택시 (반복 사용할 때) 가상 클래스 a:link {속성: 값} link 걸린 텍스트 a:visited {속성: 값} 링크 방문을 했던 텍스트만 a:hover {속성: 값} 링크걸린 텍스트에 마우스 올렸을 때 a:focus {속성: 값} 링크걸린 텍스트에 포커스 생성시 a:active {속성: 값} 링크걸린 텍스트에 마우스 눌렀을 때 수도.. 이전 1 다음
