jQuery 선택자
jQuery는 요소를 선택할 때 $("CSS 선택자") 또는 $(요소가 저장된 변수)의 형식으로 작성 * CSS 선택자로 요소를 선택한 경우 - id로 선택 시 단일 요소 반환 - class, name, 자식/후손 등으로 선택 시 배열로 반환 CSS 선택자로 요소를 선택한 경우 - id로 선택 시 단일 요소 반환 - class, name, 자식/후손 등으로 선택 시 배열로 반환
<body>
<h3>태그 선택자</h3>
<h5>테스트1</h5>
<h5>테스트2</h5>
<h5>테스트3</h5>
<p>테스트4</p>
<p>테스트5</p>
<p>테스트6</p>
<hr>
<h3>클래스 선택자</h3>
<h1 class="item">test1</h1>
<h1 class="item select">test2</h1>
<h1 class="item">test3</h1>
<h1 class="select">test4</h1>
<hr>
<h3>아이디 선택자</h3>
영어 소문자 + 영어 대문자 + 숫자로만 이루어진 문자열<br>
글자수는 총 8~20글자 사이<br>
단, 첫 글자는 반드시 영어 소문자
<input type="text" id="input1">
<span id="span1"></span>
<hr>
<h3>자식, 후손 선택자</h3>
<div class="area">
<ul>
<li>
<h4>사과</h4>
</li>
<li>바나나</li>
<li>딸기</li>
<li class="qqq">오렌지</li>
<li class="qqq">멜론</li>
</ul>
<h4>테스트1</h4>
<h4 class="qqq">테스트2</h4>
</div>
<hr>
<h3>속성 선택자</h3>
<pre>
요소[속성] : 특정 속성을 가지고 있는 객체 선택.
요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택.
요소[속성 ~= 값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택.
요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택.
요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택.
요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택.
</pre>
성별 :
<input type="radio" name="gender" id="male" value="남">
<label for="male">남자</label>
<input type="radio" name="gender" id="female" value="여">
<label for="female">여자</label>
<button type="button" id="check">확인하기</button>
<h3>prop() 메소드</h3>
<pre>
attribute : type, name, class, id, value 등과 같이
속성값을 별도로 입력해야되는 속성
property : checked, selected 와 같이
속성값이 별도로 입력되지 않는 속성
prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false
prop("속성명", ture | false) : 해당 속성을 checked 또는 selected
상태로 변경(true)/해제(false)
</pre>
취미 :
<input type="checkbox" name="hobby" value="football"> 축구
<input type="checkbox" name="hobby" value="game" checked> 게임
<input type="checkbox" name="hobby" value="music"> 음악감상
<button type="button" id="btn1">확인</button>
<script src="js/02_jQuery선택자.js"></script>
</body>> 태그 선택자
// ready()함수 : 문서가 로딩된 후 마지막에 수행하는 함수
$(document).ready(function () {
// jQuery 선택자는 css 선택자와 같다!!!
// $("h5").css("color", "red");
// $("p").css("color", "blue");
// 자바스크립트로 했을 때
// document.getElementsByTagName("p").style.color = "blue";
// -> 배열에 스타일을 적용할 수 없다.
const arr = document.getElementsByTagName("p");
for (let item of arr) {
item.style.color = "yellow";
}
// -> 배열에서 요소를 하나씩 꺼내서 적용하는건 가능하나 불편하다.
// h5, p 두 태그 동시에 배경색을 green으로 지정하기
// $("h5, p").css("backgroundColor", "green");
$("h5, p").css("backgroundColor", "green");
// $("h5, p").css("backgroundColor", "pink");
});
> 클래스 선택자
$(document).ready(function () {
// 클래스가 item인 요소의 글자색을 orange로 변경
$(".item").css("color", "orange");
// 클래스가 select인 요소의 배경색을 yellowgreen으로 변경
$(".select").css("backgroundColor", "yellowgreen");
// 클래스가 item, select를 동시에 가지고 있는 요소만
// 글자크기를 50px로 변경 -> 쉼표 하지 말고 붙여쓰기
$(".item.select").css("fontSize", "50px");
});
> 아이디 선택자
const regExp = /^[a-z][a-zA-Z0-9]{7,19}$/;
$("#input1").on("input", function () {
// on() == addEventListener
// -> 특정 이벤트 발생 시 동작(이벤트 핸들러)지정
// input 이벤트 : 입력과 관련된 모든 행위
// 1) 작성된 값이 정규 표현식에 맞는 형식인지 검사
if (regExp.test($("#input1").val())) {
// ($("#input1").val())
// : 아이디가 input1인 요소에 작성된 값(value)를 얻어옴
// 2) 정규식 결과에 따라 내용 출력
$("#span1").text("유효한 문자열 형식입니다.");
// $("#span1").text("유효합니다!!");
$("#span1").css("color", "green");
} else {
$("#span1").text("유효하지 않은 문자열 형식입니다.").css("color", "red");
// method chaining : 하나에 대상에 대하여 여러 메소드를 연달아 작성하는 기술
}
if ($("#input1").val() == "") {
$("#span1").text("");
}
})
> 자식, 후손 선택자
// 제일 간단한 형태의 ready()함수
$(function () {
// 클래스가 area인 요소의 후손 중 h4 글자색 red로 변경
$(".area h4").css("color", "red");
// 클래스가 area인 요소의 후손 중 에 ul 후손 중에
// 클래스가 qqq인 요소 배경색 원하는 걸로 바꾸기
$(".area ul .qqq").css("backgroundColor", "aqua");
// 클래스가 area인 요소의 후손 중
// 클래스가 qqq인 요소의 폰트 크기를 30px로 변경
$(".area .qqq").css("fontSize", "30px");
// 내용이 "사과"인 요소를 선택해서
// 배경 빨강색, 글자는 흰색으로 변경
$(".area li > h4").css("backgroundColor", "red").css("color", "white")
})
> 속성 선택자
$("#check").on("click", function () {
// name 속성값이 gender인 요소를 선택
console.log($("input[name='gender']"));
// name 속성값이 gender인 요소 중 check된 요소를 선택
// :checked -> check된 요소만 선택
const gender = $("input[name='gender']:checked");
console.log(gender);
console.log(gender.length);
// 아무것도 check 안함 : 0
// 하나라도 check : 1
// 변수 gender는 Javascript 방식의 변수이다.
// -> 이후 gender를 단순하게 호출하게 되면
// Javascript 방식으로 사용해야 된다.
// radio 버튼이 하나도 선택되지 않은 경우
// "남자 또는 여자 중 하나를 선택해 주세요" 알림창 출력
if (gender.length == 0) {
alert("남자 또는 여자 중 하나를 선택해 주세요")
} else {
// 1) 체크된 요소를 모두 얻어왔으므로
// 배열 형태로 저장된 gender 변수에서
// 0번 인덱스의 value만 얻어오기
console.log(gender[0].value);
// 2) 체크된 요소를 모두 얻어와도
// radio는 1개만 체크되어 있기 때문에
// 변수 한개랑 같다라고 해석하여
// 자동으로 0번 인덱스 요소에 있는 value를 얻어옴(JS + jQuery)
console.log(gender.val());
// 순수 jQuery
console.log($(gender).val());
// $(gender) : 체크된 요소만 담긴 배열 + 요소를 선택해라 기호
// --> 체크된 radio 버튼을 선택하는 jQuery 선택자
alert($(gender).val() + "자를 선택하셨습니다.");
}
})
--> 이렇게 하면 콘솔창에 남자 선택하면 남자 여자면 여자 이렇게 실시간으로 바뀌는데
아직 콘솔창과 많이 친하지 않은 나에겐 너무 신기하다,,,
> prop() 메소드
$("#btn1").on("click", function () {
const arr = $("input[name='hobby']");
// 이름이 "hobby"인 모든 <input> 요소를 선택하여
// 배열 형태로 저장
let str = ""; // 체크된 요소의 value 값을 누적해서 저장할 변수
console.log(arr.prop("checked"));
// 배열명을 적을 경우 0번 인덱스만 확인 가능
for (let i = 0; i < arr.length; i++) {
// 각 인덱스에 저장된 checkbox요소가 체크되어 있는 상태인지 확인
console.log(i + " : " + $(arr[i]).prop("checked"));
if ($(arr[i]).prop("checked")) {
// 체크된 요소의 value 값을 얻어와 str 변수에 누적
str += $(arr[i]).val() + " ";
}
}
alert(str);
})
오늘의 결론 : jQuery는 설명을 적는 것 보다 직접 코드로 하나씩 실행해가며 배우는 과목인 것 같다 그래서 설명보다는 직접 코딩한 내용이 대부분 ㅎㅎ 생각보다 어렵지 않아서 아직은 할만하다
민주입니다
역시 이론보단 실전이죠!