3/23(화)FrontEnd/jQuery(3)
3/22(월) 기본선택자~content 영역 text()까지
요소 생성 및 제거
1) 요소 생성(jQuery 방식으로)
<div id="area1"></div>
<script>
$(function(){
// <p>~~~~</p>
// 1. 문자열로 만드는 방법
var el1 = "<p>Create Element By Text</p>";
// 2. DOM메소드 만드는 방법(createElement, createTextNode)
var el2 = document.createElement("p");
var text = document.createTextNode("Create Element By DOM");
el2.appendChild(text); // <p>Create Element By DOM</p> 둘 다 요소객체
// 3. jQuery로 만드는 방법
var el3 = $("<p></p>").text("Create Element By jQuery");
console.log(el1); // 찐탱 문자열 출력
console.log(el2); // 요소객체 형태로 보임
console.log(el3); // jQuery방식으로 p요소에 text가 담긴형태로 보임
$("#area1").append(el1, el2, el3); // area1에 el1, el2, el3 요소를 담겠다 => jQuery형식으로 추가하는 메소드 append();
})
</script>
2) 삽입관련 메소드 part1
: 새로이 생성된 요소를 추가시켜주는 메소드
$(A).append(B) : A요소 내에 뒷부분에 B를 추가(하위요소로 추가됨)
$(A).prepend(B) : A요소 내 앞부분에 B를 추가(하위요소로 추가)
$(A).after(B) : A요소와 같은 레벨로 뒷부분에 B를 추가(동위)
$(A).before(B) : A요소와 같은 레벨로 앞부분에 B를 추가(동위)
3) 삽입관련 메소드 part2
$(B).appendTo(A) : B를 A요소 내 뒷부분에 추가(하위)
$(B).prependTo(A) : B를 A요소 내 앞부분에 추가(하위)
$(B).insertAfter(A) : B를 A요소 뒤에 추가(동위)
$(B).insertBefore(A) : B를 A요소 앞에 추가(동위)
4) 요소객체 복제 메소드
:
[표현법]
var 변수 = $("선택자").clone(true | false) : 선택된 요소를 복사하는 메소드(true|false 생략 가능)
- true | false : 해당 선택된 요소에 걸려있는 이벤트까지도 복사할건지 지정(기본값 false)
<복제버튼 만들기>
<button id="clone">복제</button>
<div id="clone-test">
<div id="item1" class="item">
<span>안녕</span>
</div>
</div>
<div id="clone-result">
</div>
<script>
$(function(){
// 복제할 요소에 hover이벤트 추가해놓기
$("#item1 #item2").hover(function(){
$(this).addClass("lime"); // 마우스가 버튼위에 올려있을 때 현재 이벤트가 발생한 요소(#item1 = this) 지정하고 addClass("lime"); 라임 클래스 추가하기
},function(){
$(this).removeClass("lime");
// 마우스가 버튼 뺄때 lime Class 빼기
})
// 복제 버튼 클릭시 해당 요소 복사해서 또다른 div에 붙여넣기
$("#clone").click(function(){
//var copy = $("#item1").clone(/*false*/);
var copy = $("#item1").clone(true);
$("#clone-result").append(copy);
})
})
</script>
5) 요소객체 제거 및 잘라내기 메소드
(1) $("선택자").empty()
: 선택된 요소의 모든 "자식요소"들 제거해주는 메소드
(2) var 변수 = $("선택자").remove()/detach()
: 선택된 요소 제거 후 제거된 요소를 반환(잘라내기)
- remove() : 잘라내기 시 잘라낸 요소의 이벤트 안가져옴
- detach() : 잘라내기 시 잘라낸 요소의 이벤트 가져옴
<실습>
<button id="empty">empty</button>
<button id="remove">remove</button>
<button id="detach">detach</button>
<div id="remove-test" style="border:3px solid red; width:110px; height:110px;">
<!-- 제거 및 잘라내기 할 요소 -->
<div id="item2" class="item">
<span>안녕</span>
</div>
</div>
<br>
<div id="remove-result" style="border:3px solid blue; width:110px; height:110px;">
</div>
<script>
$(function(){
$("#empty").click(function(){
$("#remove-test").empty(); // remove-test의 자손요소를 제거함
})
$("#remove").click(function(){
var el = $("#item2").remove(); // 이벤트 가지고오지 않음(hover x)
$("#remove-result").append(el);
})
$("#detach").click(function(){
var el = $("#item2").detach(); // 이벤트 가져옴(hover o)
$("#remove-result").append(el);
})
})
</script>
추가적인 메소드
1) each 메소드
: 배열의 모든 인덱스에 순차적으로 접근하고자 할 때, 객체가 가지고 있는 모든 속성에 순차적으로 접근하고자 할 때 사용하는 for in문과 유사하게 수행되는 메소드
(1) $.each(객체|배열, function(매개변수1, 매개변수2){ 순차적으로 접근해서 실행할 내용; });
(2) 객체|배열.each(function(매개변수1, 매개변수2){ 순차적으로 접근해서 실행할 내용 });
-
만약 객체를 제시했다면,
첫번째 매개변수에는 순차적으로 접근된 객체의 속성명(key값)이 담김
두번째 매개변수에는 해당 속성값(value)이 담김 -
만약 배열을 제시했다면,
첫번째 매개변수에는 순차적으로 접근된 배열의 인덱스가 담김
두번째 매개변수에는 해당 인덱스의 값이 담김
<예시>
<div id="area1"></div>
<script>
$(function(){
// 배열
var arr = [{name: "네이버", link:"http://www.naver.com"},
{name: "구글", link:"http://www.google.com"},
{name: "다음", link:"http://www.daum.net"}];
var output = "";
for(var i in arr){
output += "<h2><a href='" + arr[i].link + "'>" + arr[i].name + "</a></h2>";
}
// 1)
$.each(arr, function(index, item){
output += "<h2><a href='" + item.link + "'>" + item.name + "</a></h2>";
});
// 2)
$(arr).each(function(index, item){
output += "<h2><a href ='" + item.link + "'>" + item.name + "</a></h2>";
});
$("#area1").html(output);
})
</script>
<br>
<div id="wrap">
<h1>item-0</h1>
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1>item-4</h1>
</div>
<script>
$(function(){
// [h1,h1,h1,h1,h1]
$("#wrap").children().each(function(index, el){
// el : 순차적으로 접근된 h1 요소객체 담길것임
// 순차적으로 접근할 때 마다의 h1요소에 클래스 추가
// el.addClass("highlight_" + index); -> 제대로 안됨!
// jQuery 방식으로 하니까 안 됨
//el.className = "highlight_" + index; // -> 제대로 됨!
// el : 순수 js방식으로 선택된 요소객체
// js방식 => jQuery방식으로 바꾸기
// $(el).addClass("highlight_" + index); -> 제대로 됨!
// $(this) : 매번 순차적으로 접근되는 해당 요소
$(this).addClass("highlight_" + index); // 제대로 됨!
var div = document.getElementById("wrap"); // js방식
div.style.backgroundColor = "pink"; // js방식
// div.css("backgroundColor", "pink"); // jQuery 방식 안됨
// div가 js방식이기때문에 $를 붙여줘서 강제형변환 하듯이 바꿔주면 jquery 방식으로도 사용 가능함
$(div).css("backgroundColor", "pink"); // 제대로 됨!
});
})
</script>
2) is 메소드
: $("선택자").is("선택자")
선택된 요소가 내가 전달한 전달값과 일치하는지 판단해서 그에 해당하는 논리값 반환
=> true | false로 반환
<예시>
<h3 class="test">test1</h3>
<h3>test2</h3>
<h3 class="test">test3</h3>
<h3 class="test">test4</h3>
<h3>test5</h3>
<h3 class="test">test6</h3>
<script>
$(function(){
$("h3").each(function(){
if($(this).is(".test")){
$(this).css("backgroundColor", "orange");
}
})
})
</script>
Author And Source
이 문제에 관하여(3/23(화)FrontEnd/jQuery(3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@alsrnr45/323화FrontEndjQuery3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)