두문단을 가지고 select() 실습을 해보았습니다.
버튼3개를가지고 태그를 선택하는것으로
id / class / tag 를 지정하여 선택하기 실습이며 아래의 소스를 이용해서 실행시 버튼의 기능을 확인할 수 있습니다.
<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는 모두 적용하기 */
#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 스터디 select() -->
<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>
<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 실습을 합니다.
// select()
// id로 태그선택하기
function btn1() {
jQuery("#span4_id").text("선택");
}
// id + class로 태그선택하기
function btn2() {
jQuery("#div1_id>.span_class").text("선택");
}
// id + 태그로 선택하기
function btn3() {
jQuery("#div2_id>span").text("선택");
}
</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 attr() (0) | 2017.12.08 |
댓글