3.자바스크립트
- 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 2017.03.08
- 테이블 tr, td 등 선택하기 2017.03.03
- 커서치면 아래에 뜨게 하기 2016.08.12
- 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 2016.07.12 1
- .css() 이용하여 버튼 보이지 않도록 하기 2016.07.11
- 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? 2016.07.07
- 자바스크립트 체크박스 전체선택, 전체해제 하고 삭제하기 2016.06.28 6
- jQuery 폼요소 선택하기 (Selecting Form Elements) 2016.05.23 1
- jQuery 요소 선택하기 2016.05.23
- jQuery Attributes(요소의 속성) getter/setter 2016.05.23
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="guideBox"> <p>검색조건<span class="textbtn">[열기]</span></p> <div style="display:none"> <div> <dl> <dd> <select id="a" name="a"> <option value="a1">A1</option> <option value="a2">A2</option> <option value="a3">A3</option> </select> </dd> </dl> </div> </div> </div> | cs |
1 2 3 4 5 6 7 8 9 | $(document).on("click",".guideBox > p",function(){ if($(this).next().css("display")=="none"){ $(this).next().show(); $(this).children("span").text("[닫기]"); }else{ $(this).next().hide(); $(this).children("span").text("[열기]"); } }); | cs |
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 테이블 tr, td 등 선택하기 (0) | 2017.03.03 |
|---|---|
| 커서치면 아래에 뜨게 하기 (0) | 2016.08.12 |
| 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 (1) | 2016.07.12 |
| 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? (0) | 2016.07.07 |
| Ajax (0) | 2016.05.12 |
<원본테이블>
▼위 원본 테이블 그리는 html 소스
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <table summary="연립다세대 실거래가조회 결과입니다." id="rh_table" style="display: none;"> <caption>연립다세대 실거래가조회 목록 안내</caption> <colgroup> <col width='*'> <col width='15%'> <col width='10%'> <col width='12%'> <col width='12%'> <col width='10%'> <col width='15%'> <col width='5%'> <col width='8%'> </colgroup> <thead> <tr> <th scope='col' rowspan='2'>단지</th> <th scope='col' rowspan='2'>법정동</th> <th scope='col' rowspan='2'>지번</th> <th scope='col' rowspan='2'>전용<br/>면적(㎡)</th> <th scope='col' rowspan='2'>대지권<br/>면적(㎡)</th> <th scope='col' colspan='3'><span class="searchYearMonth"><fmt:formatDate value="${dateTime}" pattern="yyyy년 M월"/></span></th> <th scope='col' rowspan='2'>건축<br/>년도</th> </tr> <tr> <th scope='col'>계약일</th> <th scope='col'>거래금액(만원)</th> <th scope='col'>층</th> </tr> </thead> <tbody> <tr> <td colspan='9'>검색결과가 없습니다.</td> </tr> </tbody> </table> | cs |
그런데 표 자체는 그대로 두면서
thead-tr-th 안의 글자를 바꾼다던가
thead-tr-th 추가 또는 삭제를 해서 테이블을 가공하고 싶을 때.
<가공된 테이블>
▼ 위 가공된 테이블처럼 원본테이블을 조작하려면
1 2 3 4 5 | if ("대지권면적(㎡)" == $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").text()) { $("#rh_table > thead > tr:nth-child(2) > th:nth-child(2)").html("보증금<br/>월세"); $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").remove(); } | cs |
thead 가 2줄인데 첫번째 tr에서 다섯번째 th 텍스트가 대지권면적인지?
맞다면 테이블 가공해야하므로 if문 안의 내용을 실행.
아니라면 테이블이 이미 가공된 상태이므로 if문 패스.
if문 안의 내용은
thead에서 두번째 tr을 찾아서 그 tr의 2번째 th를 찾아 거래금액(만원)을 보증금월세로 바꾸고.
대지권면적 th를 제거.
가공된 테이블을 다시 원본테이블로 바꾸려면?
1 2 3 4 5 6 7 8 9 | if ("대지권면적(㎡)" != $("#rh_table > thead > tr:nth-child(1) > th:nth-child(5)").text()) { $("#rh_table > thead > tr:nth-child(1) > th:nth-child(1)").html("법정동"); $("#rh_table > thead > tr:nth-child(1) > th:nth-child(2)").html("지번"); $("#rh_table > thead > tr:nth-child(1) > th:nth-child(3)").html("전용<br/>면적(㎡)"); $("#rh_table > thead > tr:nth-child(1) > th:nth-child(4)").html("대지권<br/>면적(㎡)"); $("#rh_table > thead > tr:nth-child(2) > th:nth-child(2)").html("거래금액(만원)"); $("#rh_table > thead > tr:nth-child(1)").prepend("<th schope='col' rowspan='2'>단지</th>"); } | cs |
thead > 첫번째 tr> 다섯번째 th 의 텍스트가 대지권면적이 아니면 if문 안의 내용을 실행.
append()는 뒤에 붙이는거고, prepend()는 앞에 붙이는건데 prepend() 이걸 쓰는 이유는
rowspan 이 없으면 th 위치를 지정할 수 있을 것 같은데
rowspan 대문에 th 위치 지정해서 th 추가하기가 쉽지 않아서..
th 텍스트를 바꿔주고 제일 앞에 th를 추가해주는 식으로 함.
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 (0) | 2017.03.08 |
|---|---|
| 커서치면 아래에 뜨게 하기 (0) | 2016.08.12 |
| 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 (1) | 2016.07.12 |
| 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? (0) | 2016.07.07 |
| Ajax (0) | 2016.05.12 |
<HTML>
1 2 3 4 5 6 7 8 | <div class="col-sm-10"> <div class="col-sm-12"> <input type="hidden" name="memCode" id="memCode"/> <input type="hidden" name="value-keyword" id="value-keyword"/> <input type="hidden" name="str" id="str"/> <input type="text" class="col-xs-10 col-sm-10" id="memName" name="memName" autocomplete="off" placeholder="회원이름"> </div> </div> | cs |
아래 스크립트는 .keyup(), .keypress(), .autocomplete() 을 활용한 내용.
참고한 사이트:
http://findfun.tistory.com/284
http://blog.naver.com/junhwen/130158515885
http://javafactory.tistory.com/entry/jQueryEventkeydownkeypresskeyup-%ED%82%A4%EB%B3%B4%EB%93%9C-%EC%9D%B4%EB%B2%A4%ED%8A%B8
.keyup()
키보드를 누르고 있다가 뗄 떼 이벤트 발생
누른 키가 뭔지 확인하려면 event 객체 활용
브라우저가 event 객체 정보를 가지고 있으면 jQuery의 .which 속성을 사용해 키보드 키 활인 가능
예) event.which = 13 은 엔터키
실제 텍스트를 잡아내려면 .keyup() 보다는 .keypress()를 사용
영어는 .keypress() 이벤트 사용 가능하지만 한글은 지원하지 않아 .keyup() 사용해야 한다
.keypress()
키보드가 입력 받았을 때 이벤트 발생
키 누름을 감지할 필요가 있을 때
.keydown() 와 비슷하지만 키를 반복적으로 누를 때 다름
키를 계속 누르고 있다면 .keydown() 은 이벤트 한 번 발생, .keypress() 는 문자 찍힐 때마다 이벤트 발생
보조키(shift) 누르면 .keydown() 은 이벤트 발생, .keypress() 는 이벤트 발생하지 않음.
그러나 .keypress() 는 공식적으로 지원하지 않는 함수. 브라우저별, 브라우저 버전별, 플랫폼에 따라 다르게 동잘 할 수 있음.
keydown() - 키보드가 눌러질 때 발생
keypress() - 글자가 입력될 때 발생
keyup() - 키보드가 떼어질 때 발생
<Script>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | $(document).ready(function(){ //회원명 입력시 회원정보 가져오기 $("#memName").keyup(function(){ $("#value-keyword").val($(this).val()); }); $("#memName").keypress(function(e){ if(e.which == 13){ $(this).blur(); }; }); $("#memName").autocomplete({ source: function(request, response){ $.ajax({ url : "getMemMobileInfo.do", type : "post", data : {memName: $("#value-keyword").val()}, success : function(data){ response($.map(data.DataList, function(item){ return{ label: item.STR, value: item.STR, memCode: item.MEM_CODE, memTypeInput: item.MEM_TYPE_INPUT, memType: item.MEM_TYPE, pushYn: item.PUSH_YN, deviceInput: item.DEVICE_INPUT, device: item.DEVICE, deviceId: item.DEVICE_ID }; })) }, error : function(request, status, error){ alert("회원 이름으로 정보를 불러오는 중 오류가 발생하였습니다.") } }); }, position: {my: "right top", at: "right bottom"}, minLENGTH: 2, focus: function(event, ui){ return false; }, select: function(event, ui){ if (ui.item.pushYn == 'N') { alert("푸시알림을 거부한 회원은 선택할 수 없습니다."); return false; } //TBL_MEM_MOBILE_INFO. DEVICE 디바이스구분(A:안드로이드, I:아이폰) //TBL_PUSH_NOTICE. OS_TYPE OS(1:안드로이드, 2:아이폰, 3:전체) if (ui.item.device == 'A') { $("#osType").val("1"); } else if (ui.item.device == 'I' ) { $("#osType").val("2"); }; //TBL_MEM_MST. MEM_TYPE 회원종류(0:일반회원, 1:부동산회원) //TBL_PUSH_NOTICE. MEM_TYPE 회원종류(1:비중개회원, 2:중개회원, 4:분양회원, 7:전체) //5:비중개회원(개별), 6:중개회원(개별) if (ui.item.memType == '0') { $("#memType").val('5'); } else if (ui.item.memType == '1') { $("#memType").val('6'); }; $("#memCode").val(ui.item.memCode); $("#device").val(ui.item.device); $("#osTypeInput").val(ui.item.deviceInput); $("#memTypeInput").val(ui.item.memTypeInput); $("#memName").blur(); }, open: function(e, ui){ $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: function(){ $(this).removeClass("ui-corner-top ui-autocomplete-loading").addClass("ui-corner-all"); } }); }) | cs |
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 (0) | 2017.03.08 |
|---|---|
| 테이블 tr, td 등 선택하기 (0) | 2017.03.03 |
| 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 (1) | 2016.07.12 |
| 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? (0) | 2016.07.07 |
| Ajax (0) | 2016.05.12 |
크롬에선 잘 되던게... 익스플로러에서만 작동하지 않아 콘솔을 보니.
개체가 'includes' 속성이나 메서드를 지원하지 않습니다. 라는 에러가...?
흠...
변수가 object 여서 문젠가 싶어, 문자열로도 테스트를 해봤는데. 어떻게 지지고 볶아도 해결이 되지 않아 검색을 좀 더 해보니...
요구 사항
Microsoft Edge(Edge 브라우저)에서 지원됩니다. 스토어 앱(Windows 10의 Microsoft Edge)에서도 지원됩니다. 버전 정보를 참조하십시오.
Quirks, Internet Explorer 6 표준, Internet Explorer 7 표준, Internet Explorer 8 표준, Internet Explorer 9 표준, Internet Explorer 10 표준, Internet Explorer 11 표준과 같은 문서 모드에서는 지원되지 않습니다. Windows 8.1에서는 지원되지 않습니다.
이건 뭐... 인터넷 익스플로러에서는 거의 안된다는 말과 다름없는.......
ㅎ.........
대체할 방법은 없는가 싶어 구글링.
그리고 스택 오버플로우에는 이미 나같은 사람들을 위한 답변들이ㅋ
참고해서,
.includes() 대신에 .indexOf 로 바꾸니 크롬, 익스플로러 구분없이 잘 된다.
에러가 발생하는 자바스크립트 소스
|
1
2
3
4 |
if (opt.value.includes(search)) {
sel.selectedIndex = j;
break;
} |
cs |
보완한 자바스크립트 소스
|
1
2
3
4 |
if (opt.value.indexOf(search) != -1) {
sel.selectedIndex = j;
break;
} |
cs |
참고
https://msdn.microsoft.com/ko-kr/library/dn858228(v=vs.94).aspx
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 (0) | 2017.03.08 |
|---|---|
| 테이블 tr, td 등 선택하기 (0) | 2017.03.03 |
| 커서치면 아래에 뜨게 하기 (0) | 2016.08.12 |
| 자바스크립트 체크박스의 .attr(), .prop() 차이는 뭘까? (0) | 2016.07.07 |
| Ajax (0) | 2016.05.12 |
<button> 하나만으로는 jQuery의 .show(), .hide(), .css() 메소드가 먹히지 않는다.
<button> 이외에 elements 들도 마찬가지로 먹히지 않았다.
왜지...
jQuery API를 다시 정독해야겠다... 반만 알고 반은 모르니 이런 고생을 사서 하는구나...
때문에, wrapper 역할을 하는 div영역을 버튼 겉에 한번 감싸줬고, (display:none을 기본으로)
스크립트에서는 .css() 를 제어하는 방법으로 소스를 짰다.
제이쿼리 .css() 메소드는.. 문법을 잘 써야 된다.
속성이름과 값 모두 따옴표로 감싸줘야함.
HTML
|
1
2
3 |
<div id="divBtnDelete" style="display: none;">
<button type="button" name="btnDelete" id="btnDelete" onclick="goDelete();">전체삭제</button>
</div> |
cs |
button을 감싸는 div영역. 기본 속성은 보이지 않도록.
Script
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
$(document).ready(function() {
if ($("#wtype").val() == "build_edit") {
//같은 의미(propertyName, value 둘 다 따옴표로 감싸줘야 함)
$("#divBtnDelete").css("display", "inline");
//같은 의미(일반적인 style 작성방법)
$("#divBtnDelete").css({
display: "inline"
});
};
}) |
cs |
필요한 상황에서 div영역의 display 속성을 바꿔 화면에 보이도록 하는 스크립트.
.show(), .hide()를 사용해도 되는데, 깨지는 경향이 있어 .css() 메소드로 display 속성을 제어하도록 했다.
5번처럼 한 줄에 적어도 되고 (속성명과 값 모두 쌍따옴표로 감싸기... 이 미묘한 차이 때문에 됐다 안됐다 골치아프게 됨 ㅠ)
8~10번처럼 나열해서 적어도 된다.
참고 :
https://learn.jquery.com/using-jquery-core/css-styling-dimensions/
버튼 제이쿼리로 disabled 제어하기
1 | $("#btnReqOk").attr("disabled", "disabled"); | cs |
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| jQuery 폼요소 선택하기 (Selecting Form Elements) (1) | 2016.05.23 |
|---|---|
| jQuery 요소 선택하기 (0) | 2016.05.23 |
| jQuery Attributes(요소의 속성) getter/setter (0) | 2016.05.23 |
참고 : http://javascriptandjquerydev.blogspot.kr/2012/07/attr-prop.html
체크박스 제어할 때 늘 attr, prop 차이가 궁금했는데 위 사이트에서 설명이 잘 되어 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
//하나더 예를 들어보겠습니다. 체크박스의 checked의 대하여 입니다.
<checkbox id="private" type="checkbox" checked />
//체크박스의 checked의 값을 확인합니다.
var $checkbox = $('#private');
alert($checkbox.attr('checked')); // checked속성의 값을 표시 → "checked"
alert($checkbox.prop('checked')); // checked프로파티값을 표시 → true
//또 화면의 체크박스를 클릭하여 체크를 해제해보겠습니다.
//•.attr() → "checked"
//•.prop() → false
//.attr()의 경우는 변하지않습니다. 체크가 되어있는지 판단을 할경우 .prop()을 사용할 필요가 있습니다. |
cs |
체크박스를 전체 선택하고 해제하는 스크립트를 쓰려면 .prop()로 true/false 를 제어하자.
'3.자바스크립트 > JavaScript' 카테고리의 다른 글
| 열기, 닫기 클릭 시 div 보였다 안보였다 하게 하기 (0) | 2017.03.08 |
|---|---|
| 테이블 tr, td 등 선택하기 (0) | 2017.03.03 |
| 커서치면 아래에 뜨게 하기 (0) | 2016.08.12 |
| 인터넷 익스플로러에서만 개체가 'includes' 속성이나 메서드를 지원하지 않습니다 에러 발생 (1) | 2016.07.12 |
| Ajax (0) | 2016.05.12 |
HTML
|
1
2
3
4
5
6
7
8
9 |
<thead>
<tr>
<th><input type="checkbox" name="checkAll" id="th_checkAll" onclick="checkAll();"/></th>
</tr>
</thead>
<tbody>
<tr>
<td class="center"><input type="checkbox" name="checkRow" value="${content.IDX}" /></td>
</tbody> |
cs |
thead 에 전체선택/전체해제용 체크박스 'checkAll' 를 만들고 클릭하면 checkAll() 를 타도록 함.
tbody 에는 각 행마다 체크박스 'checkRow' 만들어줌.
JavaScript
|
1
2
3
4
5
6
7
8 |
/* 체크박스 전체선택, 전체해제 */
function checkAll(){
if( $("#th_checkAll").is(':checked') ){
$("input[name=checkRow]").prop("checked", true);
}else{
$("input[name=checkRow]").prop("checked", false);
}
} |
cs |
thead 에 위치한 전체선택/전체해제용 체크박스를 클릭하면 타는 checkAll() 은 .prop() 를 통해 'checkRow' 이름을 가진 모든 체크박스들을 일괄 제어하는 내용이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 |
/* 삭제(체크박스된 것 전부) */
function deleteAction(){
var checkRow = "";
$( "input[name='checkRow']:checked" ).each (function (){
checkRow = checkRow + $(this).val()+"," ;
});
checkRow = checkRow.substring(0,checkRow.lastIndexOf( ",")); //맨끝 콤마 지우기
if(checkRow == ''){
alert("삭제할 대상을 선택하세요.");
return false;
}
console.log("### checkRow => {}"+checkRow);
if(confirm("정보를 삭제 하시겠습니까?")){
//삭제처리 후 다시 불러올 리스트 url
var url = document.location.href;
var page = $("#page").val();
var saleType = $("#saleType").val();
var schtype = $("#schtype").val();
var schval = $("#schval").val();
location.href="${rc.contextPath}/test_proc.do?idx="+checkRow+"&goUrl="+url+"&page="+page+"&saleType="+saleType+"schtype="+schtype+"schval="+schval;
}
} |
cs |
전체선택한 체크박스를 일괄 삭제하기 위해 Spring 프레임워크에 넘길 값을 세팅하는 내용이다.
컨트롤러에는 체크박스 값들을 배열로 넘기거나 하지 않고 문자열들을 콤마로 조합해서 하나의 문자 변수로 보낸다.
예) checkRow = 1, 2, 3, 4
컨트롤러나 서비스단에서 콤마를 구분자로 split 하여 for문 돌려서 쿼리를 돌리는 식으로 처리한다.
Java
|
1
2
3
4
5
6 |
//체크박스로 여러개 삭제하는 기능 추가.
String[] arrIdx = paramMap.get("idx").toString().split(",");
for (int i=0; i<arrIdx.length; i++) {
testMapper.delete(Integer.parseInt(arrIdx[i]));
} |
cs |
split() 을 이용해 콤마를 기준으로 값을 쪼개도록 하고, 그 쪼갠 값들을 배열 arrIdx에 담아 for문을 돌려 일일이 처리 되도록 한다.
jQuery는 폼 요소들을 찾는 것을 도와주기 위해 몇 가지 가상 선택자를 제공한다.
특히 폼요소 각각의 상태 또는 타입을 구분하기가 어려운데, 이것을 도와준다.
<상태로 구분해서 선택하기>
:checked
|
1 |
$( "form :checked" ); |
cs |
:checked 의 타겟은 :checkbox 가 아니라 "선택된" 체크박스(라디오 버튼, select 박스)이다.
(select 박스는 :selected 선택자도 사용 가능)
:disabled
|
1 |
$( "form :disabled" ); |
cs |
어떤 <input> 요소들이던지 disabled 속성을 가지고 있으면 다 타겟으로 한다.
:enabled
|
1 |
$( "form :enabled" ); |
cs |
:input
|
1 |
$( "form :input" ); |
cs |
input, textarea, select, button 요소를 타겟으로 하는 선택자이다.
:selected
|
1 |
$( "form :selected" ); |
cs |
option 요소가 있는 항목이면 타겟으로 한다.
<타입으로 구분해서 선택하기>
:password
:reset
:radio
:text
:submit
:checkbox
:button
:image
:file
http://learn.jquery.com/using-jquery-core/selecting-elements/
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| .css() 이용하여 버튼 보이지 않도록 하기 (0) | 2016.07.11 |
|---|---|
| jQuery 요소 선택하기 (0) | 2016.05.23 |
| jQuery Attributes(요소의 속성) getter/setter (0) | 2016.05.23 |
어떤 요소를 선택하고, 그걸로 어떤 작업을 하는 것이 jQuery의 가장 기본적인 개념이다.
이때, 어떤 요소를 "선택"하는 방법은 아래와 같다.
(jQuery는 대부분의 CSS3 선택자를 지원한다.)
ID로 선택하기
|
1 |
$( "#myId" ); // Note IDs must be unique per page. |
cs |
클래스 이름으로 선택하기
|
1 |
$( ".myClass" ); |
cs |
속성으로 선택하기
|
1 |
$( "input[name='first_name']" ); |
cs |
CSS 선택자로 선택하기
|
1 |
$( "#contents ul.people li" ); |
cs |
콤마 구분자로 선택하기
|
1 |
$( "div.myClass, ul.people" ); |
cs |
가상 선택자
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
$( "a.external:first" );
$( "tr:odd" );
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
// All except the first three divs.
$( "div:gt(2)" );
// All currently animated divs.
$( "div:animated" ); |
cs |
:visible과 :hidden 가상 선택자는 요소의 실제 물리적인 높이나 가로 등의 가시성을 테스트한다.(CSS의 visibility나 display속성이 대상이 아니다.)
선택자가 어떤 요소를 포함했는지 확인하는 가장 좋은 방법은 .length 를 사용하는 것
|
1
2
3
4
5
6
7
8
9 |
// Doesn't work!
if ( $( "div.foo" ) ) {
...
}
// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) {
...
} |
cs |
http://learn.jquery.com/using-jquery-core/selecting-elements/
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| .css() 이용하여 버튼 보이지 않도록 하기 (0) | 2016.07.11 |
|---|---|
| jQuery 폼요소 선택하기 (Selecting Form Elements) (1) | 2016.05.23 |
| jQuery Attributes(요소의 속성) getter/setter (0) | 2016.05.23 |
각 요소의 속성은 유용한 정보를 가지고 있기 때문에, 이것을 가지고 get/set 하는 것은 중요하다.
.attr() 메소드
.attr() 메소드로 getter/setter 작업 둘 다 할 수 있다.
.attr() setter:
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
$( "a" ).attr({
title: "all titles are the same too!",
href: "somethingNew.html"
});
|
cs |
.attr() getter:
|
1 |
$( "a" ).attr( "href" ); // Returns the href for the first a element in the document |
cs |
'3.자바스크립트 > jQuery' 카테고리의 다른 글
| .css() 이용하여 버튼 보이지 않도록 하기 (0) | 2016.07.11 |
|---|---|
| jQuery 폼요소 선택하기 (Selecting Form Elements) (1) | 2016.05.23 |
| jQuery 요소 선택하기 (0) | 2016.05.23 |