jquery란 javascript 언어를 좀 더 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 javascript 라이브러리
- 큰 장점이라고 한다면 보다HTML DOM을 손쉽게 조작 가능하며, 같은 동작을 하더라도 짧게 구현 가능
jquery 사용 방법
- 다운로드 받아서 사용하는 방법
- CDN(content Delivery Network) 사용 (링크만 복사해서 오면 되는 거라 간편하고, 교육 시간 때엔 이 방법으로 하였다.)
google에 jquery 검색 후 CDN 클릭하면
이 창이 뜨는데 여기서 jquery core 3.7.0 - uncompressed 를 클릭하면
파란색 버튼을 누르면 스크립트가 복사가 되며, head 태그 안에 붙여넣기 하면 jquery 사용 가능하다.
jquery의 기초는 $(선택자).함수();
- $는 어디서 나온 거냐면 -> jquery (선택자).함수();
- $() : parameter로 선택자를 전달받아 특저 HTML 요소를 선택한다. -> 여기서 선택된 요소는 jquery 객체임
- 함수 : jquery 메소드
값 가져오기 & 설정하기(val())
- 값을 설정할 때 : $(설정할 부분 선택).val(값);
- 값을 가져올 때 : $(변경할 부분 선택).val(값);
ex)
<script>
// val()
// 1. 값을 설정 할 때 : $(설정할 부분 선택).val(값);
// 2. 값을 가져올 때 : $(변경할 부분 선택).val(값);
function setvalue() {
// document.getElementById("input").value = "안녕";
$("input").val("안녕하세요");
}
</script>
</head>
<body>
<input type="text" id="input" />
<button class="입력" onclick="setvalue()" value="">setvalue</button>
</body>
document.getElementById("input").value = "안녕"; 을
$("input"),val("안녕하세요"); 라고 간편하게 작성할 수 있다.(손에만 익으면 매우 시간 줄어들 듯!)
여러 가지 예시들을 더 보자.
- body태그에
<input type="text" id="input" value="" />
<div class="div1"></div>
<div class="div2"></div>
<button onclick="setValue()">setValue</button>
<button onclick="getValue()">getValue</button>
<button onclick="changeStyle()">changeStyle</button>
<button onclick="changeText()">changeText</button>
<button onclick="changeAttribute()">changeAttribute</button>
<button onclick="changeHTML()">changeHTML</button>
브라우저에 생성되었는데 각각 버튼을 누르면서 어떻게 적용되는지 쉽게 이해할 수 있다.
function setValue() {
// document.getElementById("input").value = "안녕";
$("#input").val("안녕");
}
: input이라는 id를 가진 HTML요소의 값을 "안녕"으로 설정하는 역할.
function getValue() {
// let value = document.getElementById("input").value;
$("input").val("안녕하세요");
}
: input이라는 id를 가진 HTML 요소의 값을 value라는 변수에 저장하는 역할
function changeStyle() {
let div = document.querySelector("div");
// div.style = "border: 100px solid black";
$("div").css("border", "100px soild black");
}
: div라는 태그를 가진 HTML요소의 스타일을 변경하는 역할 >> 하면 빨간 사각형 테두리가 굵어진다.
function changeText() {
let div = document.querySelector("div");
div.innerText = "Jquery 사용 전 글자 바꾸기";
$("div").text("<b>jquery 사용 후</b>");
}
: div라는 태그를 가진 HTML 요소의 텍스트를 변경하는 역할
function changeAttribute() {
let a = document.querySelector("a");
}
: a라는 태그를 가진 HTML 요소의 속성을 변경해 주는 역할
function changeHTML() {
let div = document.querySelector("div");
div.innerHTML = "Jquery 사용 전 글자 바꾸기";
$("div").html("<b>jquery 사용 후</b>");
}
: div라는 태그를 가진 HTML 요소의 내부 HTML을 변경하는 역할
요소 추가
쉬운 이해를 위해 예시를 만들자.
ul>
<li>1</li>
<li id="li2">2</li>
<li id="li3">3</li>
</ul>
<button onclick="append()">append</button>
<button onclick="prepend()">prepend</button>
<button onclick="before()">before</button>
<button onclick="after()">after</button>
<button onclick="removeElement()">removeElement</button>
<button onclick="emptyElement()">emptyElement</button>
function append() {
// append() : 마지막 자식 요소에 추가
let li = document.createElement("li");
// li.innerText = "append 된 친구";
// document.querySelector("ul").append(li);
// jquery로 요소 생성 x
$(li).text("jquery로 append");
$("ul").append(li);
}
: ul라는 태그를 가진 HTML 요소의 마지막 자식 요소에 li라는 태그를 추가하는 역할
function prepend() {
// prepend() : 첫번째 자식 요소에 추가
let li = document.createElement("li");
// li.innerText = "prepend 된 친구";
// document.querySelector("ul").prepend(li);
// jquery로 요소 생성 x
$(li).text("jquery로 prepend");
$("ul").prepend(li);
}
: ul라는 태그를 가진 HTML 요소의 첫 번째 요소에 li라는 태그를 추가하는 역할
function before() {
// before() : 기준요소의 전에 추가한다 ( 앞에 추가한다. )
let li = document.createElement("li");
li.innerText = "before 된 친구";
// document.querySelector("#li2").before(li);
$("#li2").before(li);
}
: li2라는 id를 가진 HTML 요소의 앞 요소에 li라는 태그를 추가하는 역할
function removeElement() {
// remove() : 내가 선택한 요소를 삭제하는 친구
// document.querySelector("ul").remove();
$("ul").remove();
}
: ul이라는 태그를 가진 HTML요소를 삭제하는 역할
function emptyElement() {
let standard = document.querySelector("li");
// document.querySelector("ul").removeChild(standard);
// removeChild () 부모를 선택하고 삭제할 자식 하나를 보내야 했다.
// empty() : 선택된 자식들을 모두 삭제한다.
$("ul").empty();
}
: ul이라는 태그를 가진 HTML요소의 자식을 삭제하는 역할
요소 탐색
<body>
<hr />
<h5>요소 탐색</h5>
<div class="ancestor">
<div class="parent">
<div class="child1">자식1</div>
<div class="child2">자식2</div>
asdfasdf
<div class="child3">자식3</div>
</div>
</div>
<button onclick="findParent()">findParent</button>
<button onclick="findParents()">findParents</button>
<button onclick="findNext()">findNext</button>
<button onclick="findPrev()">findPrev</button>
<button onclick="findChildren()">findChildren</button>
</body>
function findParent() {
// parent() : 부모 요소를 반환
console.log($(".child2").parent());
}
: 반환요소 (<div.parent>)
function findParents() {
// parents() : 조상요소를 모두 반환
console.log($(".child2").parents());
}
: 반환요소(<div.parent>, <div.ancestor>, <body>, <html>)
function findNext() {
// next() : nextSibling 내 다음 형제를 보는 친구
// document의 nextElementSibling
console.log($(".child2").next());
}
: 반환요소(<div.child3>)
function findPrev() {
// prev() : previousSibling 내 이전 형제를 보는 친구
// previousSibling, previousElementSibling
console.log($(".child3").prev()); // previousElementSibling와 동일
}
: 반환요소(<div.child2>)
function findChildren() {
// children() : 부모 요소를 선택했을 때 그 자식요소들을 반환
// childNodes랑 children중 어떤 거랑 동일할까? children
console.log($(".parent").children());
}
: 반환요소(<div.child1>, <div.child2>, <div.child3>)
클래스 조작하기
<style>
.css1 {
width: 100px;
height: 100px;
background-color: red;
}
.css2 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div></div>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
<button onclick="hasClass()">hasClass</button>
<button onclick="toggleClass()">toggleClass</button>
<button onclick="switchClass()">switchClass</button>
function addClass() {
//$().addclass("클래스명")
$("div").addClass("css1");
}
: 선택된 요소에 클래스 추가
function hasClass() {
alert($("div").hasClass("css1"));
//$().hasclass("클래스명")
$("div").hasClass("css1");
// console.log($("div".hasclass("css1")));
}
: 선택된 요소에 클래스가 있는지 없는지 확인. 리턴 값은 Boolean 값으로 나온다.
function toggleClass() {
//$()toggleclass("클래스명")
$("div").toggleClass("css1");
}
: 선택된 요소에 클래스가 있으면 삭제, 없으면 추가
function switchClass() {
//$().swithclass("클래스명1", "클래스명2", [시간])
$("div").switchClass("css1", "css2", 3000); //시간 생략 가능 -> 얘를 사용하기 위해선 jquery UI를 스크립트를 따로 가져와야 함.
}
: switchClass를 쓰려면 jquery-ui가 있어야 하는데 상단에 ui의 링크 들어가서 스크립트 복사 후 head 태그 안에 복사하면 된다.
클래스 1을 클래스 2로 바꾸는 것(시간은 1에서 2로 변할 때 걸리는 시간이며 단위는 밀리초)
Jquery 이벤트 리스너 : 이벤트가 발생했을 때 그 처리를 담당하는 함수
1. 로딩 이벤트 - .ready(), $()
// 아래 3개의 이벤트가 모두 DOM 요소가 불러와진 후에 실행된다.
$(window).ready(function () {
console.log("로드 완료1");
});
$(document).ready(function () {
console.log("로드 완료2");
});
$(function () {
console.log("로드 완료3");
});
// 참고로 이 3가지 중 자기가 쓰고 싶은 걸 쓰면 된다.
아직 내가 해결하지 못한 실습문제들이 꽤 있다. 내일 교육 듣고 나서 주말 간 시간이 조금 여유로울 때 실습문제를 풀면서 응용력을 길러봐야 할 거 같다.