####################################################################
7. Traversing
- 6. Selectors 는 DOM에서 1차로 필터링하는 방법이다.
7. Traversing 는 기본 Selectors로 1차 필터링하고 이후에 2차 필터링할 때 사용한다. (****)
1> 기본 Filtering
<script>
$(document).ready(function () {
// https://api.jquery.com/category/traversing/filtering/
// 1. .eq(idx) <== 0 부터 시작. 지정된 idx 값을 2차 필터링
// $("li").eq(0) -> $("li"): 1차 필터링 , .eq(0): 2차 필터링
// $("li").eq(0).css("color", "red");
// 2. .filter(selector) <== 지정된 selectors 값으로 2차 핕터링
// $("p").filter(".middle").css("color", "red");
// 3. .not(selector) <== 지정된 selectors 값으로 일치하지 않는 2차 핕터링
// p 를 1차 필터링으로 뽑고 .middle 이 아닌 것만 필터링
// $("p").not(".middle").css("color", "red");
// 4. .first() <== 1차 필터링에서 첫번째 요소 2차 핕터링
// $("li").first().css("color", "red");
// 5. .last() <== 1차 필터링에서 마지막 요소 2차 핕터링
// $("li").last().css("font-size", "50px");
// 6. .has(selector) <== 지정된 selector 를 가진 요소를 포함하는 2차 핕터링
// $("li").has("span").css("color", "red");
// 7. .is(selector|function) <== 지정된 selector 를 가진 요소가 있으면 true
// 없으면 false 반환
// var result = $("p").is("[class]");
// console.log(result); // true
// var result = $("p").is("[id]");
// console.log(result); // false
// 8. .slice(start[, end]) <== 지정된 start 와 end 범위를 가진 2차 필터링
// start 는 0부터 시작, end 를 지정하지 않을시 끝까지 필터링
// $("li").slice(3).css("color", "red"); // 3 ~ 끝까지
// $("li").slice(2, 5).css("font-size", "50px"); // 2 ~ 4 까지
// 9. .map(function(idx,v){}) <== 1차 필터링된 요소를 가공해서 다시 반환하는 역할
// 가. JS 객체로 대문자로 변경해서 반환하는 코드
var result = $("li").map(function (idx, v) {
console.log(idx, v);
console.log(v); // JS 객체
var str = v.innerHTML;
return str.toUpperCase();
});
console.log(result);
console.log("--");
// 나. jQuery 객체로 대문자로 변경해서 반환하는 코드
var result2 = $("li").map(function (idx, v) {
console.log(v); // v 는 js 객체
var v_jquery = $(v); // v_jquery 는 jQuery 객체
var str = v_jquery.text();
return str.toUpperCase();
});
console.log(result2);
console.log("--");
// 다. function 함수내에서 JS 용 this 사용
var result3 = $("li").map(function (idx, v) {
// this 와 v 는 동일
console.log("this: ", this); // js 객체
return this.innerHTML.toUpperCase();
});
console.log(result3);
console.log("--");
// 라. function 함수내에서 jQuery 용 this 사용
var result4 = $("li").map(function (idx, v) {
// this 와 v 는 동일. 즉 li 임
console.log("this: ", this); // js 객체
var this_jQyery = $(this); // jQuery 용
return this_jQyery.text().toUpperCase();
});
console.log(result4);
});
</script>
2> Tree
# 부모/자식 관계
$(document).ready(function(){
//https://api.jquery.com/category/traversing/tree-traversal/
// 1. .children([selector]) : 자식만 찾음 ( 자손 포함 안됨 )
// .children() <== 1차 필터링의 모든 자식 반환 ( 자손 포함 안됨 )
// .children(selector) <== 1차 필터링의 자식들중에서 selector와 일치하는 자식 반환 ( 자손 포함 안됨 )
// $("div").children().css("color","red");
// $("div").children("span").css("color","red");
//2. .find(selector) : 자손까지 찾음 ( 자식 포함됨 )
// $("div").find("span").css("color","red");
//3. .parent([selector]) : 부모 찾음
// .parent() <== 1차 필터링의 모든 부모 반환 ( 조상 포함 안됨 )
// .parent(selector) <== 1차 필터링의 selector와 일치하는 부모 반환 ( 조상 포함 안됨 )
// 속성 관리: setter 역할: attr(속성명,속성값) getter 역할: attr(속성명)
// $("span").parent().attr("class","xyz"); // span의 모든 부모인 2개의 div와 1개인 p에 class속성이 추가됨.
// $("span").parent("p").attr("class","xyz"); // span의 모든 부모인 2개의 div와 1개인 p 중에서 p에만 class속성이 추가됨.
//4. .parents([selector]) : 조상 찾음 (부모 포함)
// .parents() <== 1차 필터링의 모든 조상 반환
// .parents(selector) <== 1차 필터링의 selector와 일치하는 조상 반환 ( 조상 포함 안됨 )
// $("span").parents().attr("class","xyz"); // span의 모든 조상요소에 class 속성이 추가됨
$("span").parents("body").attr("class","xyz"); // span의 모든 조상요소중에서 body에만 class 속성이 추가됨
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery04_2차필터링2_Tree1_부모자식관계</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- reday 메서드 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
//https://api.jquery.com/category/traversing/tree-traversal/
// 1. .children([selector]) : 자식만 찾음 ( 자손 포함 안됨 )
// .children() <== 1차 필터링의 모든 자식 반환 ( 자손 포함 안됨 )
// .children(selector) <== 1차 필터링의 자식들중에서 selector와 일치하는 자식 반환 ( 자손 포함 안됨 )
// $("div").children().css("color","red");
// $("div").children("span").css("color","red");
//2. .find(selector) : 자손까지 찾음 ( 자식 포함됨 )
// $("div").find("span").css("color","red");
//3. .parent([selector]) : 부모 찾음
// .parent() <== 1차 필터링의 모든 부모 반환 ( 조상 포함 안됨 )
// .parent(selector) <== 1차 필터링의 selector와 일치하는 부모 반환 ( 조상 포함 안됨 )
// 속성 관리: setter 역할: attr(속성명,속성값) getter 역할: attr(속성명)
// $("span").parent().attr("class","xyz"); // span의 모든 부모인 2개의 div와 1개인 p에 class속성이 추가됨.
// $("span").parent("p").attr("class","xyz"); // span의 모든 부모인 2개의 div와 1개인 p 중에서 p에만 class속성이 추가됨.
//4. .parents([selector]) : 조상 찾음 (부모 포함)
// .parents() <== 1차 필터링의 모든 조상 반환
// .parents(selector) <== 1차 필터링의 selector와 일치하는 조상 반환 ( 조상 포함 안됨 )
// $("span").parents().attr("class","xyz"); // span의 모든 조상요소에 class 속성이 추가됨
$("span").parents("body").attr("class", "xyz"); // span의 모든 조상요소중에서 body에만 class 속성이 추가됨
});
</script>
</head>
<body>
<div>
<span>this is 1st p</span>
</div>
<div>
<p>
<span>this is 2nd p</span>
</p>
</div>
<div class="myClass">
<span>this is 3rd p</span>
</div>
<div>
<p>this is 4rd p</p>
</div>
</body>
</html>
# 형제들 관계
$(document).ready(function(){
//https://api.jquery.com/category/traversing/tree-traversal/
//1. .next([selector]) <== 1차 필터링된 요소의 바로 뒤 형제요소만 반환
// .next() <== 1차 필터링된 요소의 바로 뒤 모든 형제요소만 반환
// .next(selector) <== 1차 필터링된 요소의 바로 뒤 형제요소중에서 selector와 일치하는 형제만 반환
// $("li").next().css("color","red");
// $("li").next(".selected").css("color","red");
//2. .nextAll([selector]) <== 1차 필터링된 요소의 뒤 형제들 반환
// .nextAll() <== 1차 필터링된 요소의 뒤 형제들 반환
// .nextAll(selector) <== 1차 필터링된 요소의 뒤 형제들중에서 selector와 일치하는 형제들만 반환
// $("li:first").nextAll().css("color","red");
// $("li:first").nextAll(".selected").css("color","red");
//3. .prev([selector]) <== 1차 필터링된 요소의 바로 앞 형제요소만 반환
// .prev() <== 1차 필터링된 요소의 바로 앞 모든 형제요소만 반환
// .prev(selector) <== 1차 필터링된 요소의 바로 앞 형제요소중에서 selector와 일치하는 형제만 반환
// $("li").prev().css("color","red");
// $("li").prev(".selected").css("color","red");
//4. .prevAll([selector]) <== 1차 필터링된 요소의 앞 형제들 반환
// .prevAll() <== 1차 필터링된 요소의 앞 형제들 반환
// .prevAll(selector) <== 1차 필터링된 요소의 앞 형제들중에서 selector와 일치하는 형제들만 반환
// $("li:last").prevAll().css("color","red");
// $("li:last").prevAll(".selected").css("color","red");
//5. .siblings([selector]) <== 1차 필터링된 요소의 바로 앞/뒤 형제들 반환
// .siblings() <== 1차 필터링된 요소의 바로 앞/뒤 형제들 반환
// .siblings(selector) <== 1차 필터링된 요소의 바로 앞/뒤 형제들중에서 selector와 일치하는 형제만 반환
// $("li.xxx").siblings().css("color","red");
$("li.xxx").siblings(".selected").css("color","red");
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery04_2차필터링2_Tree3_형제관계</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- reday 메서드 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/traversing/tree-traversal/
// 1. .next([selector]) <== 1차 필터링된 요소의 바로 뒤 형제요소만 반환
// .next() <== 1차 필터링된 요소의 바로 뒤 모든 형제요소만 반환
// .next(selector) <== 1차 필터링된 요소의 바로 뒤 형제요소중에서
// selector 와 일치하는 형제만 반환
// $("li").next().css("color", "red"); // A 를 제외한 모든 형제요소 반환
// $("li").next(".selected").css("color", "red");
// 2. .nextAll([selector]) <== 1차 필터링된 요소의 뒤 형제들 반환
// .nextAll() <== 1차 필터링된 요소의 뒤 형제들 반환
// .nextAll(selector) <== 1차 필터링된 요소의 바로 뒤 형제들중에서
// selector 와 일치하는 형제들만 반환
// $("li:first").nextAll().css("color", "red"); // A 를 기준으로 형제들
// $("li:first").nextAll(".selected").css("color", "red"); // 일치하는 selector 형제들
// 3. .prev([selector]) <== 1차 필터링된 요소의 바로 앞 형제요소만 반환
// .prev() <== 1차 필터링된 요소의 바로 앞 모든 형제요소만 반환
// .prev(selector) <== 1차 필터링된 요소의 바로 앞 형제요소중에서
// selector 와 일치하는 형제만 반환
// $("li").prev().css("color", "red");
// $("li").prev(".selected").css("color", "red");
// 4. .prevAll([selector]) <== 1차 필터링된 요소의 앞 형제들 반환
// .prevAll() <== 1차 필터링된 요소의 앞 형제들 반환
// .prevAll(selector) <== 1차 필터링된 요소의 바로 앞 형제들중에서
// selector 와 일치하는 형제들만 반환
// $("li:last").prevAll().css("color", "red"); // E 의 앞 형제들
// $("li:last").prevAll(".selected").css("color", "red");
// 5. .siblings([selector]) <== 1차 필터링된 요소의 바로 앞/뒤 형제들 반환
// .siblings() <== 1차 필터링된 요소의 바로 앞/뒤 형제들 반환
// .siblings(selector) <== 1차 핕터링된 요소의 바로 앞/뒤 형제들중에서
// selector 와 일치하는 형제만 반환
// $("li.xxx").siblings().css("color", "red");
// $("li.xxx").siblings(".selected").css("color", "red");
});
</script>
</head>
<body>
<ul>
<li>A</li>
<li class="selected">B</li>
<li class="xxx">C</li>
<li class="selected">D</li>
<li>E</li>
</ul>
</body>
</html>
# 2차 필터링의 find와 filter 차이점
$(document).ready(function(){
// 2차 필터링에서 사용되는 find 와 filter 차이점
$("div").filter(".myClass").css("color","red"); // 1차 필터링된 div태그중에서 class="myClass" 로 된 요소 반환
$("div").find(".myClass").css("font-size","50px"); // 1차 필터링된 div태그의 자손(자식포함)중에서 class="myClass" 로 된 요소 반환
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery04_2차필터링2_Tree2_find와filter차이점</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- reday 메서드 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 2차 필터링에서 사용되는 find 와 filter 의 차이점
// filter: 1차 필터링된 div 태그중에서 class = "myClass" 로 된 요소 반환
$("div").filter(".myClass").css("color", "red");
// find: 1차 필터링된 div 태그의 자손중에서 class = "myClass" 로 된 요소 반환
$("div").find(".myClass").css("font-size", "50px");
});
</script>
</head>
<body>
<div>
<span class="myClass">this is 1st p</span>
</div>
<div>
<p>
<span>this is 2nd p</span>
</p>
</div>
<div class="myClass">
<span>this is 3rd p</span>
</div>
<div>
<p>this is 4rd p</p>
</div>
</body>
</html>
####################################################################
8. Attributes
1> text() 메서드
- JS의 innerText 와 동일한 기능
ex>
<p id="xxx">hello</p>
# getter 역할
var p = document.querySelector("#xxx").innerText; // JS
var p2 = $("#xxx").text(); // jQuery
# setter 역할
document.querySelector("#xxx").innerText = "world"; // JS
$("#xxx").text("world"); // jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery05_Attribute1_text및html메서드</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/attributes
// // DOM Level 2 - JS
// document.querySelector("#get").addEventListener("click", function () {
// console.log("get");
// });
// jQuery 이벤트
$("#get").on("click", function () {
// console.log("get2");
// // JS
var p = document.querySelector("#xxx").innerText;
// jQuery
var p2 = $("#xxx").text();
console.log(p, p2);
// content 가 태그인 경우에는 태그없이 값만 반환됨.
console.log(">>>", $("#xxx2").text());
// content 가 태그인 경우에는 태그포함하여 반환됨.
console.log(">>>", $("#xxx2").html());
});
$("#set").on("click", function () {
// JS
document.querySelector("#xxx").innerText = "world";
// jQuery
$("#xxx").text("world2");
// 태그포함해서 설정됨. 단, 문자열로 포함시킴.
$("#result").text("<h1>world2</h1>");
// 태그포함해서 설정됨. 태그기능으로 실행됨.
$("#result").html("<h1>world2</h1>");
});
});
</script>
</head>
<body>
<button id="get">get</button>
<button id="set">set</button>
<p id="xxx">hello</p>
<p id="xxx2">
<span>hello2</span>
</p>
<div id="result"></div>
</body>
</html>
2> val() 메서드 및 attr() 메서드, removeAttr(속성명1)
<script>
$(document).ready(function () {
// https://api.jquery.com/category/attributes
// jQuery 이벤트
// 출력
$("#get").on("click", function () {
// JS
var id = document.querySelector("#userid").value;
// jQuery
var id2 = $("#userid").val();
console.log(id, id2);
/////////////////////////////////
// JS
var link = document.querySelector("#xxx").href;
// jQuery
var link2 = $("#xxx").attr("href");
console.log(link, link2);
});
// jQuery 이벤트
// 변경
$("#set").on("click", function () {
// JS
document.querySelector("#userid").value = "world";
// jQuery
$("#userid").val("world2");
/////////////////////////////////
// JS
document.querySelector("#xxx").href = "http://google.com";
document.querySelector("#xxx").innerText = "구글";
// jQuery
$("#xxx").attr("href", "http://jquery.com");
$("#xxx").text("href", "jquery");
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery05_Attribute2_val및attr메서드</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/attributes
// jQuery 이벤트
// 출력
$("#get").on("click", function () {
// JS
var id = document.querySelector("#userid").value;
// jQuery
var id2 = $("#userid").val();
console.log(id, id2);
/////////////////////////////////
// JS
var link = document.querySelector("#xxx").href;
// jQuery
var link2 = $("#xxx").attr("href");
console.log(link, link2);
});
// jQuery 이벤트
// 변경
$("#set").on("click", function () {
// JS
document.querySelector("#userid").value = "world";
// jQuery
$("#userid").val("world2");
/////////////////////////////////
// JS
document.querySelector("#xxx").href = "http://google.com";
document.querySelector("#xxx").innerText = "구글";
// jQuery
$("#xxx").attr("href", "http://jquery.com");
$("#xxx").text("href", "jquery");
});
});
</script>
</head>
<body>
<button id="get">get</button>
<button id="set">set</button>
<input type="text" name="userid" id="userid">
<a href="http://daum.net" id="xxx">다음</a>
</body>
</html>
3> attr 메서드 와 prop 메서드 차이점
<script>
$(document).ready(function () {
// https://api.jquery.com/category/attributes
// 즉시호출함수
// attr() : 태그의 속성값을 조회 가능. (속성값 자체를 가져옴)
// prop() : 태그의 속성값을 조회 가능. (속성값 상태를 가져옴)
// ex> checked, disable
(function () {
// c1: attr: checked true
console.log("c1: attr: ", $("#c1").attr("checked"), $("#c1").prop("checked"));
// c2: attr: undefined false
console.log("c2: attr: ", $("#c2").attr("checked"), $("#c2").prop("checked"));
})();
});
</script>
<body>
<input type="checkbox" id="c1" checked>
<input type="checkbox" id="c2">
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery05_Attribute3_attr메서드와prop메서드차이점</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/attributes
// 즉시호출함수
// attr() : 태그의 속성값을 조회 가능. (속성값 자체를 가져옴)
// prop() : 태그의 속성값을 조회 가능. (속성값 상태를 가져옴)
// ex> checked, disable
(function () {
// c1: attr: checked true
console.log("c1: attr: ", $("#c1").attr("checked"), $("#c1").prop("checked"));
// c2: attr: undefined false
console.log("c2: attr: ", $("#c2").attr("checked"), $("#c2").prop("checked"));
})();
});
</script>
</head>
<body>
<input type="checkbox" id="c1" checked>
<input type="checkbox" id="c2">
</body>
</html>
4> CSS 관련
1. .addClass("class class2") : 하나 이상의 클래스 적용
2. .removeClass("class class2") : 하나 이상의 클래스 제거
3. .toggleClass("class class2") : 번갈아 addClass 와 removeClass 적용
4. .css("속성명":"속성값");
.css({"속성명":"속성값", "속성명1":"속성값1", ...});
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery05_Attribute4_addClass_removerClass_toggleClass_css메서드</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.large {
/* 2XL */
font-size: xx-large;
font-weight: bold;
}
.blue {
color: blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/attributes
$("#large").on("click", function () {
$("p").addClass("large blue");
// css 메서드 실습
// $("span").css("color", "red"); // 속성하나
$("span").css({ "color": "red", "font-size": "50px" }); // 속성여러개
});
$("#normal").on("click", function () {
$("p").removeClass("large blue");
});
$("#toggle").on("click", function () {
$("p").toggleClass("large blue");
});
});
</script>
</head>
<body>
<h1>Heading</h1>
<h2>Heading2</h2>
<p>이것은 중요한 내용이다.</p>
<span>css 메서드 실습</span><br>
<button id="large">크게보기</button>
<button id="normal">보통</button>
<hr>
<button id="toggle">toggle</button>
</body>
</html>
####################################################################
9. Manipulation
https://api.jquery.com/category/manipulation
1> 선택된 요소의 형제로 삽입하는 방법
- .before()
- .after()
2> 선택된 요소의 자식으로 삽입하는 방법
- .prepend()
. .append()
3> 삭제
가. 자신이 삭제
.remove()
나. 자식이 삭제
.empty()
4> 치환
- .replaceWith()
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery06_Manipulation_before_after_append_prepend_remove_empty_replaceWith</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/manipulation
$("#before").on("click", function () {
$("#result").before("<h1>홍길동</h1>");
});
$("#after").on("click", function () {
$("#result").after("<h1>홍길동</h1>");
});
$("#prepend").on("click", function () {
$("#result").prepend("<h1>홍길동</h1>");
});
$("#append").on("click", function () {
$("#result").append("<h1>홍길동</h1>");
});
// div 자신이 제거
$("#remove").on("click", function () {
$("#result").remove();
});
// div 자식이 제거
$("#empty").on("click", function () {
$("#result").empty();
});
// 치환
$("#replaceWith").on("click", function () {
$("#result").replaceWith("<h1>홍길동</h1>");
});
});
</script>
</head>
<body>
<!-- before -->
<div id="result">
<p>Hello</p>
</div>
<!-- after -->
<button id="before">before</button>
<button id="after">after</button>
<button id="prepend">prepend</button>
<button id="append">append</button>
<button id="remove">remove</button>
<button id="empty">empty</button>
<button id="replaceWith">replaceWith</button>
</body>
</html>
####################################################################
10. Util
https://api.jquery.com/category/utilities
1> 배열 데이터 이용한 처리
가> $.each(array, function(idx, v){}) <== 일반적인 array 반복할 때 사용
나> $.grep(array, function(v, idx){return boolean 값;}) <== 필터링 기능. return true 만 반환
다> $.map(array, function(v, idx){ return 가공값; }) <== 데이터 가공해서 반환
2> DOM 배열 이용한 처리
$("li").each(function(idx, element){});
<script>
$(document).ready(function () {
// https://api.jquery.com/category/utilities
var sum = 0;
$("li").each(function (idx, ele) {
console.log(idx, ele); // ele 는 JS 객체
var data = $(ele).text();
sum += Number.parseInt(data);
});
$("#result").text(sum);
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery07_Util</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/utilities
var arr = [1, 2, 3, 4, 5, 6];
// 1. 일반적인 반복처리
// $.each(array, function(idx, v){})
$.each(arr, function (idx, v) {
console.log(idx, v);
});
// 2. 필터링 처리
// $.grep(array, function(idx, v){ return boolean값; })
// ex> 짝수값만 조회
var result = $.grep(arr, function (v, idx) {
return v % 2 == 0;
});
console.log("grep: ", result);
// 3. 가공처리
// $.map(array, function (v, idx) { return 가공값; })
var result = $.map(arr, function (v, idx) {
return v * 2;
});
console.log("map: ", result);
});
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery07_Util2_DOM반복처리_each</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// https://api.jquery.com/category/utilities
var sum = 0;
$("li").each(function (idx, ele) {
console.log(idx, ele); // ele 는 JS 객체
var data = $(ele).text();
sum += Number.parseInt(data);
});
$("#result").text(sum);
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
총합:
<div id="result"></div>
</body>
</html>'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| jQuery 2일차(2) - 이벤트, Ajax (0) | 2024.05.20 |
|---|---|
| jQuery 1일차 - 설치, ready, DOM(this), selectors, 2차필터링 (0) | 2024.05.16 |
| js 이론정리 (0) | 2024.05.16 |
| js 6일차 - 비동기, Ajax (0) | 2024.05.16 |
| js 6일차 - 클래스, 모듈 (0) | 2024.05.16 |