20211111 제이쿼리 메소드
·수업
-제이쿼리 수업에 들어서고 부터는 수업이 조금 딱딱해졌다. 그도 그럴 것이, 제이쿼리의 메소드가 어떤 기능을 하는지 배우고, 예제를 살펴보고, 실습해보는 시간이라서 뭔가 사고하기보다는 따라서 작성하는 시간인 느낌이었다. 그래도 최대한 문제를 풀 듯이 해보고 싶어서 수업 시간에 계속 따로 파일을 만들어서 조금 타이핑이 느린 학생분들이 화면에 코드를 따라적으실 때, 직접 스스로 해당 메소드를 사용해서 원하는 결과를 도출하려고 애썼다. 실제로 마냥 따라적기만 했다면 조금 이상하거나 어색한 부분, 혹은 주의해야 될 부분을 그냥 지나칠 수 있었겠지만, 혼자 해보고 뭔가 안되면, '왜 안되지?'하면서 교수님이 작성하실 때 더 집중해서 볼 수 있었다.
·여러 메소드의 기능
-.html()은 괄호 내의 아무 인자가 없으면 getter의 의미로 사용된다. java에서 다룬 내용이지만 getter는 기본적으로 값을 얻어오는 것이고, setter는 값을 내보낸다고 생각하면 된다. 즉, html()의 괄호 내에 인자가 없으면 해당 값을 얻어와서 변수같은 곳에 넣는 기능을 하게 되고, 만약 괄호 안에 뭔가가 있다면 해당 값을 넣어주는 것이 된다.
<head>
...
<script>
$(function(){
$("button").on("click", function(){
var text = $("p").html();
$("div").html(text);
});
});
</script>
</head>
<body>
<p>안녕하세요</p>
<div>
여기
</div>
<button>버튼</button>
</body>-예를 들면, 위와 같은 제이쿼리를 정의했다고 하자, 변수 text에 담긴 값은 빈 괄호를 가진 html()메소드이기 때문에 값을 얻어온 것이다. p태그의 값이 안녕하세요이니까 안녕하세요를 가진 값이 된다. 그리고 그 값을 다시 html메소드의 인자로 넣어주어서 div태그에 적용했다. 그러면 div 태그의 '여기'부분이 바뀌면서 text의 값인 '안녕하세요'로 바뀌게 된다.
-attr()도 비슷한데, attr의 경우 인자가 하나가 올 경우가 getter고 두개가 오면 setter라고 생각하면 쉽다.
<head>
...
<script>
$(function(){
$("button").on("click",function(){
var imgSrc = $("img").attr("src");
$("p").text(imgSrc);
$("img").attr("src", "../../img/22.jpg");
});
});
</script>
</head>
<body>
<img src="../../img/11.jpg" alt="pic" width="400" height="400">
<p>경로가 표시됩니다.</p>
<button>버튼</button>
</body>-이런식이다. imgSrc에 담긴 값을 어떻게 표현을 할 수 없으니 p태그에 표시하도록 했다.
-eq는 하위태그의 인덱스 순서로 해당 태그만 변경할 때 사용할 수 있다. 인덱스 순서는 0번째부터이고, -1을 입력하면 마지막 하위태그가 선택된다. 단순하게 변경하면 너무 단순하니, prompt()를 사용해서 입력한 li태그가 변경되도록 사용해봤다.
<head>
...
<script>
$(function(){
$("button").on("click", function(){
var num = prompt("몇번째의 li를 바꾸고 싶으세요?");
$("li").eq(num-1).css({border : "3px solid red", backgroundColor: "lightblue"});
$("li").eq(num-1).html(num+"번째의 li 태그에 css를 적용했습니다.");
});
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>버튼</button>
</body>-end()메소드, 사실 보통 메소드의 이름은 보면 어느정도 왜 저 이름이겠구나 싶은데, end()메소드는 왜 저 이름인지 잘 모르겠다. 이 메소드는 기존에 선택했던 요소를 다시 입력하지 않고, 바로 호출해서 사용할 수 있게 해주는 메소드이다.
$(function(){
$("button").on("click",function(){
$("#list").find("li").eq(1).html("두번째 리스트가 변경되었습니다.")
.end().eq(2).html("세번째 리스트도 변경되었습니다.");
});
});-id가 list인 ul태그를 찾고, 거기서 li를 찾는데, li가 2번쨰인 eq(1)을 사용해서 해당 영역을 "두번째 리스트가 변경되었습니다."로 변경했다. 그리고 원래라면 또 다시 $("#list").find("li").을 반복해야 하는데, 바로 뒤에 .end()를 찍어서 바로 이전에 선택했던 요소를 다시 사용할 수 있다.
-width와 height도 각각 괄호를 붙여서 메소드로 사용할 수 있다. 다만, 얘들도 전부 빈 괄호면 getter, 괄호 안에 내용이 있으면 setter라고 생각하면 된다.
<script>
$(function(){
$("#getter").on("click", function(){
var text = "넓이는 "+$("#box").width()+"px이며, 높이는 "+$("#box").height()+"px입니다.<br>";
$("#text").html(text);
});
$("#setter").on("click", function(){
var w = $("#box").width();
var h = $("#box").height();
$("#box").width(w/2).height(h/2);
var text = "넓이는 "+$("#box").width()+"px이며, 높이는 "+$("#box").height()+"px입니다.<br>";
$("#text").html(text);
});
});
</script>
</head>
<body>
<h1>크기변경</h1>
<p>버튼을 선택하면 크기를 읽어오고 변경도 가능합니다.</p>
<button id="getter">크기 조회</button>
<button id="setter">크기 반으로 줄이기</button>
<div id="box" style="width: 800px; height: 800px; background-color: cornflowerblue;"></div>
<p id="text">크기 조회가 되는 영역</p>
</body>위처럼 각각의 변수 w와 h에 getter로 값을 얻어온 다음에, 해당 값의 1/2의 값으로 다시 넣어주면 #box의 영역이 계속 반씩 줄어든다.
-요소를 넣어주는 append와 prepend는 각각 뒤와 앞에 원하는 요소를 넣을 수 있다. 각각의 메소드에 To라는 기능을 붙이면 선택자와 인자의 입력 순서가 바뀐다.
<script>
$(function(){
$("button").on("click", function(){
$("ul").append("<li>append한 곳</li>");
$("ul").prepend("<li>prepend한 곳</li>");
$("<li>appendTo한 곳</li>").appendTo("ul");
$("<li>prependTo한 곳</li>").prependTo("ul");
});
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button>버튼</button>
</body>-after와 before, insertAfter와 insertBefore도 비슷한 위와 비슷하다.
<head>
...
<script>
$(function(){
$("#btn1").on("click", function(){
$("#firstId").before("<tr><td>새로운 열 1 추가</td><td>새로운 열 2 추가</td></tr>");
});
$("#btn2").on("click", function(){
$("#firstId").after("<tr><td>새로운 열 1 추가</td><td>새로운 열 2 추가</td></tr>");
});
$("#btn3").on("click", function(){
$("<td>새로운 열 추가</td>").insertBefore("#secondCol");
});
$("#btn4").on("click",function(){
$("<td>새로운 열 추가</td>").insertAfter("#secondCol");
});
});
</script>
</head>
<body>
<table border="2" style="width: 400px;">
<tr id="firstId">
<td>first-first</td>
<td id="secondColumn">first-second</td>
</tr>
</table>
<br>
<button id="btn1">앞에 행 추가</button>
<button id="btn2">뒤에에 행 추가</button>
<br><br><br>
<table border="2">
<tr>
<td id="firstCol">첫번째 열1</td>
<td id="secondCol">두번째 열2</td>
</tr>
</table>
<button id="btn3">버튼3</button>
<button id="btn4">버튼3</button>
</body>-wrap()은 선택한 요소를 뒤에 넣을 요소로 감싸는 것이다. 랩핑하듯이 싸는 것인데, wrap에 All을 붙여서 wrapAll()이 되면 감싸긴 하는데, 하나로 감싸게 된다. 만약 동일한 class의 div가 두개 있다면, wrap()은 각각 하나씩 감싸는 형태이고, wrapAll()은 하나의 큰 요소로 두 개의 div를 전부 감싼다.
-replaceAll()은 선택한 요소로 뒤에 적힌 모든 요소를 변경한다.(각각 변경) replaceWith은 선택요소를 뒤에 오는 요소로 전부 대체한다.(전부 변경)
-delete()와 detach()는 얼핏보면 비슷한 기능을 하는 것 같지만, delete()를 사용하면 삭제한 데이터와 연관된 쿼리나 이벤트들이 전부 같이 삭제가 된다. 그러나 detach()는 데이터가 날라가지 않아서 따로 변수에 저장해서 다시 복구할 수 있다.
<script>
$(function(){
var dt;
//remove()와 차이점.
//detach()는 데이터가 날라가지 않음
$("#dBtn").on("click", function(){
dt = $(".content").detach();
});
$("#rBtn").on("click", function(){
$("#divId").append(dt);
});
});
</script>
</head>
<body>
<div id="divId" style="background-color: darkred;">
<div style="background-color: darksalmon;">첫번째 div</div>
<div style="background-color: darkviolet;" class="content">두번째 div</div>
<div style="background-color: dimgrey;" class="content">세번째 div</div>
</div>
<br>
<button id="dBtn">삭제</button>
<button id="rBtn">복구</button>
</body>-.empty()자식 요소를 삭제할 수 있다. 또한 unwrap()으로 부모 요소를 삭제할 수 있다. 메소드 이름만 봐도, 내가 부모인데 비우라는 것은 자식요소들을 지우라는 것이고, 내가 자식요소인데 나를 감싸는 랩을 제거하라는 것은 부모요소를 지우라는 것이다.
-선택 영역에.parent를 붙여서 선택영역의 부모가 되는 영역을 선택하여 사용할 수 있다. 굳이 왜 부모영역을 바로 선택하지 않는 것인지 의문이지만 필요할 경우가 있을 수 있긴 할 것 같다. 정확히는 모르겠지만.
$("#fBtn").on("click", function(){
//odd는 홀수-인덱스가 홀수인 거임. 0,1,2면 1만
$("li").filter(":odd").css("border", "3px solid green");
});
$("#lBtn").on("click", function(){
//even은 짝수- 역시 인덱스가 짝수인 것, 0도 짝수에 포함
$("li").filter(":even").css("border", "3px solid red");
});
-filter()기능을 이용해서 :odd의 홀수영역을 지정할 수 있다. 단 여기서 odd는 인덱스가 홀수인 것으로 만약 첫번째와 세번째 다섯번째의 요소를 바꾸고 싶으면, :even을 써야 한다. 왜냐하면 0인 인덱스가 첫번째이기 때문이다. not()메소드는 filter()의 기능과 반대로, not뒤에 오는 영역을 제외하고 실행한다.
-addClass()와 removeClass()는 말 그대로 class=""이 부분을 따로 넣어주거나 제거하는 기능을 한다. 따로 화면상에 변화는 없기 때문에, 해당 부분을 확인하려면 css를 주면 확인이 용이하다.
<style>
div{background-color: lightblue;}
.changeCss{background-color:rgb(17, 17, 99); color: white; font-size: 28px;}
</style>
<script>
$(function(){
$("#btn1").on("click", function(){
$("#first, #third").addClass("changeCss");
});
$("#btn2").on("click", function(){
$("#first, #third").removeClass("changeCss");
});
});
</script>
</head>
<body>
<div id="first">1번째 div입니다.</div>
<div id="second">2번째 div입니다.</div>
<div id="third">3번째 div입니다.</div>
<button id="btn1">클래스 추가</button>
<button id="btn2">클래스 제거</button>
</body>·조금 힘들었던 수업
-사실 오늘 수업이 마냥 쉽지는 않았다. 물론 그냥 편하게 하면 편한 수업일 수 있지만, 내가 뭔가를 만들어가는 것도 아니고, 따로 생각을 해야되는 것도 아니고 그냥 기능을 배우고 예제를 따라하기만 해서 조금 지루한 감이 있긴 했다. 오죽했으면 자습시간에 자바에서 문제풀이를 했던 문제들을 다시 가져와서 코딩했다. 그래도 내일은 회원가입 페이지에서 제이쿼리를 활용한 여러가지를 진행한다고 하니, 오늘보다는 조금 수월한 수업이 될 것 같다.
Author And Source
이 문제에 관하여(20211111 제이쿼리 메소드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ysparkr841/20211111-제이쿼리-메소드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
