제이쿼리 셀렉터 테스터
html DOM 개체 요소 선택 연습
jQuery Selectors
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
jQuery Selector Tester
https://www.w3schools.com/jquery/trysel.asp
jQuery Selectors
http://codylindley.com/jqueryselectors/
//=====================
//==================================
jQuery : Selectors
https://api.jquery.com/category/selectors/
//==========
- :contains
<div>Malcom John Sinclair</div>
$( "div:contains('John')" ).css( "text-decoration", "underline" );
//=========
- :parent
<table border="1">
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
$( "td:parent" ).fadeTo( 1500, 0.3 );
//==========
- :checked
$( "#log" ).html( $( "input:checked" ).val() + " is checked!" );
//===================
// 편리한 함수
find() : 하위 자식 개체를 선택
closest() : 상위 부모 개체중 가장 가까운 개체를 선택
//=================
//attr과 prop의 차이
참고 https://javascriptandjquerydev.blogspot.com/2012/07/attr-prop.html
attr1 = $(this).attr("checked"); //checked, undefined , //html태그의 내용을 그대로, 변화는 반영안함!!
prop1 = $(this).prop("checked"); // true, false //자바스크립트 내용, 변화를 반영
is1 = $(this).is(":checked"); // true, false
//===================================
//예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
console.log("Click-START");
$("td").find("input[type=checkbox]:checked").each(function(){
obj = $(this);
id = obj.closest("tr").find("td[name=no]").text();
if( obj.prop("checked") == true){
console.log("checked", id);
}else{
console.log("Unchecked", id);
}
});
});
});
</script>
<style>
.choice{
zoom: 2;
color: red;
}
</style>
</head>
<body>
<div class="panel panel-flat">
<div class="table-responsive">
<table class="line1" >
<colgroup>
<col width="10%"> <col width="10%"> <col width="20%"> <col width="20%">
</colgroup>
<thead class="line2">
<tr class="line2">
<th class="line1"><input type="checkbox" class="styled"></th>
<th class="line1">id</th><th class="line2">name1</th> <th class="line2">name2</th>
</tr>
</thead>
<tbody class="line2">
<tr class="line1" value="11">
<td class="line3">
<div class="checker"><span>
<input type="checkbox" class="checkbox1 styled" value="11" checked></div> </span>
</td>
<td class="no1 no2 line2" name="no">11</td>
<td class="line2">name1-11</td>
<td class="line2">name2-11</td>
</tr>
<tr class="line3" value="12">
<td class="line2">
<div class="checker"><span>
<input type="checkbox" class="checkbox1 styled" value="12"></div> </span>
</td>
<td class="no1 no2 line2" name="no">12</td>
<td class="line2">name1-12</td>
<td class="line2">name2-12</td>
</tr>
<tr class="line2" value="13">
<td class="line2">
<div class="checker"><span>
<input type="checkbox" class="checkbox1 styled" value="13"></div> </span>
</td>
<td class="no1 no2 text-center line2" name="no">13</td>
<td class="line2" >name1-13</td>
<td class="line2" >name2-13</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
'Code > JavaScript' 카테고리의 다른 글
| [JavaScript] 템플릿 리터럴 (Template Literal) (0) | 2018.12.30 |
|---|---|
| [JavaScript, jQuery] 객체 요소 추가 삭제 방법 (0) | 2018.12.22 |
| [jQuery] Ajax (0) | 2018.12.14 |
| [JavaScript] Ajax 예제 (0) | 2018.12.14 |
| [JavaScript] jQuery 나라별 언어 국제화 방법 (0) | 2018.11.27 |
