jQuery 기초 click() 실습
두개의 박스중 왼쪽 박스에있는 문장을 클릭하면 파란색 텍스트로 변하고
오른쪽 박스에 있는 문장을 클릭하면 빨간색 텍스트로 변하도록 클래스를 적용하도록 하겠습니다.
click() 함수를 이용해 각 문장에 이벤트를 설정하는 방법 입니다.
<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 스터디 -->
<div class="box">
<div id="div1_id" class="div_class">
<span id="span1_id" class="span_class">첫번째 영역 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">두번째 영역 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>
<script type="text/javascript">
// 위 기본태그를 이용해 여러가지 jQuery 실습을 합니다.
jQuery("#div1_id>span").click(function(){
jQuery(this).attr("class", "span_class span_textblue");
});
jQuery("#div2_id>span").click(function(){
jQuery(this).attr("class", "span_class span_textred");
});
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery appendTo() (0) | 2017.12.15 |
|---|---|
| jquery closest() (0) | 2017.12.14 |
| jquery hide() show() (0) | 2017.12.12 |
| jquery append() (0) | 2017.12.11 |
| jquery eq() (0) | 2017.12.09 |
댓글