jQuery 기초 attr() 실습
색상변경을 하기위해 attr() 실습을 해보았습니다.
태그에 있는 class 속성을 변경해서 text/css 선언한 클래스를 이용해 스타일을 변경해 봅니다.
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; }
.div_class { border:1px solid; margin:10px 0; padding:10px; line-height:24px; } /* div_class는 모두 적용하기 */
.span_class { border:1px solid #ddd; } /* span_class는 모두 적용하기 */
.span_textblue { color:blue; } /* 텍스트색상 파란색으로 */
.span_textred { color:red; } /* 텍스트색상 빨간색으로 */
#div1_id { float:left; border-color:red;}
#div2_id { float:left; border-color:blue;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- jQuery 스터디 attr() -->
<div class="box">
<div id="div1_id" class="div_class">
<span id="span1_id" class="span_class span_textblue">첫번째 영역 div 태그의 span 태그 첫번째 입니다.</span><br />
<span id="span2_id" class="span_class">첫번째 영역 div 태그의 span 태그 두번째 입니다.</span><br />
<span id="span3_id" class="span_class">첫번째 영역 div 태그의 span 태그 세번째 입니다.</span><br />
<span id="span4_id" class="span_class">첫번째 영역 div 태그의 span 태그 네번째 입니다.</span><br />
<span id="span5_id" class="span_class">첫번째 영역 div 태그의 span 태그 다섯번째 입니다.</span><br />
<span id="span6_id" class="span_class">첫번째 영역 div 태그의 span 태그 여섯번째 입니다.</span><br />
<span id="span7_id" class="span_class">첫번째 영역 div 태그의 span 태그 일곱번째 입니다.</span><br />
<span id="span8_id" class="span_class">첫번째 영역 div 태그의 span 태그 여덟번째 입니다.</span><br />
<span id="span9_id" class="span_class">첫번째 영역 div 태그의 span 태그 아홉번째 입니다.</span><br />
<span id="span10_id" class="span_class ">첫번째 영역 div 태그의 span 태그 열번째 입니다.</span><br />
</div>
<div id="div2_id" class="div_class">
<span id="span2_1_id" class="span_class span_textblue">두번째 영역 div 태그의 span 태그 첫번째 입니다.</span><br />
<span id="span2_2_id" class="span_class">두번째 영역 div 태그의 span 태그 두번째 입니다.</span><br />
<span id="span2_3_id" class="span_class">두번째 영역 div 태그의 span 태그 세번째 입니다.</span><br />
<span id="span2_4_id" class="span_class">두번째 영역 div 태그의 span 태그 네번째 입니다.</span><br />
<span id="span2_5_id" class="span_class">두번째 영역 div 태그의 span 태그 다섯번째 입니다.</span><br />
<span id="span2_6_id" class="span_class">두번째 영역 div 태그의 span 태그 여섯번째 입니다.</span><br />
<span id="span2_7_id" class="span_class">두번째 영역 div 태그의 span 태그 일곱번째 입니다.</span><br />
<span id="span2_8_id" class="span_class">두번째 영역 div 태그의 span 태그 여덟번째 입니다.</span><br />
<span id="span2_9_id" class="span_class">두번째 영역 div 태그의 span 태그 아홉번째 입니다.</span><br />
<span id="span2_10_id" class="span_class ">두번째 영역 div 태그의 span 태그 열번째 입니다.</span><br />
</div>
</div>
<div class="box">
<button type="button" onclick="btn1();">btn1()</button>
<button type="button" onclick="btn2();">btn2()</button>
<button type="button" onclick="btn3();">btn3()</button>
</div>
<script type="text/javascript">
// 위 기본태그를 이용해 여러가지 jQuery 실습을 합니다.
// attr()
// 각 문단의 맨 마지막 열번째 태그의 텍스트는 빨간색 텍스트로 표시하려고 합니다.
// span_textred 클래스를 적용해서 반영하도록 합니다.
function btn1() {
jQuery("#span10_id, #span2_10_id").attr("class", "span_class span_textred");
}
// 각 문단의 첫 번째 파란색 텍스트는 다시 일반색상으로 돌려 놓습니다.
function btn2() {
jQuery("#span1_id, #span2_1_id").attr("class", "span_class");
}
// 전체문장의 색상을 파란색으로 변경합니다.
function btn3() {
jQuery(".span_class").attr("class", "span_class span_textblue");
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery click() (0) | 2017.12.13 |
|---|---|
| jquery hide() show() (0) | 2017.12.12 |
| jquery append() (0) | 2017.12.11 |
| jquery eq() (0) | 2017.12.09 |
| jquery select() (0) | 2017.12.08 |
댓글