jquery
jquery는 자바스크립트를 활용한 DOM 조작을
더 쉽고 간편하고 빠르게 달성하기 위해 사용하는 라이브러입니다.
부트스트랩처럼 CDN형식이나 혹은 jquery.hs 파일을
받아 import해야 해당 html 문서에 적용됩니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>head 태그 밑에 import해주면 준비가 완료되었습니다.
기본적인 사용법
window.onload = function() {} 을 대체하는
$(document).ready(function(){})
$(function(){}
를 사용해야합니다
앞으로는 $()를 이용해 element들을 얻어옵니다.
$()는 document.getElement(s)By와 같은 역할을 합니다.
적용해보기 위해 먼저 더미 body 태그를 깔아주겠습니다.
<body>
<div id="wrap">
<h1>제이쿼리</h1>
<h2 id = "firstTitle">선택자</h2>
<h3 class="nextTitle">부모 요소 선택자</h3>
<p class="obj1">
현재 id가 "obj인" 요소를 기준으로,
부모 요소는 'div'요소입니다.
</p>
</div>
<h3>자식 요소 선택자</h3>
<ul class="obj3">
<li>리스트1</li>
<li class="theObj1">리스트2</li>
<li>리스트3</li>
</ul>
<h3>형 요소 선택자</h3>
<ul>
<li>리스트4</li>
<li class="obj4">리스트5</li>
<li>리스트6</li>
</ul>
<h3>동생 요소 선택자</h3>
<ul>
<li>리스트7</li>
<li class="obj5">리스트8</li>
<li>리스트9</li>
</ul>
<h3>형제 요소들 선택자</h3>
<ul>
<li>리스트10</li>
<li class="obj6">리스트11</li>
<li>리스트12</li>
</ul>
<h3>입력 요소 선택자</h3>
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name" />
</p>
</body>그럼 이제 스크립트 태그를 작성해봅시다.
<script>
$(function(){
// $("*").css("font-size", "13px"); 대신
$("h1").css("color", "red"); // 로 쉽게 적용시킬 수 있습니다.
$("#firstTitle").css("color", "green");
// class가 nextTitle인 요소의 글씨색을 파란색으로
$(".nextTitle").css("color", "blue");
$(".obj3>li").css("font-weight", "bold"); //자식선택자
// .obj3의 자식 중 .theobj1을 선택해 글씨색을 보라색으로
$(".obj3").children(".theObj1").css("color", "purple");
자식은 .children(), 부모는 parent()를 사용해 호출합니다.
var myList =
myList[0].getElementsByTagName("li");
myList[1].firstChild
이런 식으로 힘들게 요소들을 호출할 필요가 없습니다.
$(".obj5").parent().css("border", "dashed", "2px", "black");
// #wrap의 자손 h3에 대해 글씨크기 20px, 배경색 노란색
$("#wrap h3").css("font-size", "20px").css("background-color", "yellow");
// .obj4의 next()의 색깔을 orange로 바꿔주세요.
// nextElementSibling과 동일하게 사용됩니다.
$(".obj4").next().css("color", "orange");
// .obj5의 prev()의 정렬을 우측정렬로 해주세요.
$(".obj5").prev().css("text-align", "right");
// .obj6의 형제인 "li"전체에게 가운데 정렬
// siblings()가 형제태그를 선택해줍니다.
$(".obj6").siblings().css("text-align", "center");
// 이렇게 $("선택자")로 얻어온 dom 요소는
// 변수에도 저장할 수 있습니다.
var cobj6 = $(".obj6");
console.log(cobj6);
form
html 문서 내부의 폼 요소를 선택할 때는
$(:타입명)으로 타입별로 선택할 수 있습니다.
text, password, checkbox, radio 등이 있습니다.
타입을 호출하면 .css()를 통해 원하는 구조로
수정 추가할 수 있습니다.
$(":text").css("background-color", "yellow")
.css("border", "solid 3px black")
.css("color", "blue");
여러 속성을 저장핼 때 위처럼 css()를 연속으로 쓰기도 하지만
{} 중괄호 내부에 나열할 수도 있습니다.
$(":text").css({"background-color": "yellow",
"border":"3px solid black",
"color":"blue"})
완전히 같은 기능을 수행합니다. 편하신 방법으로 익히고 사용하면 될 것 같습니다.
일단은 여기까지 입니다.