😀매개변수가 필요한 이유는 사용자의 움직임에 따른 정보를 받아서 함수에서 사용해야하기 때문에!!
/*
제이쿼리 탐색 선택자
- 제이쿼리 탐색 선택자를 이용하면 직접 선택자를 이용해 선택한 요소 중
원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있는 장점이 있음
탐색 선택자의 종류
* 위치 탐색 선택자
==> 선택한 요소 중 위치를 기준으로 선택하는 선택자
* 속성 탐색 선택자
==> 요소의 지정된 속성을 기준으로 선택하는 선택자
* 콘텐츠 탐색 선택자
==> 요소 내에서 콘텐츠의 포함 여부를 따져서 선택하는 선택자
* 필터링 선택자
==> 선택한 요소를 한 번 더 필터링하여 선택하는 선택자
*/
/*
위치 탐색 선택자
1. 첫번째 요소 선택 : 전체 요소 중에서 첫번째 요소만 선택
형식) $("요소선택:first"), $("요소선택").first()
2. 마지막 요소 선택 : 전체 요소 중에서 마지막 요소만 선택
형식) $("요소선택:last"), $("요소선택").last()
*/
/*
위치탐색 선택자
3. 짝수번째(홀수 인데스) 요소 선택 선택자
: 전체 요소 중에서 짝수 번째(홀수 인데스) 요소만 선택하는 선택자 //인덱스는 0부터 시작하니까
형식) $("요소선택:odd"), $("요소선택").odd()
4. 홀수번째(짝수 인덱스) 요소 선택 선택자
: 전체 요소 중에서 홀수 번째(짝수 인데스) 요소만 선택하는 선택자
형식) $("요소선택:even"), $("요소선택").even()
*/
$(function() {
$(".menu li:first").css.("color", "red");
$(".menu li:last").css.("color", "red");
$(".menu li:odd").css.("color", "red");
$(".menu li:even").css.("color", "red");
});
/*
위치 탐색 선택자
5. 전체 요소 중 특정 숫자 번째 요소만 선택하는 선택자
형식) $("요소선택:nth-child(숫자)")
6. 전체 요소 중 특정 배수의 요소만 선택하는 선택자
형식) $("요소선택:nth-child(숫자n)")
*/
$(function() {
$("ul li:nth-child(3)").css("color", "red");
$("ul li:nth-child(2n)").css("color", "red");
$("ul li:nth-child(2n+1)").css("color", "red");
});
/*
탐색 선택자
1. eq(index) 선택자
==> 지정한 인덱스가 참조하는(equals) 요소만 선택하는 선택자
2. lt(index) 선택자
==> 지정한 인덱스보다 작은(less than) 요소만 선택하는 선택자
3. gt(index) 선택자
==> 지정한 인덱스보다 큰(greater than) 요소만 선택하는 선택자
*/
$(function() {
$("ul li:eq(3)").css("color", "red");
$("ul li:lt(3)").css("color", "skyblue");
$("ul li:gt(3)").css("color", "tomato");
});
/*
요소 조작 함수
==> 요소를 생성, 복사, 삭제, 속성 변환과 관련된 함수를 제공
1. 속성 조작 함수
2. 수치 조작 함수
3. 요소 편집 함수
*/
😀html : 하위요소 불러오기 or 새 요소로 바꾸기
$(function() {
// 1. 속성 조작 함수
// html() : 선택한 요소에 포함되는 하위 요소를 불러오거나 새 요소로 바꿀 때 사용하는 함수
$("h3").html("<a href='#'>하이</a>");
// 1. 속성 조작 함수
// text() : 선택한 요소 내의 텍스트를 불러오거나 변경할 때 사용하는 함수
$("h2").text("텍스트 페이지입니다");
});
<body>
<h2>잘가세요</h2>
<h3><i>html()</i></h3>
</body>
/*
val() / val(값)
: 입력 요소에 입력되어 있는 value 값을 가져오거나 변경할 때 사용하는 함수
*/
$(function() {
//let userName = $("#user_name").val();
//$("#my_name").val(userName);
$("#my_name").val($("#user_name").val());
});
<body>
<p>
<input type="text" name="user_name" id="user_name" value="홍길동">
</p>
<p>
<input type="text" name="my_name" id="my_name">
</p>
</body>
//이벤트 형식
// $("요소선택").on("이벤트이름", 이벤트리스너)
// ==> 이벤트 리스너는 보통 무명(익명) 클래스를 이용하여 처리를 함
*/
😀버전 2개
$(function() {
$(".btn1").on("click", function() {
alert("이벤트야 이게");
});
$(".btn1").on("click", alertFunction());
});
function alertFunction() {
alert("이벤트라고 이게");
};
/*
이벤트이름(목록)
blur, change, load, unload, resize, scroll, select, submit,
(마우스) click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseleave, focus,
(키보드) keydown, keypress, keyup,...
*/
$(function() {
$(".menu li").on("click", function() {
alert($(this).html); // this와 화살표함수는 같이 쓸 수 없다.
});
});
/*
마우스이벤트
- mouseover() : 마우스가 해당 영역에 올라갔을 때 발생하는 이벤트
형식) $("요소선택").on("mouseover", function() {...});
$("요소선택").mouseover(function() {...});
- mouseout() : 마우스가 해당 영역을 벗어났을 때 발생하는 이벤트
형식) $("요소선택").on("mouseout", function() {...});
$("요소선택").mouseout(function() {...});
- hover() : mouseout / mouseover가 합쳐진 이벤트
형식) $("요소선택").hover(
function() {...}, ==> 마우스가 올라갔을 때 이벤트
function() {...} ==> 마우스가 벗어났을 때 이벤트
);
*/
$(function() {
$(".btn1").mouseover(function() {
alert("마우스를 올렸습니다");
});
$(".btn1").on("mouseout", function() {
alert("마우스를 뗏습니다");
});
$("p").hover(
function() {
$("p").css("color", "red");
}
() => {
$("p).css("background-color", "skyblue");
}
);
});
/*
mousemove() : 선택한 요소의 영역에서 마우스를 움직일 때마다 이벤트가 발생
형식) $("요소선택").mousemove(function(매개변수){...}); //매개변수가 필요할 때가 대부분이나 없는 경우도 있음
*/
$(function() {
$(document).mousemove(function(e) { // 아무 매개변수 넣었음
let x = e.pageX; // 마우스의 x좌표값을 구함
let y = e.pageY; // 마우스의 y좌표값을 구함
$("h2").text("x좌표 : " +x+ " / y좌표 : " +y);
});
});
/*
키보드 이벤트
- keypress() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생 // 대소문자 구분 못하고 대문자로 인식함
형식) $("요소선택").keypress(function(매개변수){...});
- keydown() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생
형식) $("요소선택").keydown(function(매개변수){...});
- keyup() : 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생
형식) $("요소선택").keyup(function(매개변수){...});
*/
$(function() {
$("#user_id").keypress(function(e) {
$("txt2").text(e.keyCode);
})
$("#user_id").keydown(function(e) {
$("txt2").text(e.keyCode);
$(this).css("background-color", "gray");
})
$("#user_id").keyup(function(e) {
$(this).css("background-color", "tomato");
})
});// this는 함수명 앞의 객체 즉 . 앞에 명시된 객체 => $("#user_id")
/*
기타 자주 사용되는 이벤트 함수
- change() : 선택한 입력 요소에 값이 새 값으로 변경되고,
포커스가 다른 곳으로 이동이 되었을 때 이벤트 발생
select태그 이용할 때 자주 사용됨
*/
$(function () {
$(".site").change(function() {
$(".txt").text($(this).val());
});
});
<body>
<select class="site">
<option value="www.naver.com>네이버</option>
<option value="www.goolge.com>구글</option>
</select>
<p class="txt></p>'JQuery' 카테고리의 다른 글
| 23.02.23(애니메이션) (0) | 2023.02.23 |
|---|---|
| 23.02.21 (선택자) (0) | 2023.02.21 |
댓글