waitedForU
[05] jQuery 기본 명령어 본문
1. jQuery 명령어
1) 텍스트 변경과 가져오기
- text(...)/text()
>>>> jquery_01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p#first").text("변경후");
$("p#second").text($("p#first").text());
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
<p id="second">변경전</p>
</body>
</html>
2) HTML 변경과 취득
- html(...)/html()
>>>> jquery_02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p#first").html("<strong> 변경후</strong>");
$("p#second").html($("p#first").html());
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
<p id="second"> 변경전</p>
</body>
</html>
3) HTML 삽입
- prepend(...)/append(...) : 태그 안의 맨앞/맨뒤에 HTML을 삽입함
before(...)/after(...) : 태그 앞/뒤에 HTML을 삽입함
>>>> jquery_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML삽입</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p#first").prepend("<strong> 앞부분에 삽입</strong>");
$("p#first").append("<strong> 뒷부분에 삽입</strong>");
$("p#second").before("<h1> 태그 앞에 삽입</h1>");
$("p#second").after("<h1> 태그 뒤에 삽입</h1>");
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
<p id="second"> 텍스트 텍스트</p>
</body>
</html>
4) HTML 이동
- prependTo(...)/appendTo(...) : 다른 태그 안의 맨앞/맨뒤로 이동
insertBefore(...)/insertAfter(...) : 다른 태그의 앞/뒤로 이동
>>>> jquery_04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html이동</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("strong:first").prependTo("p");
$("strong:last").appendTo("p");
$("h1:first").insertBefore("p");
$("h1:last").insertAfter("p");
});
</script>
</head>
<body>
<p> 텍스트 텍스트 </p>
<strong> 앞으로 문자</strong>
<strong> 뒤로 이동</strong>
<h1>태그도 앞으로 이동</h1>
<h1>태그도 뒤로 이동</h1>
</body>
</html>
5) 다른 태그로 묶음
- wrap(...) : 태그를 다른 태그로 묶는다
wrapAll(...) : 태그 전체를 모아서 다른 태그로 묶는다
wrapInner(...) : 자식 태그/텍스트를 다른 태그로 묶는다
>>>> jquery_05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("strong").wrap("<h1></h1>"); //개별
$("div").wrapAll("<h1></h1>");//전체
$("p").wrapInner("<strong></strong>");//내부
});
</script>
</head>
<body>
<strong> 텍스트텍스트111 </strong>
<strong> 텍스트텍스트222 </strong>
<div> 텍스트텍스트111 </div>
<div> 텍스트텍스트222 </div>
<div> 텍스트텍스트333 </div>
<p> 텍스트텍스트 </p>
<p> 텍스트텍스트 </p>
</body>
</html>
6) 태그변경/제거
- replaceWith() : 태그를 다른 태그로 변경
remove() : 태그를 제거
>>>> jquery_06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").replaceWith("<h1> 변경후</h1>");
$("div strong").remove();
});
</script>
</head>
<body>
<p> 변경전 </p>
<div><strong> 제거할 태그</strong> 텍스트텍스트텍스트</div>
</body>
</html>
7) 속성값 변경과 취득
- attr(...,...) : 지정한 속성값 변경
- attr(...) : 지정한 속성값 가져옴
- removeAttr(...) : 지정한 속성값 제거
>>>> jquery_07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a:first").attr("href","http://daum.net/");
$("a:first").text( $("a").attr("href") );
$("a:last").removeAttr("target");
});
</script>
</head>
<body>
<a href="http://naver.com">링크</a>
<a href="http://naver.com/" target="_blank">링크</a>
</body>
</html>
8) class속성 추가/제거
- addClass(...) : class 속성 추가
- removeClass(...) : class 속성 제거
>>>> jquery_08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
.red{
color:red;
}
</style>
<script type="text/javascript">
$(function(){
$("p:first").addClass("red");
$("p:last").removeClass("red");
});
</script>
</head>
<body>
<p> 텍스트 텍스트 텍스트 텍스트</p>
<p class="red"> 텍스트 텍스트 텍스트 텍스트 텍스트</p>
</body>
</html>
9) css 제어
- css(...,...) : 지정한 CSS 속성값 설정
- css(..) : 지정한 CSS 속성값 가져옴
>>>> jquery_09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").css({
backgroundColor : "yellow",
fontWeight : "bold",
color : "red"
});
$("div").text( $("p").css("color") );
});
</script>
</head>
<body>
<p> 텍스트 텍스트 텍스트 텍스트 텍스트 </p>
<div>텍스트</div>
</body>
</html>
'JQuery' 카테고리의 다른 글
| [06] jQuery 이벤트 (0) | 2016.05.20 |
|---|---|
| [04] jQuery 필터 (0) | 2016.05.20 |
| [02] Selector - CSS3 (0) | 2016.05.20 |
| [01] jQuery 설치, Selector - CSS, CSS2 (0) | 2016.05.20 |
Comments