|
|
※ DOM 계층의 개념을 간략히 설명하자면
html안에 (head, body)
body안에 (div, nav, table...)
head 안에(title, meta..)
이런식으로 한 태그안에 속해있는 태그를 도식화 한것을 DOM이라고 합니다.
jQuery의 작동원리
1. jQuery 라이브러리는 Css와 같은 요소를 선택합니다.
ex) $("span")
2. jQuery페이지에 잇는 span요소를 모두 요청합니다.
3. DOM에서 span 요소를 반환합니다.\
4. jQuery가 해당요소에 대해 동작을 수행합니다.
5. DOM의 속성을 변경합니다.
6. 실행결과를 표시합니다.
jQuery의 기초문법
1. jQuery 기본선언하기
jQuery()를 매번 선언하기 귀찮으니 $()라는 약어를 사용합니다. 즉,
jQuery() → $()
2. css의 선택자나 자바스크립트 객체를 ()안에 넣습니다.
ex) $("div"), $(#test")와 같이 사용합니다.
3. 메소드를 사용하여 jQuery를 사용합니다.
#("div").fadein(1000);
|
|
|
2lesson.zip위 파일을 다운받아서 실행해 보세요^^ ~ 알집으로 압축했습니다.
아래는 소스코드입니다.
<html>
<head>
<style>
#box
{
width:100px;
height:100px;
background:green;
}
</style>
<script src="js/jquery-2.2.2.min.js"></script>
</head>
<body>
<div id="box"> </div>
<script>
$("#box").mouseover(function()
{
$("#box").fadeOut(1500);//마우스를 올리면 1.5초만에 사라져요~
});
</script>
</body>
</html>
<script src="js/jquery-2.2.2.min.js"></script>
'웹프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery의 메소드 (0) | 2016.03.26 |
|---|---|
| jQuery-선택자1 (0) | 2016.03.24 |
| jQuery 설치환경 구성하기 (0) | 2016.03.24 |
| innerHTML을 이용한 ajax (0) | 2011.05.24 |
| 동기와 비동기 (0) | 2011.05.05 |