오늘부터 jQuery 고고!
(https://www.w3schools.com/jquery/default.asp)
🤗jQuery 시작
😘 jQuery 추가
- Download the jQuery library from jQuery.com
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>- Include jQuery from a CDN, like Google
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>😘 Syntax
$ : jQuery()함수를 특수한 기호로 사용(jQuery() 대신 쓰는고)
//기본형
<script>
$
$(document).ready(function(){
//jQuery문법, 자바스크립트 문법사용
});
</script>
//단축형
<script>
$(function(){
});😲 ready() 이벤트메서드: 웹브라우저가 html문서를 다 읽고 난 시점에 동작
😘 Selector
jQuery의 모든 선택자는 $() 로 시작!
👉 element selector
$("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
버튼을 클릭하면 <p> 태그가 숨겨짐👉 #id selector
$("#test")
하나의 고유한 태그를 찾으려면 #id selector 사용하기
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
버튼을 클릭하면 id = "test"인 태그가 숨겨짐👉 .class selector
$(".test")
특정 클래스가 있는 태그를 찾는다
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
버튼을 클릭하면 class = "test"인 태그가 숨겨짐😲더 많은 selector 공부하려면
w3schools - jQuery selector
😘 Event
😲다양한 이벤트는 요기서
w3schools - jquery event
/* p태그 안에 동적으로 태그를 작업을 하고, 동적으로 생성된 태그에 이벤트를 추가하고자 할때 사용
$("정적태그부모선택자").on("click", "동적태그 자식선택자", function(){
$(this).hide();
});
*이벤트 설정이 정상적으로 작동안됨
$("동적태그 자식선택자").on("click",function(){
$(this).hide();
});
*이벤트 설정이 정상적으로 작동안됨
$("동적태그 자식선택자").click(function(){
$(this).hide();
});
*/🤗Effect
😲콜백함수(callback)
메서드의 매개변수로 제공되는 함수
이벤트 핸들러: 이벤트가 발생되어 호출되는 함수
(뒤에서 더 알아볼 예정)
😘Hide / Show
👉hide() / show()
이 메서드를 사용하여 THML태그를 숨기고 표시할 수 있다
$(selector).hide(speed,callback);
$(selector).show(speed,callback);예)
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});👉toggle()
숨기고 표시하고 할 수 있다(hide와 show 둘 효과)
$(selector).toggle(speed,callback);
예)
$("button").click(function(){
$("p").toggle();
});😲Effect
- fade - w3schools - jquery fade
- slide -w3schools - jquery slide
- animate - w3schools - jquery animate
- stop - w3schools - jquery stop
😘Callback
$ ( selector ) .hide ( speed, callback );
콜백이 있는 예)
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
콜백이 없는 예)
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});🤗jQuery HTML
😘Get
😲 Get Content(텍스트 읽기)
메서드 - 속성
text() - innerText
html() - innerHTML
val() - value
text)
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
HTML)
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
val)
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
->입력양식태그에서 사용
👉attr()
속성값을 가져올때 사용
예)
$("button").click(function(){
alert($("#w3s").attr("href"));
});
-> href 속성값을 가져옴😘Set
메서드 안에 매개변수 값을 입력하면 set!
text()
html()
val()$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });
