Jquery 탐색(Traversing), 관리(Manipulation), 이벤트(Event), jQuery 사이트 이용 팁
jQuery 라이브러리는 최대한 많이 확보하는것이 좋다..
결과화면
소스
<html>
<head>
<title>Traversing</title>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
function Test()
{
//add() 섞일만한 성질이 아니지만 add 라는 객체로 + 해줄수 있다.
//$("li:even").css("color", "red");
$("li:even").add("#title").css("color", "red");
//add를 안했을 경우
//$("li:even").css("color", "red");
//$("#title").css("color", "red");
//eq(n) 아래 2개는 동일한 방법
$("li:eq(2)").css("background-color", "yellow");
$("li:eq(3)").css("background-color", "yellow");
//맨마지막 태그에 첫번째
$("li").eq(-1).css("background-color", "blue");
//eq(0)
$("li").first().css("font-size", "30px");
//eq(-1)
$("li").last().css("color", "white");
//
$("li").parent().css("border", "10px solid green");
}
</script>
</head>
<body>
<!--Ex07_traversing.htm-->
<h3 id="title">국가명</h3>
<ul>
<li>한국</li>
<li>일본</li>
<li>중국</li>
<li>러시아</li>
<li>호주</li>
<li>미국</li>
<li>영국</li>
<li>프랑스</li>
<li>독일</li>
<li>캐나다</li>
</ul>
<hr />
<input type="button" value=" 테스트 " onclick="Test();" />
</body>
</html>
결과화면
소스
<html>
<head>
<title>manipulation</title>
<script type="text/javascript">
function Test()
{
//js
//innerText : 순수한 문자열
//document.getElementById("div1").innerText = "<b>아무게</b>";
//document.getElementById("div1").innerHTML = "<b>아무게</b>";
//innerHTML : 내용중 문법을 이해. 동적으로 구조를 핸들링
var str = "<input type='text' />";
document.getElementById("div1").innerHTML = str;
}
function Test2()
{
//innerText
//alert($("#div1").text());
//$("#div1").text("안녕하세요");
//innerHTML
$("#div1").html("<a href='#'>링크</a>");
}
function Test3()
{
//객체.style.width = "200px";
//$("#div1").width("200px");
//$("#div1").height("200px");
$("#div1").width("200px").height("200px");
}
</script>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<!--Ex08_manipulation.htm-->
<div id="div1" style="border:1px solid black;">
홍길동
</div>
<input type="button" value=" 테스트 " onclick="Test3();" />
</body>
</html>
결과화면
소스
<html>
<head>
<title>이벤트</title>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
//$(document).ready(Init);//onload="Init();" 와 똑같은 행동..
//function Init()
//{
// alert("안녕");
//}
//위와같은 방법을 아래와 같이 사용한다.
//프로그램과 html을 분리하기 위한 방편이다.
$(document).ready(function ()
{
//btn1의 클릭
$("#btn1").dblclick(function ()
{
alert("안녕~");
});
//$("#btn1").bind("click", function ()
//{
// alert("안녕2~");
//});
$("#btn2").click(function ()
{
$("#btn1").show();
});
$("#btn3").click(function ()
{
$("#btn1").hide(); //display:none
});
//speed : 밀리초, "slow - 0.6", "fast - 0.2"
$("#btn4").click(function ()
{
//$("#img1").fadeIn(1000);
$("#img1").fadeIn("slow");
});
$("#btn5").click(function ()
{
//$("#img1").fadeOut(1000);
$("#img1").fadeOut("fast");
});
$("#btn6").click(function ()
{
//중간단계 불투명에서 멈춘다.
$("#img1").fadeTo(1000, 0.3);
});
$("#btn7").click(function ()
{
//중간단계 불투명에서 멈춘다.
$("#img1").slideUp(1000);
});
$("#btn8").click(function ()
{
$("#div1").slideUp(1000);
});
$("#btn9").click(function ()
{
$("#div1").slideDown(1000);
});
$("#btn10").click(function ()
{
$("#div1").slideToggle(1000);
});
$("#btn11").click(function ()
{
//$("#div1").animate(
$("#div1").delay(1000).animate(
{
//WPF에서본거와 비슷하게 애니메이션 형태로 적용..
//width: "300px",
//opacity: 0.3,
//borderWidth: "20px"
width: "toggle",
opacity:"toggle"
}, 1000);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value=" 확인 " />
<hr />
<input type="button" id="btn2" value=" show() " />
<input type="button" id="btn3" value=" hide() " />
<hr />
<img src="images/adore.png" id="img1" /><br />
<input type="button" id="btn4" value=" fadeIn() " />
<input type="button" id="btn5" value=" fadeOut() " />
<input type="button" id="btn6" value=" fadeTo() " />
<input type="button" id="btn7" value=" fadeToggle() " />
<hr />
<div id="div1" style="border:5px solid gray;width:100px;height:100px;">영역</div>
<input type="button" id="btn8" value=" slideUp() " />
<input type="button" id="btn9" value=" slideDown() " />
<input type="button" id="btn10" value=" slideToggle() " />
<input type="button" id="btn11" value=" animate() " />
</body>
</html>
