jQuery 속성 메서드
1. .attr()
태그의 속성을 가져와서 추가해줄 수 있는 메서드
예제) 아래의 작은 그림에 마우스오버시 위의 큰 그림이 바뀌는 예제
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function setImg(imgSrc) {
$('#bigPic').attr('src', imgSrc);
}
</script>
</head>
<body>
<div>
<img width="300" height="300" src="selMsg.jpg" id="bigPic">
</div>
<img src="product01.jpg" onmouseover="setImg('product01.jpg')">
<img src="product02.jpg" onmouseover="setImg('product02.jpg')">
<img src="product03.jpg" onmouseover="setImg('product03.jpg')">
<img src="product04.jpg" onmouseover="setImg('product04.jpg')">
</body>
</html>
작은 이미지마다 onmouseover시 setImg 함수 호출하며 해당 이미지를 값으로 넣어준다.
setImg 함수에서는 넣어준 이미지들을 imgSrc라는 파라미터로 받아오며,
ID가 #bigPic인 태그의 속성(attr)을 찾아 src에 받아온 파라미터 imgSrc들을 넣어준다.
2. .removeAttr()
태그의 속성을 가져와서 삭제해줄 수 있는 메서드
attr(“attributeName”, ””); 와 같은 방법으로 속성값을 삭제 할 수 있지만, FireBug와 같은 툴을 사용해 확인해보면 값만 빈 값으로 변경된 것이 확인되므로 반드시 removeAttr로 해당 속성의 이름과 값을 모두 삭제한다.
3. .val()
선택한 요소의 값을 가져오는 메서드. 셀렉터 다음으로 가장 많이 사용.
자바스크립트의 document.getElementById(“txtName”).value; 와 동일
예제) input바에 입력한 글자를 alert, default 누르면 초기화
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn1').click(function() { //jquery는 태그에 onclick없이 이렇게 사용한다.
var idValue = $('#id').val(); // val로 입력된 내용 뽑아옴
alert(idValue);
});
$('#btn2').click(function() {
$('#id').val('아이디를 입력하세요');
});
});
</script>
</head>
<body>
<form>
<input type="text" name="id" id="id">
<input type="button" value="ID확인" id="btn1">
<input type="button" value="default" id="btn2">
</form>
</body>
4. .text() / .html()
선택된 개체의 text 또는 html을 가져오거나 사용자가 지정하는 값으로 설정하는 메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var text = $("div").text();
var html = $("div").html();
alert('text를 불러온 예' + text);
alert('html을 불러온 예' + html);
});
</script>
</head>
<body>
<div>text와 html의 차이
<table>
<tr>
<td>#1</td>
<td>#2</td>
<td>#3</td>
<td>#4</td>
<td>#5</td>
</tr>
<tr>
<td>#6</td>
<td>#7</td>
<td>#8</td>
<td>#9</td>
<td>#10</td>
</tr>
<tr>
<td>#11</td>
<td>#12</td>
<td>#13</td>
<td>#14</td>
<td>#15</td>
</tr>
<tr>
<td>#16</td>
<td>#17</td>
<td>#18</td>
<td>#19</td>
<td>#20</td>
</tr>
<tr>
<td>#21</td>
<td>#22</td>
<td>#23</td>
<td>#24</td>
<td>#25</td>
</tr>
</table>
text와 html의 차이
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| 클릭시 이미지와 가격 텍스트가 바뀌는 예제 (0) | 2016.02.22 |
|---|---|
| jQuery Form API, 이벤트 메서드 (0) | 2016.02.19 |
| JQuery 기초, hasClass(), addClass(), removeClass(), toggleClass(), position(), width(), height() (0) | 2016.02.19 |
| JQuery: find(), siblings() (0) | 2016.02.19 |
| JQuery: add(), andSelf(), contents(), end() (0) | 2016.02.19 |
