script src로 경로 써줘야 jQuery 쓸 수 있다! (보통 head 안에 많이 씀! body 끝에 쓰기도)
<script src="../js/jquery-3.5.0.js"></script>
스크립트 안에 jQuery 쓰겠단 걸 알려줘야함
src가 있어야 이게 동작이 됨!
jQuery를 문서(document)로해서 함수(function)를 사용할 준비(ready)가 되었다는 뜻
실행창
<script src="../js/jquery-3.5.0.js"></script> <script type="text/javascript"> // 3가지 방식 - 우린 그 중에 2번째 방법 사용 jQuery(document).ready(function(){ alert("jQuery 준비1"); }); $(document).ready(function(){ alert("jQuery 준비2"); }); ⇒ 이 형태를 가장 많이 씀! jQuery 대신 $ 표시 $(function(){ alert("jQuery 준비3"); }); ⇒ 더 간단하게도 가능 (함수 이름은 없다) </script>
======== js_jQuery1 에 test2.jsp 만들기
< .css() : 모양 꾸미는 함수 >
<script src="../js/jquery-3.5.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 대상.함수(); // 전체 대상 : 글자색 빨간색 $('*').css('color', 'red'); }); </script>
전체 적용 (‘*’)
// h1 태그 대상 : 글자색 파란색 $('h1').css('color', 'blue');
추가
# document 랑 this 는 작은따옴표 안붙이는데 나머지는 전부 대상 이름 작은따옴표(‘’)안에 넣어줌
id랑 class 값 넣어주기
// ta이름 대상 : 글자색 녹색 $('#ta').css('color', 'green');
추가
// ta2이름 대상 : 글자색 오렌지색 $('.ta2').css('color', 'orange');
추가
input 태그 추가
태그는 같은데 속성값이 다른 건 jQuery로 부를 때 어떻게 할까?
// 태그[속성=값] // input 태그에 type 속성 값이 text 라는 값 : 글자색 검정 $('input[type=text]').css('color', 'black');
// tr 태그 짝수번째 배경색 pink $('tr:even').css('background', 'pink'); // tr 태그 첫번째 배경색 green $('tr:first').css('background', 'green');
추가
======== test3.jsp
body 에 h1 태그 3개 추가
$(document).ready(function(){ // 대상.함수(); // .css( propertyName ) // .css( propertyName, value ) // propertyName Type: String // value Type: String or Number //.css( propertyName, value ) // 값 //.css( propertyName, function ) // 함수 // Function( Integer index, String value ) ⇒ String or Number //.css( properties ) });
// .html() var h = $('h1').html(); // ⇒ h1 대상 내용을 가져옴 alert(h);
// .html( htmlString Type : htmlString ) $('h1').html("html함수"); // => h1 대상 내용을 덮어서 씀
⇒ 바뀜(내용 덮어쓰기)
// .html( function ) // Type : Function( Integer index, htmlString oldhtml ) ⇒ html $('h1').html(function(index){ // 변수 이름 index라고 해도 되고 i라고 해도 되고 // alert(index); ⇒ 차례로 0, 1, 2 뜸 return index; });
⇒ 바뀜 (index 값 리턴 받았기 때문)
// Type : Function(Integer index, htmlString oldhtml) ⇒ html $('h1').html(function(index, oldhtml){ alert(oldhtml); // h1태그 대상 기존 내용 가져옴 return oldhtml + index; // 기존 값에 추가로 내용 덮어쓰기 });
⇒
인덱스 값 0, 1, 2 붙어서 나옴
body 에 div 태그 추가
// div 태그에 "html함수" 글자 넣기 $('div').html("html함수");
div 태그 내에 글자 생김
// div 태그에 *기존내용* 변경 내용 덮어서 씀 $('div').html(function(index, oldhtml){ return'*' + oldhtml + '*'; });
⇒ 앞 뒤로 * 붙이기
⇒ 나중에 아이디 중복체크할 때 html() 함수 쓸 거!
======== test6.jsp
< .append() : 기존 내용 뒤에 추가하기 >
// 대상.append() 기존태그 뒷부분 추가 $('body').append("<h2>head2</h2>")
$('h1').click(function(){ // 클릭한 대상 내용을 ‘click’으로 변경 $(this).html('click'); });
⇒
클릭했을 경우 이렇게 바뀜
$('h1').bind('click', function(){ alert('클릭'); // 이벤트 한 번만 하고 종료 $(this).unbind();⇒ 이 부분 추가 unbind(); });
한 번 실행하고 종료!
$('h1').click(function(){ // alert('클릭2'); // 클릭한 대상 내용을 'click' 변경 // $(this).html('click'); // 클릭 대상에 기존내용을 가져와서 "+" 추가 $(this).html(function(index, oldhtml){ return oldhtml + '+'; }); });
append 는 뒤에 추가만 되지만, oldhtml 로 추가하는 건 기존내용을 가지고 와서 덮어쓰기 하는 것
클릭하는 만큼 뒤에 ‘+’ 추가됨 ( 앞 쪽에 unbind(); 함수는 주석처리 )
< .mouseover() >
body 에 이미지 추가하기
// img 대상 마우스오버(mouseover()) 시 // 마우스 오버 한 대상 : 속성(attr()) 값 src = '2.jpg' 로 변경 $('img').mouseover(function(){ $(this).attr('src', '../js_jQuery1/2.jpg'); });
⇒
마우스 오버 했을 때 이미지가 바뀜!
// img 대상 마우스아웃(mouseout()) 시 // 마우스아웃 한 대상 : 속성(attr()) 값 src = '1.jpg' 로 변경 $('img').mouseout(function(){ $(this).attr('src', '../js_jQuery1/1.jpg'); });
// id="myform" 대상으로 submit() 이벤트 발생 // 아이디 메시지 출력 alert(아이디value값) .val() // 비밀번호 메시지 출력 alert(비밀번호value값) .val() $('#myform').submit(function(){ alert($('#myid').val()); alert($('#mypass').val()); });
