find()/fiter()
find()탐색 선택자는 선택한 하위 요소 중에서 find()로 필터링한 요소만 선택합니다. filter()탐색 선택자는 선택한 요소 중에서 filter()로 필터링한 요소만 선택합니다.
$("선택자").find("하위 요소중 필터링할 요소 선택"); $("선택자").filter("선택한 요소중 필터링할 요소 선택");
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery03</title>
<script src="jquery.min_1.12.4.js"></script>
<script>
$(function(){
//내용1을 선택해서 백그라운드를 빨간색으로 변경
//$(".txt1").css("backgroundColor", "red");
//$("#inner_1 > .txt1").css("backgroundColor", "red");
//$("p:contains('내용1')").css("backgroundColor", "red");
//$("#inner_1 p:eq(0)").css("backgroundColor", "red");
//$("#inner_1 p:first").css("backgroundColor", "red");
//$("p[class='txt1']").css("backgroundColor", "red");
//$("p[class^='txt1']").css("backgroundColor", "red");
//$("p[class*='txt1']").css("backgroundColor", "red");
//$("p[class~='txt1']").css("backgroundColor", "red");
//$("#inner_1 .txt1").css("backgroundColor", "red");
//$("#inner_1 :nth-child(2)").css("backgroundColor", "red");
//$("#inner_1 p:nth-of-type(1)").css("backgroundColor", "red");
//$("#inner_1 p:first-of-type").css("backgroundColor", "red");
//$("#inner_1 p:lt(1)").css("backgroundColor", "red");
$("#inner_1").find(".txt1").css("backgroundColor", "red");
$("#inner_1 p").filter(".txt2").css("backgroundColor", "blue");
});
</script>
</head>
<body>
<div id="outer_wrap">
<h1>콘텐츠 탐색 선택자</h1>
<section id="inner_1">
<h2>find(), filter()</h2>
<p class="txt1">내용1</p>
<p class="txt2">내용2</p>
</section>
<section id="inner_2">
<h2>filter(function)</h2>
<p>index0</p>
<p>index1</p>
<p>index2</p>
<p>index3</p>
</section>
</div>
<!-- script -->
<script>
</script>
</body>
</html>마우스 오버하면 글씨 변경하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery01</title>
</head>
<body>
<h1>친화도법(affinity diagram)</h1>
<p class="desc">아이디어를 정리하는 압축 기법이다. 보통 아이디어를 발화하는 방법으로 많이 사용되는 것이 <em>브레인스토밍</em>이다. 그러나 <em>브레인스토밍</em>으로 많은 아이디어나 생각들이 도출되었어도 정돈되지 않아 핵심 파악이 어려울 때가 있다. <strong>친화도법</strong>은 많은 아이디어나 생각을 관련 있는 것끼리 분류하여 전체적인 구조를 파악하는 문제 해결 방법이다. 동일한 주제에 대한 의견이나 미래에 일어날 상황 등을 예측하여 유사성, 연관성이 높은 순으로 재분류하고 파악한 후 해결안을 만든다.</p>
<!-- script -->
<script src="jquery.min_1.12.4.js"></script>
<script>
$(".desc strong").css({color: "#c7254e", backgroundColor: "#f9f2f4",
fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
$(".desc").find("em").css({color: "#c7254e", backgroundColor: "#f9f2f4",
fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
$(".desc").find("strong").mouseover(function(){
$(this).css({color: "#c7254e", backgroundColor: "#f9f2f4",
fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
});
$(".desc").find("strong").mouseout(function(){
$(this).css({color: "#000", backgroundColor: "transparent",
fontSize: "100%", padding: "0px", borderRadius: "0px"});
});
$(".desc").find(":contains('친화도법')").css({color: "#c7254e", backgroundColor: "#f9f2f4",
fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
//글자 쪼개기
let text = $(".desc").text().split(" ").join("</span><span>");
text = "<span>" + text + "</span>"
$(".desc").html(text).find("span").mouseover(function(){
$(this).css({color: "#c7254e", backgroundColor: "#f9f2f4", fontSize: "90%", padding: "4px 6px 2px 6px", borderRadius: "5px"});
});
$(".desc").html(text).find("span").hover(function(){
$(this).css({color: "#c7254e", backgroundColor: "#f9f2f4", borderRadius: "5px"});
}, function(){
$(this).css({color: "#000"});
})
</script>
</body>
</html>Last updated
Was this helpful?