안녕하세요 jju_developer입니다.
이번 시간부터는 제이쿼리(jQuery) 선택자와 함께 사용하면 편리한 메서드들에 대해서 알아보도록 하겠습니다😆
▼▼▼제이쿼리 직접 선택자?▼▼▼
https://jju240.tistory.com/146
제이쿼리(jQuery)란? + 선택자 상세 설명
안녕하세요 jju_developer입니다. 지난 시간에는 자바스크립트에 대한 기초 지식에 대해서 알아봤습니다~ 이번 시간 부터는 제이쿼리에 대해서 알아보도록 하겠습니다😆 ▼▼▼자바스크립트란?▼
jju240.tistory.com
▼▼▼제이쿼리 탐색 선택자?▼▼▼
제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명
안녕하세요 jju_developer입니다. 이번 시간부터는 제이쿼리(jQuery) 탐색 선택자에 대해서 알아보도록 하겠습니다😆 ▼▼▼제이쿼리 직접선택자?▼▼▼ https://jju240.tistory.com/146 제이쿼리(jQuery)란? +
jju240.tistory.com
1. 제이쿼리 선택자와 함께 사용하면 편리한 메서드!!!!
메서드 종류
| 종류 | 사용 | 설명 |
| is() | $("li").is(".visible") | 선택한 <li> 요소가 보이면 true를 반환 |
| noConfilct() | var m = $.noConfilct(); m("h1").width(100); |
$.noConfilct()를 사용하면 "$" 메소드를 변수에 참조시켜 "$" 문자 대신 임의의 문자를지정하여 사용할 수 있음 |
| get() | $("li").get(0).style.color = "red"; | 제이쿼리로 선택한 요소에 get(0) 메서드를 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트에 DOM 방식을 따른다 |
| each() / $.each() | $("li").each(function(){ ... }); $.each($("li"),function(){ ... }); |
선택한 요소들을 각각 순차적으로 접근해 선택해 온다 |
| map() | 배열 객체.map(함수) | 배열 데이터를 변환시켜 다시 새로운 배열 객체를 |
(1) is() 메서드
선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
// 기본형
$(요소 선택). is(":[checked | selected | visible | hidden]")
<input type="checkbox" checked="checked" name="chk1" id="chk1"/>
$("#chk1").is(":checked")
현재 코딩을 했을 때 보이는 화면입니다.
이때 메서드를 이용해서 콘솔에 true인지 false인지 알아낼 수 있습니다.
<전체 코드 보기>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> 탐색 선택자 </title>
<style type="text/css">
#menu li {
margin: 5px 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
console.log($("#menu li:eq(0)").is(":visible")); //내용이 보이니?
//메뉴의 리스트 아이탬이 2개인데 그 내용중 0번째의 내용이 보이니?
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 for="chk2">체크2</label>
</p>
</body>
</html>
(2) each()/$.each() 메서드
each는 선택한 여러 개의 요소들에 각각 순차적으로 하나씩 접근할 때 사용하는 메서드입니다.
다음은 each() 메서드의 기본형으로 '매개변수 1'에는 순차적으로 접근해 선택한 요소의 인덱스 번호가 저장되고, '매개변수 2'에는 순차적으로 선택한 요소가 저장됩니다.
// 기본형
$(요소 선택).each(function(매개변수1, 매개변수 2){...});
$.each(요소 선택, function(매개변수 1, 매개변수 2){...});
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
//4개의 메뉴 선택-> list 선택-> each로 바꾸기
$("#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>이렇게도 쓸 수 있습니다.
(3) map() 메서드
배열의 데이터를 변환시켜 다시 새로운 배열 객체로 만든다. 즉 지정한 값으로 새로운 배열을 만든다.
// 기본형
배열객체.map(function(i,k){
...
});
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
let arrName=["jju","jju","jju","jju"];
$(function(){
let arr = arrName.map(function(i,k){
return i+k;
});
//맵은 배열의 데이터를 변환시켜 새로운 배열을 만듭니다.
console.log(arr);
});
여기까지 제이쿼리(jQuery) 선택자와 함께 사용하면 편리한 메서드에 대한 개념 설명이었습니다.
감사합니다.
'주니어 기초 코딩공부 > Javascript & jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 이벤트 등록 메서드, 마우스, 키보드, 포커스 이벤트 개념 및 종류 설명!! (0) | 2023.01.12 |
|---|---|
| 제이쿼리(jQuery) 객체 조작, 속성 조작 메서드 (0) | 2023.01.12 |
| 제이쿼리(jQuery) 탐색 선택자, 그 외의 선택자 설명 (2) | 2023.01.12 |
| 제이쿼리(jQuery)란? + 선택자 상세 설명 (1) | 2023.01.12 |
| 자바스크립트JavaScript 문서 객체 모델(DOM) 개념 및 DOM의 이벤트 처리 및 삭제 방법 (1) | 2023.01.11 |