인접 관계 선택자
1. 전체 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
// 전체 요소에 파란색의 1px 두께의 실선의 생성
$("*").css("border", "1px solid blue");
})
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h3>관계 선택자</h3>
</body>
</html>
css에서도 전체 요소를 선택할 때는 *{ }로 사용하는데, 제이쿼리에서 전체 선택자의 경우에도 $("*")로 표현한다.
2. 아이디 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>선택자</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#tit").css("background-color", "yellow").css("border", "2px solid red");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h3>관계 선택자</h3>
</body>
</html>
html에서 설정되어 있는 아이디로 표현하는 방식 $("#id")
3. 클래스 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(".direct").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3 class="direct">직접 선택자</h3>
<h3>관계 선택자</h3>
</body>
</html>
4. 요소명 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("h3").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h3>관계 선택자</h3>
</body>
</html>
5. 그룹 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("h1, h3").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>직접 선택자 및 관계 선택자</h2>
<h3>직접 선택자</h3>
<h3>관계 선택자</h3>
</body>
</html>
6. 부모요소 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(".second").parent().css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li> 내용1
<ul>
<li>내용2</li>
<li class="second">내용3</li>
</ul>
</li>
</ul>
</body>
</html>
class = "second"의 부모 태그를 의미한다. li*2를 묶고 있는 바로 위의 부모인 ul에 css가 적용된다.
7. 하위요소 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#wrap li").css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li> 내용1
<ul>
<li>내용2</li>
</ul>
</li>
</ul>
</body>
</html>
id = "wrap" 의 li 라는 하위요소를 의미한다. 바로 하위의 li만 의미하는 것이아니라 <ul id="wrap"> 안에 묶여 있는 모든 li 태그에 css가 적용된다.
8. 자식요소 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#wrap > li").css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul id="wrap">
<li> 내용1
<ul>
<li>내용2</li>
</ul>
</li>
</ul>
</body>
</html>
id="wrap"의 자식요소를 의미한다. "#wrap>li"라고 표현하는 것은 <ul id="wrap"> 태그 안에 있는 li 태그를 모두 의미하는 것이 아니라 가장 상단에 있는 자식 첫번째 자식을 의미한다.
9. 자식요소들 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("body").children().css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li> 내용1
<ul>
<li>내용2</li>
</ul>
</li>
</ul>
</body>
</html>
children()는 선택한 요소의 모든 자식요소를 선택한다. 그렇기에 body태그의 자식을 의미한다. h1과 ul 태그에 css가 적용된다.
10. 형요소 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#second").prev().css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
</body>
</html>
.prev()는 선택한 요소의 바로 이전 요소를 선택한다. ("#second")는 <li id="second"> 로 .prev는 그 앞의 li 태그를 의미하기에 <li>내용1</li>에 css 요소가 적용된다.
11. 동생요소 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#second + li").css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
</body>
</html>
$("요소선택").next( ) / $("요소선택 + 다음요소")
선택한 요소의 다음 요소를 선택한다. #second의 다음 태그를 선택하는 것이기에 <li>내용3</li>에 css가 적용된다.
12. 형제요소들 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#second").siblings().css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>내용1</li>
<li id="second">내용2</li>
<li>내용3</li>
</ul>
</body>
</html>
$("요소선택").siblings()
선택한 요소의 형제요소를 선택한다. #second에 대한 형제요소를 선택하기 때문에 <li>내용1</li> <li>내용2</li>에 css가 적용된다.
위치탐색 선택자
13. first / last 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("li:first-of-type").css("background-color", "yellow");
$("li:last-of-type").css("background-color", "pink");
});
</script>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
<ul>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</body>
</html>
$("li:first") / $("li").first ()
전체 <li> 요소 중 첫번째 요소만 선택
$("li:last") / $("li").last()
전체 <li> 요소 중 마지막 요소만 선택
14. even / odd 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#menu li:even").css("background-color", "yellow");
$("#menu li:odd").css("background-color", "pink");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
$("li:odd") / $("li:even")
<li>요소중 홀수 요소만 선택 / 짝수 요소만 선택
15. first-of-type / last-of-type 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("li:first-of-type").css("background-color", "yellow");
$("li:last-of-type").css("background-color", "pink");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
<ul>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</body>
</html>
$("li:first-of-type") / $("li:last-of-type")
<li> 요소 중 첫번째 요소만 선택 / 마지막 요소만 선택
16. nth-child(n) / nth-last-of-type(n) 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("li:nth-child(3n)").css("background-color", "yellow");
$("li:nth-last-of-type(2)").css("background-color", "pink");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
<ul>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</body>
</html>
$("li:nth-child(n)") / $("li:nth-child(2n or 3n etc) / $("li:nth-last-of-type(n)")
<li> 요소 중 n번째 요소만 선택 / 2 or 3의 배수만 선택 / 마지막 요소 위치로 부터 n번째에 있는 요소만 선택
17. only-child / slice(index) 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 선택자 </title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("li:only-child").css("background-color", "yellow");
$("#first_list li").slice(2).css("background-color", "pink");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="first_list">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
<ul>
<li>내용5</li>
</ul>
</body>
</html>
$("li:only-child") / $("li").slice(n)
부모 요소 내에 <li>요소가 1개뿐인 <li>요소를 선택 / <li>요소 중 인덱스 n부터 참조 하는 요소 불러옴
18. eq / lt / gt 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
// eq는 요소들 인덱스를 의미한다 즉 인덱스 3
$("li:eq(3)").css("background-color","yellow");
// lt(i)는 요소 중 인덱스 i보다 작은 인덱스가 참조하는 요소를 불러온다 즉 인덱스 0, 1, 2
$("li:lt(3)").css("background-color", "pink");
// gt(i)는 요소 중 인덱스 i보다 큰 인덱스가 참조하는 요소를 불러온다 즉 인덱스 4,5
$("li:gt(3)").css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
<li>내용5</li>
<li>내용6</li>
</ul>
</body>
</html>
$("li:eq(n)") / $("li").eq(n)
<li> 요소 중 인덱스 n
$("li:gt(n)")
<li> 요소 중 인덱스 n 보다 큰 것
$(:li:lt(n)")
<li> 요소 중 인덱스 n 보다 작은것
*eq / gt / lt
- eq: element queue 요소의 인덱스
- gt: greater than 보다 크다
- lt: less than 보다 작다
속성 탐색 선택자
선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해 오는 선택자
19. 요소선택[속성]선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("a[title]").css("background-color", "yellow");
$("a[href='http://www.nate.com']").css("background-color", "pink");
$("a[href^='mailto']").css("background-color", "aqua");
$("a[href$='net']").css("background-color", "purple");
$("a[href*='google']").css("background-color", "orange");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li><a href="http://www.naver.com" title="네이버 이동">네이버</a></li>
<li><a href="mailto:ciycc@naver.com">관리자에게</a></li>
<li><a href="http://www.nate.com">네이트</a></li>
<li><a href="http://www.daum.net">다음</a></li>
<li><a href="http://www.google.com">구글</a></li>
</ul>
</body>
</html>
*정규표현식
|
문자
|
일치
|
예제
|
|
^
|
입력값의 시작
|
/^This/ 는 "This is.." 와 일치
|
|
$
|
입력값의 끝
|
/end$/는 "This is the end" 와 일치
|
|
*
|
0번 이상 반복
|
/se*/는 "seeee"와 "se"에 일치
|
|
?
|
0번 또는 1번 반복
|
/ap?/는 "apple" 과 "and"에 일치
|
|
+
|
1번 이상 반복
|
/ap+/는 "apple"에는 일치. "apie"에는 불일치
|
|
{n}
|
정확히 n번 반복
|
/ap{2}는 "apple"에는 일치. "apie"에는 불일치
|
|
{n,}
|
n번 이상 반복
|
/ap{2,}는 "apple"과 "apple"의 모든 p에 일치. "apie"에는 불일치
|
|
{n,m}
|
최소 n번, 최대 m번
|
/a,p{2,4}/는 "appppppple"의 p 4개에 일치
|
|
.
|
줄 바꿈을 제외한 모든문자
|
/a,e/는 "ape"와 "axe"에 일치
|
|
[^...]
|
대괄호 안의 문자를 제외한
모든문자
|
/a[^px]/는 "ale"에는 일치. "axe"나 "ape"에는 불일치
|
|
\b
|
단어 경계
|
/\bno/는 "nono"에서 첫번째 "no"에 일치
|
|
\B
|
단어 경계를 제외한 모든문자
|
/\Bno/는 "nono"에서 두번째 "no"에 일치
|
|
\d
|
0부터 9까지의 숫자
|
/\d{3}는 "Now in 123"에서 123에 일치
|
|
\D
|
숫자를 제외한 모든문자
|
/\D{2,4}/는 "Now in 123" 에서 "Now"에 일치
|
|
\w
|
단어 문자(알파벳,숫자,밑줄)
|
/\w/는 "javascript"에서 "j"에 일치
|
|
\W
|
단어 문자가 아닌 문자
(알파벳,숫자,밑줄이 아닌 문자)
|
/\W/는 "100%"에서 "%"에 일치
|
|
\n
|
줄바꿈
|
|
|
\s
|
하나의 공백 문자
|
|
|
\S
|
공백 문자가 아닌 모든 문자
|
|
|
\t
|
탭
|
|
|
(x)
|
캡쳐할 괄호
|
일치한 문자들 기억
|
|
[...]
|
대괄호 안의 모든문자
|
/a[px]e/는 "ape" 와 "axe"에 일치. "ale"에는 불일치
|
20. hidden / visible
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("p:visible").css("border", "1px solid red");
$("p:hidden").css("display", "block").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<p>내용1</p>
<p style="display: none;">내용2</p>
</body>
</html>
$("li:hidden") / $("li:visible")
<li> 요소중 숨겨져 있는것만 선택 / 보이는 것만 선택
21. type 속성 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":text").css("border", "1px dashed #f00");
$(":checked").attr("checked", false);
$(":selected").attr("selected", false);
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<p>
<label for="user_name">이름</label>
<input type="text" name="user_name" id="user_name">
</p>
<p>
<input type="checkbox" name="accept" id="accept" checked="checked"></input>
<label for="accept">사용자 동의</label>
</p>
<p>
<select name="rel_site" id="resl_site">
<option value="네이버">네이버</option>
<option value="네이트" selected="selected">네이트</option>
</select>
</p>
</body>
</html>
$(":text") / $(":selected") / $(":checked")
<input> 요소 중에서 속성이 text / selected / checked 인것 선택
22. constains() / has() / not() / find() / closest() 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu li {
margin: 5px 0;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("#menu li:contains('내용3')").css("border", "1px dashed red");
$("#menu li:has('strong')").css("border", "2px solid blue");
$("#menu li").not(":first").css("background-color", "yellow");
$("#menu li:eq(1)").find("strong").css("font-size", "22px");
$("#menu").closest("div").css("border", "5px double green");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<div id="wrap">
<div id="inner_wrap">
<ul id="menu">
<li>내용1</li>
<li><span>내용<strong>2</strong></span></li>
<li><a href="#">내용3</a></li>
<li>내용4</li>
<li>내용5</li>
</ul>
</div>
</div>
</body>
</html>
* contains( ) / has( ) / not ( ) / find( ) / closest( )선택자
contain( )선택자는 선택한 요소 중 지정한 텍스트(text)를 포함하는 요소만 선택
has( )선택자는 선택한 요소 중 지정한 태그를 포함하는 요소만 선택
not( )선택자는 선택한 요소 중 지정한 요소만 제외하고 선택
find( )선택자는 요소에서 지정한 요소를 다시 필터링(찾아)해 선택
closest( )선택자는 선택한 요소에 지정한 상위(조상)요소 중 가장 가까운 상위 요소를 찾아 선택
23. find() / contents() 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu li{
margin: 5px 0;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("li").filter(".st1").css("background-color", "yellow");
$("li").contents().css("border", "1px solid red");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul>
<li class="st1">내용1</li>
<li>
<span><strong>내용2</strong></span>
</li>
<li class="st1">내용3</li>
</ul>
</body>
</html>
contents()
선택한 요소에 하위 콘텐츠 중 가장 근접한 콘텐츠 선택
24. end()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#menu li{
margin: 5px 0;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#menu").children("li:eq(1)").css("border", "1px dashed red")
.end().css("border", "5px double blue");
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</body>
</html>
선택자와 함꼐 사용하면 편리한 메소드
25. is()
선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환하고, 그렇지 않으면 false를 반환한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu li {
margin: 5px 0;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
console.log($("#menu li:eq(0)").is(":visible"));
console.log($("#menu li:eq(1)").is(":visible"));
console.log($("#chk1").is(":checked"));
console.log($("#chk2").is(":checked"));
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu">
<li style="display:none;">내용1</li>
<li>내용2</li>
</ul>
<p>
<input type="checkbox" name="chk1" id="chk1" checked="checked" />
<label for="chk1">체크1</label>
</p>
<p>
<input type="checkbox" name="chk2" id="chk2" />
<label id="chk2">체크2</label>
</p>
</body>
</html>
$("li").is("visible")
선택한 <li> 요소가 보이면 true 보이지 않으면 false를 반환한다.
$(요소선택).is(":[checked | selected | visible | hidden]")
<input type="checkbox" checked="checked" name="chk1" id="chk1"/>
$("#chk1").is(":checked") /// checked="checked" --> true 반환
26. each()
선택한 여러 개의 요소들에 각각 순차적으로 하나씩 접근할 떄 사용하는 메소드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#m li").each(function (i, k){
$(k).text("리스트" + i);
});
});
</script>
</head>
<body>
<ul id="m">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu li{
margin: 5px 0;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#menu li").each(function(i, k){
console.log("Index: " + i);
console.log(k);
});
});
</script>
</head>
<body>
<h1>탐색 연산자</h1>
<ul id="menu">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
① $each(object, function(index, item){});
② $(selector).each(function(index, item){});
27. map()
배열의 데이터를 변환시켜 다시 새로운 배열 객체로 만든다. 즉 지정한 값으로 새로운 배열을 만든다. 배열의 값을 재가공하여 새로운 배열 객체를 만들 때 사용
callbackFunction을 실핸한 결과를 가지고 새로운 배열을 만들 때 사용 --> 기존의 배열은 바뀌지 않음
요소를 일괄적으로 변경하는데 효과적임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#menu li{
margin: 5px 0;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<!-- 콘솔확인 -->
<script>
var arrName = ["갑", "을", "병", "정"];
$(function(){
var arr = arrName.map(function(v, i){
console.log(v, i);
return v + i;
});
console.log(arr);
});
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
let mainArray = [1, 2, 3, 4, 5];
let subArray = mainArray.map(function(value, index){
return value + 5;
});
document.write(subArray);
</script>
</body>
</html>
array.map(function(value, index, array){return;});
value : 배열 내 현재 값.
index : 배열 내 현재 값의 인덱스
array : 현재 배열
'jQuery > 기본' 카테고리의 다른 글
| 4. 객체 조작 - 예제 (0) | 2022.06.09 |
|---|---|
| 4. 객체 조작 - 객체 편집 메서드 (0) | 2022.06.09 |
| 4. 객체조작 - 수치조작 메소드 (0) | 2022.06.08 |
| 4. 객체 조작 - 속성 조작 메소드 (0) | 2022.06.08 |
| step2 - 종합 (0) | 2022.06.02 |
댓글