jQuery 문장의 연결
작성일 12-09-24 15:13
페이지 정보
작성자서방님 조회 431회 댓글 0건본문
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery_01(문장의 연결)</title>
<script type = "text/javascript" src = 'Script/jquery-1.7.2.js'></script> <%--// 파일링크; 스크립트 내부 사이에 소스 작성 안됨(연결만 사용)--%>
<%-- <script type = "text/javascript" src = 'http://code.jquery.com/jquery-latest.js'></script>// 인터넷 링크(항상 최신버전 사용가능)--%>
<script type = "text/javascript">
//1. toggleClass() -> 속성 지정 하거나 해제
function stripe() {
$("#third").toggleClass("striped"); // $는 jQuery()를 축약한 것이다.
}
//2. p태그의 개수를 반환
function stripe2() {
alert("문장은" + $("p").size() + "개 입니다.");
}
//3. first연결자
function setStyle() {
$("p:first").css("font-style", "italic"); // first는 p태그의 첫번째것 선택
}
//4. show()보이기
function ShowClick() {
$("p:last").show(); // last는 p태그의 마지막것 선택
}
//5. hide()감추기
function HideClick() {
$("p:last").hide();
}
//6.문장바꾸기
function selectElment() {
$("p")[0].innerHTML = "<b>안녕하세요!!<br>"; // script의 특징중 하나인 같은 태그 배열로 받아오는것중 0번째것 받아오기;
}
</script>
<style type = "text/css">
p.striped{background-color:cyan;}
</style>
</head>
<body>
<h1>문장의 연결</h1>
<div>
<p>문장1.</p>
<p>문장2.</p>
<p id = "third">문장3.</p>
<p>문장4.</p>
<p>문장5.</p>
</div>
<form>
<input type = "button" value = "선택" onclick = "stripe()"/>
<input type = "button" value = "문장갯수" onclick = "stripe2()"/>
<input type = "button" value = "문장스타일" onclick = "setStyle()"/>
<input type = "button" value = "보이기" onclick = "ShowClick()"/>
<input type = "button" value = "숨기기" onclick = "HideClick()"/>
<input type = "button" value = "바꾸기" onclick = "selectElment()"/>
</form>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.