jquery[basic]
1. jquery - 라이브러리 불러오기
1) 기본구문
- $(document).ready(function() {});
2) 배경색, 글자색
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script>
$(document).ready(function() {
$("h2").css("color","blue");
$("body").css("background-color","pink");
});
</script>
</head>
<body>
<h2> test </h2>
</body>
</html>
3) show, hide
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<!-- 위 경로에 있는 jquery를 가져오겠다. -->
<!--jquery 의 라이브러리를 불러오고, 아래는 실행할 스크립트를 적기 때문에 <script>가 2개가 된다.-->
</head>
<body>
<button>Show it</button>
<img id="dog" src="dog.jpg" alt="" width="500" height="500" style="display: none">
<!--style="display:none "는 화면을 숨긴다.-->
<script>
$(document).ready(function() {
$("button").click(function(){
$("#dog").show("slow"); //클릭되었을 때 보여지는 것
$("button").click(function(){
$("#dog").hide(); //클릭되었을 때 보여지는 것
});
});
});
</script>
</body>
</html>
4) focus, blur
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script>
$(document).ready(function() {
$("input").focus(function(){ //커서가 가있으면?
$(this).css("background-color", "yellow");
$(this).css("color", "blue");
});
$("input").blur(function(){ //커서에서 나오면?
$(this).css("background-color", "skyblue");
$(this).css("color", "yellow");
});
});
</script>
</head>
<body>
아이디 <input type="text" name="name"><br>
</body>
</html>
5) 쿠키와 세션
[1] 쿠키 : 정보를 클라이언트pc의 컴퓨터에 설치되는 작은 기록정보 파일
[2] 세션 : 사용자가 특정 웹사이트에 접속하여 머물러있는 시간, 정보를 서버의 컴퓨터에 설치되는 작은 기록정보 파일
- javascript:alert(document.cookie) : 서버 접속했을 때 접속한 내용보기
6) input 속성
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script>
$(document).ready(function() {
$("input").focus(function(){ //커서가 가있으면?
$(this).css("background-color", "yellow");
$(this).css("color", "blue");
$(this).css("border", "1PX dashed");
});
$("input").blur(function(){ //커서에서 나오면?
$(this).css("background-color", "skyblue");
$(this).css("color", "yellow");
$(this).css("border", "1PX dashed");
});
});
</script>
</head>
<body>
아이디 <input type="text" name="name" size="6"><br>
패스워드 <input type="password" name="pw" size="7"><br>
</body>
</html>
'Web Programming Language > PHP' 카테고리의 다른 글
| 도서관 사이트 (0) | 2018.08.21 |
|---|---|
| PHP 기본상식 (0) | 2018.08.21 |
| class (0) | 2018.08.21 |
| fopen, fput, fclose, fgets (0) | 2018.08.21 |
| call by value, reference (0) | 2018.08.21 |
댓글