Notice
Recent Posts
Recent Comments
Link
Everything has an expiration date
★ [JQuery] 20231222, 20231226 [프로그램 소스] - JQTest01, JQTest02, JQTest03, JQTest04, JQTest05 본문
[JQuery]/Program source (JQuery)
★ [JQuery] 20231222, 20231226 [프로그램 소스] - JQTest01, JQTest02, JQTest03, JQTest04, JQTest05
Jelly-fish 2023. 12. 27. 09:18
JQueryApp
JQTest01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
/* ↓ jQuery 기본 함수 */
//jquery();
// EL할 때, EL : ${ }, jQuery : $()
$(function()
{
var d = 300;
// ↓ document.getElementById("navigation")
$("#navigation a").each(function()
{
// each() : 각각 어떤 기능을 수행하도록 하는 jQuery 함수
$(this).stop().animate({"marginTop":"-80px"}, d+=150);
});
// navigation 아이디 자식 엘리먼트 li에 마우스를 올리면 기능한다...
// 진입할 때 한번, 나올 때 한번 alert 안내창이 보인다.
$("#navigation > li").hover(function()
{
//alert("관찰");
$("a", $(this)).stop().animate({"marginTop":"-2px"}, 10);
}, function()
{
$("a", $(this)).stop().animate({"marginTop":"-80px"}, 900);
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<ul id="navigation">
<li class="home"><a href="#"><span>Home</span></a></li>
<li class="about"><a href="#"><span>About</span></a></li>
<li class="search"><a href="#"><span>Search</span></a></li>
<li class="podcasts"><a href="#"><span>Podcasts</span></a></li>
<li class="rssfeed"><a href="#"><span>Rss Feed</span></a></li>
<li class="photos"><a href="#"><span>Photos</span></a></li>
<li class="contact"><a href="#"><span>Contact</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
JQTest02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest02.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.item
{
border: 2px solid red;
color: white;
background-color: black;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function test()
{
alert("함수 호출~!!!");
var a = 10;
}
//*************************
// 다 똑같다~
//*************************
//jquery();
//jquery(document).ready();
//$();
//$(document).ready();
//*************************
// 누군가가 호출해야 test() 메소드가 동작하는데...
// <body onload="text()">
// document가 준비 상태일 떄 무언가를 하겠다~!! → function()
/*
$(document).ready(function()
{
// 이 함수 내부가 이 페이지가 요청되었을 때 자동으로 실행하게 되는 곳!!
//alert("함수 호출~!!!");
// ※ 우리가... 또는 이 페이지를 이용하는 사용자가...
// 뭔가 건드리지 않아도...
// (즉, 특별한 이벤트를 발생시키지 않더라도...)
// 자동으로 처리할 수 있는 영역
});
*/
// $(document).ready → $() 로 대체 가능~!!!
$(function()
{
// 이 함수 내부가 이 페이지가 요청되었을 때 자동으로 실행하게 되는 곳!!
//alert("함수 호출~!!!");
// ※ 우리가... 또는 이 페이지를 이용하는 사용자가...
// 뭔가 건드리지 않아도...
// (즉, 특별한 이벤트를 발생시키지 않더라도...)
// 자동으로 처리할 수 있는 영역
//*********************************************************
// 자동으로 수행되도록 구성... JQuery 객체!!
// 이 $() 함수 내부를 자바스크립트가 하나의 객체로 인식
// JQuery도 선택자를 활용한 처리 가능 → CSS와 유사!
/*
$("선택자")
$("#선택자") // Id 선택
$(".선택자") // Class 선택
$("h1") // Element 선택
*/
//*********************************************************
// h1 객체 전부에 해당하는 조건!!
// h1 이 클릭되었을 때 특정 동작을 할 수 있도록 처리
// ↓
//$("h1").click(h1이 클릭되었을 때 수행되어야 할 동작, 기능, 행위);
// ↓
//$("h1").click(h1이 클릭되었을 때 실행되어야 할 함수 정의); // 이름이 필요가 없겠다~!!
// ↓
//$("h1").click(이름이 필요없는 함수 정의);
/*
$("h1").click(function()
{
//alert("클릭되었네요~ ㅎㅎㅎ");
//alert( $(this).html());
//--> 클릭된 h1을 alert 창으로 뜨게 한다면~!!
//$(this).html("어떻게 될까요?");
//--> 클릭한 h1 문자열이 "어떻게 될까요?" 로 변한다!!
$(this).html( $(this).html() + "♥");
})
// body 영역의 h1 태그 하나하나에 추가적인 구문을 작성하지 않더라도
// jQuery 하나만으로 이렇게 간결하게~!! 구성가능~~!! 와~~
*/
// $("h1").on("이벤트", 기능, 동작, 행위);
// $("h1").on("click", 기능, 동작, 행위);
/*
$("h1").on("click", function()
{
//alert("클릭~!!!");
//alert( $(this).html() );
//--==>> 엄재용, 이주형.. 클릭한 h1의 이름이 나온다.
});
*/
/*
// one → 단 한 번만 실행한다.
// h1을 첫 클릭했을 때만 동작...
$("h1").one("click", function()
{
//alert( $(this).html() );
//$(this).html(기능);
$(this).html(function(index, html)
{
//alert(html);
//alert(index);
//--==>> 전부 0이다.
// this에 해당하는 index이므로 모두 0이다.
// (this.html → 사용자가 클릭한 h1!)
return html + "★";
// one 안에 있으므로, ★이 한번밖에 찍히지 않는다.
});
});
*/
// {속성명:속성값, 속성명:속성값, 속성명:속성값, ...}
//$("h1").click();
//$("h1").key...();
//$("h1").mouse();
//$("h1").on({이벤트:기능, 이벤트:기능, ...});
/*
$("h1").on(
{
이벤트:기능, 이벤트:기능, ...
});
*/
/*
$("h1").on(
{
이벤트:function() {}, 이벤트:function() {}
});
*/
/*
$("h1").on(
{
// mouseenter:어찌어찌하겠다 → 마우스 진입 시
// mouseleave:저찌저찌하겠다 → 마우스 이탈 시
mouseenter:function() { $(this).addClass("item"); }
// 『this』 : 특정 h1 객체
// 『addClass』 : 클래스를 추가한다.("item")
, mouseleave:function() { $(this).removeClass("item"); }
// 『this』 : 특정 h1 객체
// 『removeClass』 : 클래스를 제거한다.("item")
// 스타일을 지정해서 변화를 시각적으로 관찰해 보자.
});
*/
// mouseenter, mouseleave (합쳐져 있는 형태의 함수 → hover())
$("h1").hover(function()
{
$(this).addClass("item");
// 빠져나갔을 때와 상관 없이... 한번만 마우스가 진입하면
// 계속해서 스타일 반영됨.
}, function()
{
$(this).removeClass("item");
});
});
</script>
</head>
<body>
<!-- 이름을 눌렀을 때 어떤 처리를 하려고 한다면... -->
<!-- <h1 onclick="">김지민</h1> -->
<h1 onclick="test()">이윤수</h1>
<h1 class="item">임하성</h1>
<h1>김지민</h1>
<h1>엄재용</h1>
<h1>이주형</h1>
<h1>김동민</h1>
<h1>강혜성</h1>
</body>
</html>
01
JQTest03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest03.html</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
div
{
margin: 5px;
padding: 3px;
border: 3px solid black;
border-radius: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//alert("제이쿼리 인식~!!!");
//$("div").click(동작);
$("div").click(function()
{
//alert("테스트");
//alert($(this).html());
//--==>> <h1>E강의실</h1>
// <p>JSP 수업 중</p>
//alert($(this).text());
//--==>> E강의실
// JSP 수업 중
//alert($("h1", this).text());
// div 내부의 h1 태그 텍스트를 출력
//--==>> E강의실
//alert($("p", this).text());
// div 내부의 p 태그 텍스트를 출력
//--==>> JSP 수업 중
var h1 = $("h1", this).text();
var p = $("p", this).text();
alert(h1 + " / " + p);
// var h1에 div의 h1 자식 태그 텍스트를 담고
// var p 에 div의 p 자식 태그 텍스트를 담아서
// 중간에 " / " 문자열을 추가하여 출력한다.
})
});
</script>
</head>
<body>
<div>
<h1>A강의실</h1>
<p>JAVA 수업 중</p>
</div>
<div>
<h1>B강의실</h1>
<p>닷넷 수업 중</p>
</div>
<div>
<h1>C강의실</h1>
<p>오라클 수업 중</p>
</div>
<div>
<h1>D강의실</h1>
<p>ASP 수업 중</p>
</div>
<div>
<h1>E강의실</h1>
<p>JSP 수업 중</p>
</div>
<div>
<h1>F강의실</h1>
<p>제이쿼리 수업 중</p>
</div>
</body>
</html>
JQTest04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest04.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
//$("h1").click(동작);
$("h1").click(function()
{
//$(this).html( $(this).html() + "★" );
$(this).html(function(index, html)
{
return html + "★";
});
});
// ※ 이벤트 강제 발생시키기 : trigger(트리거)
//$("input[type=button]").click(동작);
//--==>> input 엘리먼트 중, type 속성이 button인 것.
$("input[type=button]").click(function()
{
//alert("확인~!!!");
// 강제로 첫 번째 h1 태그에 click 이벤트를 발생시키도록 하겠다.
//$("h1").first().click();
//*****************************************************************
// 『first()』 : document 중에 맨 첫 번째로 작성된 객체를 가리킨다.
//*****************************************************************
// 강제로 마지막 h1 태그에 click 이벤트를 발생시키도록 하겠다.
$("h1").last().click();
//*****************************************************************
// 『last()』 : document 중에 맨 마지막으로 작성된 객체를 가리킨다.
//*****************************************************************
});
});
</script>
</head>
<body>
<input type="button" value="트리거 작동">
<h1>click start1 : </h1>
<h1>click start2 : </h1>
</body>
</html>
01
JQTest05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQTest05.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<style type="text/css">
.outer
{
width: 200px;
height: 200px;
background: orange;
padding: 50px;
margin: 10px;
}
.inner
{
width: 100%;
height: 100%;
background: red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// 키보드 관련 이벤트
//$("textarea").keydown(동작);
//$("textarea").keydown(function() //-- check~!!!
$("textarea").keyup(function() //-- check~!!!
{
//alert("확인");
// 입력 컨트롤(textarea) 에 입력된 값을 경고창을 통해 확인
//alert($(this).html()); //-- html() → Ⅹ
//alert($(this).text()); //-- text() → Ⅹ
//--==>> 내가 입력한 값을 확인할 수 없다. ""
//alert($(this).val()); //-- val() & keyup → ○
//==================================================================
// keydown으로 구성했을 경우, 내가 입력하기 이전의 값을 가져온다.
// 따라서, 입력값을 확인할 때는, keydown이 아니라 ★keyup을 해야한다.
// 키보드 입력 한 사이클이 끝난 다음에 입력 값을 가져와야 한다.
//==================================================================
var len = $(this).val().length;
//alert(len);
//--==>> 글자를 작성할 때마다, 글자수를 경고창을 통해 띄워준다.
var remain = 30 - len;
//alert(remain);
$("h1").html(remain);
// remain 이 0 이 되었을 경우...
// 입력을 막아버리던지... 경고창을 띄우던지...
// 등의 추가적인 액션 처리를 할 수 있다.
if (remain<=10 && remain>=1)
{
$("h1").css("color", "orange");
}
else if (remain<=0)
{
$("h1").css("color", "red").html("더 이상 입력 불가");
$(this).attr("disabled", "disabled");
// 여기서의 『this』 → textarea
}
else
{
$("h1").css("color", "black");
}
});
$("button").click(function()
{
$("textarea").removeAttr("disabled");
$("textarea").focus();
});
// 마우스 관련 이벤트
$(".outer").mouseover(function()
{
//alert("확인~!!!");
$("body").append($("<div>mouseover</div>").css("color", "blue"));
}).mouseenter(function()
{
$("body").append($("<div>mouseenter</div>").css("color", "red"));
});
//==========================================================
// 『mouseover』 : 특정 위치에서 계속 머무르고 있을 때
// 『mouseenter』 : 다른 위치에서 특정 위치로 진입했을 때
//==========================================================
});
</script>
</head>
<body>
키보드 관련 이벤트<br>
1. keydown / 2. keypress / 3. keyup 순으로 이벤트 발생<br>
<div>
<p>남기고 싶은 말</p>
<h1>30</h1>
<textarea rows="5" cols="70"></textarea>
<br>
<button type="button">해제</button>
</div>
<br><br>
마우스 관련 이벤트<br>
mouseenter / mouseleave / mousemove / mouseout / mousover / mouseup 등 <br>
<br><br>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
'[JQuery] > Program source (JQuery)' 카테고리의 다른 글
| [JQuery 개념 복습] (ing...) (2) | 2024.01.01 |
|---|---|
| ★ [JQuery] 20231222, 20231226 [프로그램 소스] - JQTest06, JQTest07, JQTest08, JQTest09, JQTest10, JQTest11 (1) | 2023.12.27 |
'[JQuery]/Program source (JQuery)' Related Articles
more
