attribute selector 기능
객체의 속성값을 가지고 다양한 방법으로 찾기를 하는 기능입니다.
mssql의 like 기능을 생각해볼수 있는데요 예를 들어 "김"씨성을 가진 사람들, 이름에 "이"가 들어가는 사람들, 나이가 21이 아닌 사람들 등등 여러 경우의 수를 찾을 때 이용하는 기능입니다.
사용방법이 다양한데요 한가지 씩 경우에 따라 실습을 해보도록 하겠습니다.
DB에서 like 문을 이용해 혹은 다른 조건들을 이용해서 데이터를 매번 필터해서 호출하지 않고 한번 불러와서 클라이언트에서 데이터를 필터해서 조회하고 이용하는데 유용히 사용할 필요가 있을 것 같습니다.
매번 DB호출해서 서버에 많을 일을 시키지 않도록 하는 것이 중요하다는 의견입니다.
단 다시 호출해서 가져오기 전까지는 잠깐 동안이지만 새로운 데이터는 없는 상태로 이용한다는 점이있구요.
큰 단점은 아닌 것 같습니다.
<head>
<title>제목 없음</title>
<style type="text/css">
.box { clear: both; line-height:30px; }
.div_class { float: left; border: 1px solid; margin: 10px 0; padding: 10px; line-height: 24px; margin:5px; }
.div_class > span { display: block; }
.span_class { border: 1px solid #ddd; }
.span_textblue { color: blue; }
.span_textred { color: red; }
#div1_id { border-color: #dddddd; }
</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">
<p>회원정보</p>
<span kname="김영수" age="21">김영수(21세)</span><span kname="박정훈" age="25">박정훈(25세)</span>
<span kname="이성완" age="27">이성완(27세)</span><span kname="김 지완" age="27">김 지완(27세)</span>
<span kname="김-지민" age="31">김-지민(31세)</span><span kname="이정훈" age="22">이정훈(22세)</span>
<span kname="이영호" age="23">이영호(23세)</span><span kname="박새롬" age="21">박새롬(21세)</span>
<span kname="천지민" age="26">천지민(26세)</span><span kname="이영철" age="29">이영철(29세)</span>
<span kname="김성재" age="30">김성재(30세)</span><span kname="박 지민" age="31">박 지민(31세)</span>
<span kname="서영진" age="25">서영진(25세)</span><span kname="이희재" age="34">이희재(34세)</span>
<span kname="김민수" age="36">김민수(36세)</span>
</div>
<div class="div_class">
회원수 : <span id="span_membercount" class="span_class"></span>
</div>
<div id="div_memlist" class="div_class"></div>
</div>
<div class="box">
<button type="button" onclick="btn1(1);">"김"씨 성을 가진회원</button>
<button type="button" onclick="btn1(2);">"김"씨 성을(접두어) 가진회원</button>
<button type="button" onclick="btn1(3);">"지민"이 들어가는 회원</button><br />
<button type="button" onclick="btn1(4);">"지민"이 들어가는(단어단위) 회원</button>
<button type="button" onclick="btn1(5);">"수"로 끝나는 이름을 가진 회원</button>
<button type="button" onclick="btn1(6);">"이정훈" 이름의 회원</button>
<button type="button" onclick="btn1(7);">21세 제외 한 회원</button>
</div>
<script type="text/javascript">
// jQuery 실습하기!!
function btn1(op) {
var memlist;
jQuery("#div_memlist>span").remove();
jQuery("#span_membercount").text(0);
switch(op) {
case 1: memlist = jQuery("#div1_id").find("span[kname^='김']"); break;
case 2: memlist = jQuery("#div1_id").find("span[kname|='김']"); break;
case 3: memlist = jQuery("#div1_id").find("span[kname*='지민']"); break;
case 4: memlist = jQuery("#div1_id").find("span[kname~='지민']"); break;
case 5: memlist = jQuery("#div1_id").find("span[kname$='수']"); break;
case 6: memlist = jQuery("#div1_id").find("span[kname='이정훈']"); break;
case 7: memlist = jQuery("#div1_id").find("span[age!='21']"); break;
default: memlist = null; break;
}
if(memlist!=null)
{
memlist.each(function(){
jQuery("#div_memlist").append("<span>" + jQuery(this).attr("kname") + "(" + jQuery(this).attr("age") + "세)" + "</span>");
});
jQuery("#span_membercount").text(memlist.length);
}
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery addClass removeClass (0) | 2017.12.22 |
|---|---|
| jquery each() (0) | 2017.12.16 |
| jquery appendTo() (0) | 2017.12.15 |
| jquery closest() (0) | 2017.12.14 |
| jquery click() (0) | 2017.12.13 |
댓글