HTML/CSS를 마음대로 조작할 수 있는 jQuery 명령
①조작할 HTML 태그를 선택하는 "셀렉터"
②조작하는 내용(명령)
jQuery를 이용한 HTML 혹은 CSS 조작의 기본
$(" ........ ")의 안쪽에 셀렉터를 쓰고 그 뒤에 .(dot)로 명령을 기술하여 작성한다는 기본 약속
$(function(){
$("셀렉터").jQuery의 명령
});
- 텍스트 변경과 가져오기
<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("변경후"); // 텍스트의 변경
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
</body>
<script type="text/javascript">
$(function(){
$("p#first").text("변경후"); // 텍스트의 변경
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
</body>
<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#second").text($("p#first").text()); // 텍스트 가져오기
});
</script>
</head>
<body>
<p id="first">가져온 문자열 </p>
<p id="second"> 변경전</p>
</body>
<script type="text/javascript">
$(function(){
$("p#second").text($("p#first").text()); // 텍스트 가져오기
});
</script>
</head>
<body>
<p id="first">가져온 문자열 </p>
<p id="second"> 변경전</p>
</body>
- HTML 변경과 가져오기
<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>"); //html 변경
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
</body>
<script type="text/javascript">
$(function(){
$("p#first").html("<strong> 변경후</strong>"); //html 변경
});
</script>
</head>
<body>
<p id="first"> 변경전</p>
</body>
<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#second").html($("p#first").html()); //html 가져오기
});
</script>
</head>
<body>
<p id="first"><strong> 변경후</strong></p>
<p id="second"> 변경전</p>
<script type="text/javascript">
$(function(){
$("p#second").html($("p#first").html()); //html 가져오기
});
</script>
</head>
<body>
<p id="first"><strong> 변경후</strong></p>
<p id="second"> 변경전</p>
</body>
- HTML 삽입
<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>"); // 태그안의 텍스트의 앞부분에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
<script type="text/javascript">
$(function(){
$("p#first").prepend("<strong> 앞부분에 삽입</strong>"); // 태그안의 텍스트의 앞부분에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
<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").append("<strong> 뒷부분에 삽입</strong>"); // 태그안의 텍스트의 뒷부분에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
<script type="text/javascript">
$(function(){
$("p#first").append("<strong> 뒷부분에 삽입</strong>"); // 태그안의 텍스트의 뒷부분에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
<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").before("<h1> 태그 앞에 삽입</h1>"); // 태그 전 줄에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
<script type="text/javascript">
$(function(){
$("p#first").before("<h1> 태그 앞에 삽입</h1>"); // 태그 전 줄에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
<script type="text/javascript">
$(function(){
$("p#first").after("<h1> 태그 뒤에 삽입</h1>"); // 태그 뒷 줄에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
$(function(){
$("p#first").after("<h1> 태그 뒤에 삽입</h1>"); // 태그 뒷 줄에 삽입
});
</script>
</head>
<body>
<p id="first"> 텍스트 텍스트</p>
</body>
- HTML 이동
<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").prependTo("p"); // <p> </p> 앞으로 이동, 뒤로 appendTo(), 전 줄로 insertBefore(), 뒷 줄로 insertAfter()
});
</script>
</head>
<body>
<p> 텍스트 텍스트</p>
<strong> 앞으로 이동</strong>
<script type="text/javascript">
$(function(){
$("strong").prependTo("p"); // <p> </p> 앞으로 이동, 뒤로 appendTo(), 전 줄로 insertBefore(), 뒷 줄로 insertAfter()
});
</script>
</head>
<body>
<p> 텍스트 텍스트</p>
<strong> 앞으로 이동</strong>
</body>
- 다른 태그와의 묶음
wrap(지정한 태그 각각을 다른 태그로 감싸기)
wrapAll(복수 태그 전체를 다른 태그로 감싸기)
wrapInner(지정한 태그의 자식 태그를 다른 태그로 감싸기)
- 태그 변경
replaceWith(지정된 태그를 다른 태그로 변경)
- 태그 제거
remove(제거)
- 속성값 변경과 가져오기
attr(속성값 변경,가져오기)
removeAttr(속성 제거)
- class 속성의 추가와 제거
addClass(속성 추가)
removeClass(속성 제거)
- CSS 제거
css(css설정, 값 가져오기)
복수의 명령을 조합하는 "메서드체인"
$("p").preppend("<strong>맨앞에 삽입</strong>");
$("p").append("<strong>맨뒤에 삽입</strong>");
→메서드 체인으로 고쳐서 작성
$("p").preppend("<strong>맨앞에 삽입</strong>").append("<strong>맨뒤에 삽입</strong>");
'프로그래밍 > jQuery' 카테고리의 다른 글
| '이벤트'로 타이밍을 설정하자 (0) | 2012.03.09 |
|---|---|
| jQuery 활용 준비 (0) | 2012.03.08 |
댓글