javascript 와 jQuery
공식 문서 보기
jQuery
javascript는 기본적으로 정보전달 기능만 가지고 있는 html에 동적 기능을 추가하는 것
jQuery는 js를 조금더 쉽게 사용할 수 있게 해주는 라이브러리
<!DOCTYPE html>
<html lang="ko">
<head>
jQuery는 반드시 외부에서 받아와야 한다.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
</head>
<body>
<script>
.html은 앞에 선택된것에 내용물을 삽입하는 함수이다.
.는 class / #은 id / 그냥 쓰면 태그명
function hi() {
$("div").html("하이루");
}
function hi() {
$(".my_class").html("하이루");
}
function hi1() {
$("#my_div1").prepend("하이루");
}
function hi2(){
$("#my_div1").before("하와유")
}
function hi3(){
$("#my_div1").html("<img src='img/wow.gif'>");
}
function hi4(){
$("#my_div1").text("<img src='img/wow.gif'>");
}
function hi5(){
$("#my_div1").remove();
}
function pre(){
$("#my_div").prepend($("#my_input").val());
}
function hello(){
$("#my_div1").html($("#my_input").val());
$("#cal_"+$("#my_date").val()).append("<div class='content'>"+$("#my_input").val()+"</div>");
}
</script>
<div id="my_div" class="my_class">하하하</div>
<div id="my_div" class="my_class">호호호</div>
onclick은 클릭했을 때 동작할 내용을 기술한다.
<button onclick="hi1();">눌러봐</button>
<button onclick="hi2();">눌러봐</button>
<button onclick="hi3();">html 실행</button>
<button onclick="hi4();">text 실행</button>
<button onclick="hi4();">삭제</button>
<input type="text" id="my_date" placeholder="헿"></input>
<input type="text" id="my_input" placeholder="뷁"></input>
<!--button onclick="prepend();">입력</-button-->
<button onclick="hello();">입력한 내용 확인</button>
<div class="outer">
<div id="cal_1" class="my_class">
<div class="date">
1
</div>
</div>
<div id="cal_2" class="my_class">
<div class="date">
2
</div>
</div>
<div id="cal_3" class="my_class">
<div class="date">
3
</div>
</div>
</div>
</body>
</html>기본
$("#클래스이름, .아이디이름, 태그")
부모의 자식
$("div>div, div div, div>span>div, #yes>div")
클래스 삽입/삭제/탐색
$("#yes").addClass("myclass");
$("#yes").removeClass("myclass");
$("#yes").hasClass("myclass");
- 내용 삽입/삭제
$("div").append("내용"); 내부 최하단에 삽입
$("div").prepend("내용"); 내부 최상단에 삽입
$("div").before("내용"); 선택된거 앞에 삽입
$("div").after("내용"); 선택된거 뒤에 삽입
$("div").remove(); 선태괸거 삭제
- 요소 변경 html/css
$("#div1").html("잘지내세요."); 태그도 인식
$("#div1").text("잘지내세요."); 태그를 글자 자체로 인식
$( "#div1" ).css( "border", "3px dotted blue" );
- 입력 내용 가져오기/삽입하기
$("#my_input").val(); 입력박스만
$("#my_div1").html(); 입력박스를 제외하고 태그 안의 내용
prepend
before
html
text
서버와 통신하기
form 태그 : 서버로 정보를 전송하는 태그
이 안에 input 태그 같은 것을 받아서 서버로 전송
action 속성 : 내가 정보를 보낼 곳
method 속성 : "get", "post" 양자택일로 보내는 방식을 선택할 수 있다.
get 방식 : 보내는 정보가 url(Uniform Resource Locator)에 노출이 된다. - 정보가 분석이 된다.
post 방식 : 보내는 정보가 숨겨져 있다.(사용자에게 민감한 정보가 노출되지 않게 한다.)
서버는 사용자가 어떤 방식으로 데이터를 넘기었는지는 중요하게 생각 안함
- form 태그 안에 들어갈 수 있는 것들
name이라는 속성을 반드시 줘야 한다.(같은거는 같은 name으로)
input 태그 : 글자를 입력하는 태그
radio 속성 : 한눈에 보이는 선택사항들 중 하나만 선택하는 태그
checkbox 속성 : 한눈에 보이는 선택사항들 중 복수개를 선택하는 태그
select 태그 : 리스트 중에 선택하는 태그
textarea 태그 : 여러 줄을 입력하는 태그
button 태그
type="submit" 사용
uri(통합 자원 식별자, Uniform Resource Identifier)
신촌거지출신개발자(시리즈 부분에 목차가 나옵니다.)