2017. 6. 5. 12:20ㆍJQuery
1. JQurey란?
자바스크립트로 만들어진 라이브러리를 말하며, 자바스크립트 DOM작업을 좀더 쉽게 할 수 있는 뛰어난 기능을 가지고 있습니다. 단, 자바스크립트는 만능이 아닙니다.
|
2. 요소
자바스크립트 Core 문법 |
자바스크립트 Core 라이브러리 |
자바스크립트 BOM (Browser Object Model) |
자바스크립트 DOM (Document Object Model) |
기본 문법과 구조 데이터 타입 조건문(if, switch) 반복문(for, while) 함수(function) 클래스(prototype) ： |
타이머함수 문자열(string) 날짜 및 시간(date) 수학 배열(array) 기타 전역함수 ： |
브라우저와 관련된 것 Window Navigator Location History Document Screen ： |
노드 스타일 속성 이벤트 위치 및 크기 등을 다룰 수 있는 다양한 기능 |
3. 예제
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JQurey 예제</title> <!--JQurey를 사용하기 위해 선언--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> <body> <ul id="menu1"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> <ul id="menu2"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </body> <script> $("#menu1 li").css("color", "red"); $("#menu2 li").css("color", "blue"); </script> </html> |
4. 해설
1. $("#menu1 li").css("color", "red");의 코드의 내부 -1. #menu 노드 찾기 var menu = document.getElementById("menu");//id값으로 요소 찾기 -2. li리스트 구하기(li갯 수 만큼 루프 돌며 스타일 변경) var liList = menu.getElementsByTagName("li");//tag이름으로 특정 요소의 자식요소 찾기 for(var i=0; i<liList.length; i++) { var li=liList[i]; li.style.color="color";//자식요소의 색스타일 변경 } |
'JQuery' 카테고리의 다른 글
| 클릭한 태그 id, name, class, value 가져오기 (0) | 2017.11.21 |
|---|---|
| 핵심 DOM 객체 (0) | 2017.07.03 |
| DOM과 HTML의 관계 (0) | 2017.06.25 |
| DOM(Document Object Model)이란? (0) | 2017.06.05 |
| jquery-x.x.x.js와 jquery-x.x.x.min.js의 차이 (0) | 2017.04.11 |