티스토리 뷰
jQuery 사이트에서 다운받고 Webapp의 script 폴더 안에 넣어두었다.
실행 시 jQuery 경로를 적고 스크립트 구문을 작성한다.
JS보다 쉽게 사용하기 위해 함수형태로 만들어졌다.
JS와 다른 이름 없는 함수, 함수 이름이 생략되어있다.
$(document).ready(function( ){})
자바스크립트의 onload 기능과 같은데 주로 $(function(){}); 로 쓰인다.
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
태그[속성=값] : = 가 하나일 땐 속성과 값이 같은 걸 가리킨다.
태그[속성~=값] : 대상을 조건으로 찾아가게끔 한다.
태그[속성^=값] : 시작값을 포함하고 있는지
태그[속성$=값] : 끝값을 포기하고 있는지
모양을 꾸미는 스타일 시트의 CSS 함수
$('*').함수( ) 에서의 * 은 대상 지정 전체 가리킨다.
id=이름은 #이름, class=이름은 .이름으로 CSS의 선택자와 동일하다.
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('*').css('color','blue');
$('h1').css('color','yellow');
$('h2').css('color','red');
$('#aa1').css('color','orange');
$('.aa2').css('color','purple');
});
</script>
</head>
<body>
<h1>제목1</h1>
<h1 id="aa1">제목2</h1>
<h1 class="aa2">제목2</h1>
<h2>제목3</h2>
본문내용
대괄호는 조건으로,
$('input[type=text]').css( ); 는 타입이 텍스트인 인풋을 찾아 CSS 적용을 시킨 것을 뜻한다.
$('input[type=password]').css( ); 또한, 인풋 타입의 타입이 패스워드인 것
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=text]').css('color','pink');
$('input[type=password]').css('color','gray');
});
</script>
</head>
<body>
<input type="text" name="id" value="kim">
<input type="password" name="pass" value="kim">$('input[type=text]').css( );
html( ), append( )
html( ) 는 대상의 내용을 변경(덮어쓰는) 하는 함수
append( ) 는 대상의 뒷부분에 내용을 추가하는 함수
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div').html('짠');
$('p').append('추가1');
});
</script>
</head>
<body>
<div>내용</div>
<p>추가</p>
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div').html('짠');
$('div').html('짜자잔');
$('p').append('추가1');
$('p').append('추가2');
});
</script>
</head>
<body>
<div>내용</div>
<p>추가</p>
.bind( ), .click( )
이벤트대상.bind( ) 는 이벤트 연결 함수로, 이벤트가 있으면 항상 어떤 기능이 있는지 function( )으로 기술한다.
대상.click( ) 는 클릭한 것으로 기능을 추가하면 수행된다.
h1을 대상으로 이벤트를 연결(bind)해서 'click'했을 때 'h1'의 내용을 변경하겠다!
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('h1').bind('click', function(){
$('h1').html('내용변경');
});
});
</script>
</head>
<body>
<h1>제목1</h1>
<h1>제목2</h1>
<h1>제목3</h1>
클릭하면 한꺼번에 바뀌는데 this를 사용해 클릭하는 것마다 변경되게 할 수 있다!
$('h1').html('내용변경');
=> $(this).html('하나만 변경');
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p').click(function(){
$('p').append("+");
$(this).append("+");
$(this).unbind();
});
});
</script>
</head>
<body>
<h1>제목1</h1>
<h1>제목2</h1>
<h1>제목3</h1>
클릭하면 +가 증가된다. 역시 this로 하나씩 제어할 수 있으며, unbind( ) 사용 시 +가 한번만 출력된다.
$( ).submit(function(){}), $( ).val( )
form 태그를 submit 하면 form 태그 전체가 전송되는 이벤트가 발생한다.
val( ) 함수는 value 값을 가리킨다.
<script type="text/javascript" src="../script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fr').submit(function(){
if($('#id').val()==""){
alert("id 입력하세요");
$('#id').focus();
return false;
}
if($('#pass').val()==""){
alert("pass 입력하세요");
$('#pass').focus();
return false;
}
});
});
</script>
</head>
<body>
<form action="a.jsp" method="post" id="fr">
아이디 : <input type="text" name="id" id="id"><br>
비밀번호 : <input type="password" name="pass" id="pass"><br>
<input type="submit" value="전송">