jQuery 제3 과 원소 속성 및 내용 의 코드 수정

1.조작 속성 에 필요 한 요 소 를 어떻게 선별 하 는 지 소개 합 니 다.원 소 를 얻 은 후에 그것 을 조작 해 야 한다.흔히 볼 수 있 는 수 요 는 모든 요소 에 대해 하나의 조작 을 하 는 것 이다.jQuery 가 제공 하 는 함 수 는 each(iterator)입 니 다.그 중에서 iterator 는 하나의 함수 입 니 다.하나의 정 수 를 매개 변수 로 받 아들 여 몇 번 째 요 소 를 표시 합 니 다.간단 한 예 를 보다.
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Operation</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('img').each(function(n) {
this.alt = "This is " + n + "th picture";
});
});
</script>
</head>
<body>
<h1>Image Gallery<br />March 13th,2010</h1>
<img src="img/bee.jpg" alt="" width="150px"/>
<img src="img/bright.jpg" alt="" width="150px"/>
<img src="img/crowd.jpg" alt="" width="150px"/>
<img src="img/pink.jpg" alt="" width="150px"/>
<img src="img/white.jpg" alt="" width="150px"/>
</body>
</html>
결 과 는 Firebug 로 보기:
image
상례 에서 원생 javascript 의 방법 으로 속성 을 액세스 합 니 다.jQuery 는 더욱 일반적인 방법 으로 속성 을 액세스 합 니 다.attr:
attr(name),name 이 문자열 이 라면 첫 번 째 요소 의 속성의 name 값 을 얻 습 니 다.name 이 대상 이 라면 대상 의 속성 은 요소 의 속성 으로 포장 집의 모든 요소 에 복 사 됩 니 다.
attr(name,value)는 name 이 문자열 일 때 속성 name 의 값 을 value 로 설정 하고 value 가 함수 일 때 포장 에 집 중 된 모든 요소 에 이 함 수 를 호출 하여 name 의 값 을 함수 의 반환 값 으로 설정 합 니 다.
간단 한 예 를 들 어 html 코드 는 여전히 위의 것 을 사용 합 니 다.
 
<scripttype="text/javascript">
$(function() {
$('body').children().attr('title', function(n) {
return"This is "+ n + "th element";
});
$('img').attr('alt', 'A photo taken by YinZixin');
alert($('h1').attr('title'));
});
</script>
결 과 는 image 입 니 다. 속성 을 삭제 하려 면 removeAttr(name)방법 을 사용 하 십시오.속성 중 비교적 특수 한 속성 클 라 스 가 있 음 을 주의해 야 합 니 다.class 속성 은 매우 자주 사용 되 는데,그 는 마침 자바 script 의 키워드 이다.class 속성 을 액세스 하려 면 class 대신 className 을 사용 해 야 합 니 다.예 를 들 어$('img').attr('className','photo');class 는 다른 속성 과 달리 하나의 요 소 는 여러 개의 class 를 가 질 수 있 습 니 다.예 를 들 어 class='big strong'은 class 가 특수 하고 자주 사용 되 기 때문에 jQuery 는 class 속성 을 처리 하 는 전문 적 인 방법 이 있 습 니 다.addClass(names),클래스 추가;removeClass(names),클래스 삭제;toggleClass(names),요소 가 이 종류 가 있 으 면 삭제 합 니 다.그렇지 않 으 면 추가 합 니 다.그 중의 names 는 문자열 로 빈 칸 으로 구 분 된 여러 종류의 이름 으로 구 성 될 수 있 습 니 다.addClass 와 removeClass 는 간단 하고 예 를 들 지 않 습 니 다.toggleClass 는 특히 간단 하고 실 용적 입 니 다.다음 예 를 들 어 html 코드 는 위 에 있 는 것 을 사용 합 니 다.
 
<style type="text/css">
.red_border
{
border: solid 2px red;
}
</style>
<script type="text/javascript">
function swap() {
$('img').toggleClass('red_border');
}
$(function() {
$('img').mouseover(swap);
$('img').mouseout(swap);
});
</script>
그 중에서 마지막 두 마디 는 img 등록 이벤트 입 니 다.마우스 가 들 어 가 는 것 과 떠 나 는 사건 은 같 습 니 다.toggleClass 를 사용 하면 현재 클래스 가 존재 하 는 지 여 부 를 자동 으로 판단 하여 서로 다른 조작 을 할 수 있 습 니 다.때때로 우 리 는 특정한 요소 에 특정한 class 를 불 러 올 필요 가 없습니다.css 속성 중의 한 가지 만 바 꾸 면 css 방법 을 사용 할 수 있 습 니 다.css 방법 은 앞의 두 글 에서 이미 사용 되 었 고 더 이상 소개 하지 않 습 니 다.2.DOM 노드 를 조작 하려 면 현재 포장 집합 안의 요소 내부 로 내용 을 이동 해 야 합 니 다.append(content)방법 을 사용 할 수 있 습 니 다.이곳 의 content 는 html 세 션 일 수도 있 고 요소 일 수도 있 으 며 포장 집합 일 수도 있 습 니 다.예 를 들 어
 
<head>
<title>jQuery Operation</title>
<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
<scripttype="text/javascript">
$(function() {
$('td:odd').append($('span'));
$('div:first').append($('p')).append('<span style="color:red;font-size:small">sub title</span>');
});
</script>
</head>
<body>
<div></div>
<table>
<tr><td>1</td><td></td></tr>
<tr><td>2</td><td></td></tr>
</table>
<span>Hello JQuery</span>
<p>Title</p>
</body>
</html>
의 최종 결 과 는 다음 과 같다.image 또 하나의 appendTo(target)는 append 방법의 방향 과 반대로 append 는 호출 자 내부 에 파 라 메 터 를 추가 하고 appendTo 는 호출 자 를 매개 변수 내부 에 추가 합 니 다.그리고 몇 가지 방법 은 append,appendTo 와 유사 합 니 다.prepend,prependto:append 방법 은 목적 요소 내부 에 다른 요소 가 있 을 때 추 가 된 요 소 는 원래 의 요소 의 마지막 이 고 prepend 는 맨 앞 에 있 습 니 다.before,insert Before:내부 after 가 아 닌 목적 요소 앞 에 삽입 합 니 다.insert After:목적 요소 뒤에 삽입 합 니 다.요 소 를 삭제 하려 면 remove 나 empty 방법 을 사용 할 수 있 습 니 다.reove 는 선택 한 요 소 를 페이지 에서 삭제 하고 이 요 소 를 반환 값 으로 되 돌려 줍 니 다.이 요 소 는 쓰레기 에 의 해 수집 되 지 않 고 더 이상 조작 할 수 있 으 며 append 와 같은 방법 으로 페이지 에 다시 표시 할 수 있 으 며 empty 방법 은 요 소 를 철저히 삭제 합 니 다.3.폼 요 소 를 조작 하 는 값 은 폼 요소 의 값 을 자주 사용 하지만 쉽 지 않 습 니 다.jQuery 는 조작 을 간소화 하 는 val 방법 을 제공 했다.인자 가 없 는 val()방법 은 현재 요소 의 값 을 되 돌려 줍 니 다.val(values)방법 은 현재 요소 의 값 을 values 로 설정 하 는 데 사 용 됩 니 다.values 가 배열 이 라면 더욱 재 미 있 습 니 다.selection 요소 의 값 과 일치 합 니 다.values 에 포 함 된 값 은 선택 상태 가 됩 니 다.

좋은 웹페이지 즐겨찾기