jQuery
jquery는 js를 단순화하여 만들어졌습니다.
배우기 쉽고 자유도가 높지만 코드를 통일하기 어렵다는 단점이 있다.
또한 문서의 동적 생성으로 인해 텍스트 의존도가 높으며,
이전 버전의 익스플로러와 완벽하게 호환되었지만,
익스플로러가 더 이상 사용되지 않아 jQuery를 사용하는 빈도가 줄었습니다.
또한 웹 표준 API의 확장, 2015년 EX6의 등장, 웹 브라우저 환경의 변화, 가상 DOM을 사용하는 라이브러리(React)의 등장으로 jQuery는 더 이상 각광을 받지 못하고 있습니다.
$==는 jQuery와 같은 의미입니다!
console.log($);
console.log(jQuery);
console.log($ === jQuery);
동시에 다른 라이브러리를 호출할 때 충돌을 방지합니다.
$.noConflict(); //$를 undefined으로 바꿈
그러나 이렇게 하면 jQuery를 사용할 때마다 $를 사용하지 못할 수 있습니다.
//익명 함수를 통한 namespace 충돌 방지
(function($) {
})(jQuery)
익명 함수 내에서 $를 자유롭게 사용할 수 있도록 로컬로 만드십시오.
$(argument) → 인자로 입력할 수 있는 종류: string, object, function
//$(문자열) : selector //선택자
//$(객체) : jQuery Object wrapper
//$(함수) : ready(onload)
하중은 예측하기 어렵습니다.
→ 외부 소스를 사용하는 태그(이미지, 동영상 태그)의 크기가 클 경우 로딩 시간이 느려질 수 있습니다.
ready는 load보다 약간 빠릅니다.
위와 같이 동영상이나 이미지와 같은 대용량 파일을 다운받아야 한다면 먼저 태그를 확인하고,
나머지는 비동기식으로 처리됩니다.
준비가 된
$(document).ready(function() {
console.log($("h1").text(), "ready1");
})
$().ready(function() {
console.log($("h1").text(), "ready2");
})
$(function() {
console.log($("h1").text(), "ready3");
})
모두 동일한 기능으로 준비되어 있습니다.
일반적으로 가장 짧은 마지막 방법사용
등가특정 인덱스 번호에 해당하는 개체를 가져옵니다.
받다 얻을 수 있는 차이점은 가져왔을 때, 돔변환된다
eq는 여전히 jQuery 상태입니다.
$("button").eq(0).click(function() {
$("h1").hide(500);
})
$("button").eq(1).click(function() {
$("h1").show(500);
})
디스플레이: 없음; 그렇게 될 것입니다 🙂
사례
-딸깍 하는 소리
-마우스 입력
-마우스 시트
이벤트가 이미 있으면 추가합니다.
.click을 가산기 또는 추가기로 생각하십시오.
$("h1").click(function() {
alert($(this).text()); //getter
})
$("h1").click(function() {
$(this).text(prompt("변경할 택스트")) //setter
})
//클릭하지 않아도 h1을 한 번씩 클릭하는 기능을 가지고 있다.
$("h1").click()
마우스 포인터를 따라
1. 십자선 만들기 → div 만들기
2. 가로줄(가로:전폭, 세로:1px)
3. 세로선(세로:전폭, 가로:1px)
브라우저에서 좌표를 확인하고 사용할 요소를 선택합니다.
screenX와 screenY는 값을 임의로 사용하기 어렵다.
여기에서 확인하는 것이 가장 좋습니다 레이어X, 레이어Y
이것을 파악한 후 jQuery를 적용하십시오!
<!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() {
// console.log(event);
$(".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>영역에 차이가 있어도 이벤트는 계속 발생합니다.
정말 이렇게 이벤트가 많은 이유가 있을까요? 당연히 아니지!
자주 마우스 입력사용 🙂
다음 코드를 추가합니다.
.outer {padding: 50px; background-color: red; width: 100px;}
.inner {background-color: yellow; width: 100px; height: 100px;}
$(".outer").mouseenter(function() {
$(this).next().append("<p>mouse enter</p>")
}).mouseover(function() {
$(this).next().append("<p>mouse over</p>")
})
<div class="outer">
<div class="inner"></div>
</div>
<div class="enter-result"></div>
//style
.red-box {width: 100px; height: 100px; background-color: red; float: left; margin: 0 10px;}
//script
$(".red-box").click(function() {
console.log(this);
// document.body.appendChild(this.outerHTML)
//본인이 가지고 있던 이벤트에다 포함하고 있는
//자식 이벤트까지 가지고 오겠다. (true)
$("body").append($(this).clone(true))
})
})
//body 태그
<div class="red-box"></div>