Double Ended Queue
Deque : 양방향 입출력
FIFO
※ DOM -
1-1. scroll 이벤트
- 마우스를 스크롤하면 발생하는 이벤트
2. touch 이벤트
- 클릭이벤트로 대체 가능하지만 손가락을 2개이상 쓰는 이벤트는 touch이벤트를 사용해야 한다.
3. load 이벤트
-
4. unload 이벤트
- 현재 웹페이지에서 다른 페이지로 이동하거나 브라우저 창을 닫을 때 발생하는 이벤트
-
* 명시적인 세션 만료 (로그아웃 / 자동로그아웃 시간)
2. DOM Style
- 태그의 스타일 속성을 가져오거나 새로운 스타일 속성을 추가 할 수 있음
- 주의사항 : - (하이픈)을 camel표기법으로 바꿔야 적용이 된다,
2-1)
※ jQuery
https://www.samsungsds.com/kr/insights/jquery.html (참고)
- js를 쉽게 사용할 수 있도록 하는것
- AJAX, DOM 조작과 같은 js의 복잡한 작업을 단순화함
- cdn을 많이 사용함
1. jQuery 구문
- 기본구문은 $, jQuery 이다
예)
- $(this).hide() - 현재 요소를 숨김
- $("p").hide() - 모든 <p>요소를 숨김 (id, class도 가능)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
// $ , jQuery 둘 다 같은말이며 함수이다.
$.noConflict(); // 충돌방지
console.log($);
console.log(jQuery);
console.log($ === jQuery);
(function($) { // 이름 충돌 방지
console.log($);
console.log(jQuery);
console.log($ === jQuery);
})(jQuery);
</script>
</head>
<body>
</body>
</html>
1-1) 간단 활용 예제
// $("문자열") : selector의 의미를 가짐 / 선택자로 동작
// $(객체) : jQuery Object wrapper / 랩핑을 하게되면 jQuery 관련 메서드 사용 가능
// $(함수, 주로 익명함수 사용) : ready(onload) / 태그탐색 나머지 자료에 대해서 비동기로 작업 / load 보다 ready가 더 빠름
$(window).on("load", function() {
console.log($("h1").text(), "load");
});
// ready의 사용방법 : 3번째 사용방법이 가장 짧아서 많이 사용된다.
$(document).ready(function () {
console.log($("h1").text(), "ready1");
});
$().ready(function () {
console.log($("h1").text(), "ready2");
});
// 여러 태그를 순환형으로 처리함
$(function () {
console.log($("h1").text(), "ready3");
$("h1").css("color", "red");
// 선택자 사용가능
$("h1:nth-child(1)").css("background-color", "orange");
// $(문자열) >> jQuery wrapping Object
// $(문자열) >> DOM
$("h1")[0].title = "첫번째 제목";
// DOM >> jQueryObj 형태로 변경
$(document.getElementsByTagName("h1")[0]).attr("title", "변경된 제목");
$("h1").get(1).title = "두번째 제목";
});* $(document).ready(function() {}) -> $(function() {}); 같은거니 무조건 짤은걸로 쓰자
예제) hide, show
$("button").eq(0).click(function() {
$("h1").hide(500);
})
$("button").eq(1).click(function() {
$("h1").show(500);
})
});
<body>
<button>숨기기</button><button>보이기</button>
</body>
</html>eq는 몇번째 태그인지 확인하는것 (0부터 시작)
hide & show (밀리세컨드)
1-3) 선택자
선택자는 html, css에서 공부했으니 추가로 몇개만 설명
$("a[target!='_blank']") = target이 지정되지 않은 모든 a타입
$(tr:even, odd) = even 짝수, odd 홀수
1-4) 이벤트
- 마우스관련 이벤트
- click
- mouseenter :
- mouseleave :
- window 이벤트
- resize : 창크기 변화 감지 (잘 안씀)
- scroll (간간히 사용)
- 이벤트 메서드에 대한 jQuery 구문 - 핸들러(adder) 가 포함되있으면 setter
예제) 이벤트 트리거
// setter가 아닌 adder 라고 보는게 타당함
$("h1").click(function(){
alert($(this).text());
})
$("h1").click(function(){
$(this).text(prompt("변경할 텍스트"));
})
// 이벤트 트리거
// $("h1").click();
// 위와 같음
$("h1").trigger("click");
- mousemove 예제)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.box {width: 1000px; height: 500px; border: 1px solid; margin: 0 auto; position: relative;}
.box > * {background-color: #bbb; position: absolute;}
.horizon {width: 1000px; height: 1px; top: 250px;}
.vertical {width: 1px; height: 500px; left: 500px;}
.position-result {text-align: center;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function (){
$(".box").mousemove(function(){
$("position-result").text(event.layerX + " , " + event.layerY);
$(".vertical").css("left", event.layerX);
$(".horizon").css("top", event.layerY);
})
});
</script>
</head>
<body>
<div class="box">
<div class="horizon"></div>
<div class="vertical"></div>
</div>
<p class="position-result"></p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.outer {padding: 50px; background-color: black; width: 100px;}
.inner {background-color: gray; width: 100px; height: 100px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function (){
$(".outer").mouseenter(function(){
$(this).next().append("<p>mouse enter</p>");
}).mouseover(function(){
$(this).next().append("<p>mouse over</p>");
})
});
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="enter-result"></div>
</body>
</html>
-hover()
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});- on() 메서드
'HTML5, CSS3 > Java Script' 카테고리의 다른 글
| window.onload(js)와 $(document).ready(jquery)의 차이 (0) | 2024.01.17 |
|---|---|
| 23-02-24 JS (0) | 2023.02.24 |
| 23-02-23 JS (0) | 2023.02.23 |
| 23-02-22 JS (0) | 2023.02.22 |