반응형
jQuery 속성의 조작
[광고 누르면 오늘의 행운 상승!!]
- attr() 메소드
- 선택된 요소의 속성 일거 옴
- 선택된 요소의 속성 설정
- attr() 메소드의 첫 번째 전달인자 : 읽거나 변경할 속성의 이름
var img = $("#coffeeshop_img").attr("title");
- attr()메소드의 두 번째 전달인자 : 속성 설정
var img = $("#coffeeshop_img").attr("title", "coffeSHOP");
-
removeAttr() 메소드 : 속성 제거
→ 사용법 attr() 메소드와 동일 -
addClass() : 요소들의 특정 Class 속성 적용
var img = $("#coffeeshop_img").addClass("illustimg");
- removeClass(): 요소들의 특정 Class 속성 삭제
var img = $("#coffeeshop_img").removeClass("illustimg");
-> id 'coffeeshop_img'인 요소의 'illust' class 삭제
- 사용 예 : 버튼.. 등의 이미지 롤오버, 클릭으로 스타일 변경하는 경우
→ 특정 class 적용/제거 과정 반복
→ jQuery 토글 Class 메소드 제공!
function selection(){
$(".pic_frame").toggleClass("select");
}
//삽입과 삭제 반복!
- CSS 스타일 설정
$(".pic_frame").css("border", "3px solid yellowgreen");
-> Class 값 pic_frame인 요소 보더에 설정
css('name','value')
-> 선택 요소에 특정 스타일 동적으로 적용
- css() 메소드 전달인자 하나 : 설정된 스타일 읽어옴
$("#console").html($("#policeStation_box").css("border"));
-> 정의된 스타일 이외에 읽어 들이지 못함
예) 이미지 넓이
$(".pic_frame").css("width"); -> 결과값 0
이미지가 존재하지만 스타일에 이미지 넓이를 명시적으로 설정하지 않아
읽어들이지 못함
- CSS스타일 설정
- 객체의 넓이와 높이 설정
- width(value) 메소드
- height(value) 메소드 → 명시적으로 높이, 넓이 값이 스타일이나 jQuery를 통해 설정되어야 읽기 가능
$(".pic_frame").width(100);
//id가 pic_frame인 요소를 넓이 100px로 설정
//설정된 넓이 width()메소드를 통해 읽어옴
$("#console").html($("#policeStation_box").width());
//설정된 넓이 width()메소드를 통해 읽어 옴
-> 0 출력
- 해당 요소가 CSS 파일, jQuery를 통해 width값 명시적으로 설정하지
않았기 때문에 결과값 0콘텐츠 조작
- .html() 메소드
- .text() 메소드
console.log($("div").html());
console.log($("div").text());
.html()은 <div> dd </div> 처럼 html요소가 나옴
.text()는 dd 처럼 텍스트만 나옴append()
- 기존 코드 뒤에 코드 추가
<body>
<ol id = "testList">
<li>첫 번째 목록입니다.</li>
<li>두 번째 목록입니다.</li>
<li>세 번째 목록입니다.</li>
</ol>
</body>
-> append() 메소드 추가
$(function(){
$("#testList").append("<li>
네 번째 목록입니다.</li>");
}
appendTo()
- 선택된 요소 타겟 요소의 끝으로 이동
<body>
<ol id = "testList">
<li>첫 번째 목록입니다.</li>
<li>두 번째 목록입니다.</li>
<li>세 번째 목록입니다.</li>
</ol>
<ul id = "subList">
<li>서브 리스트 첫 번째</li>
<li>서브 리스트 두 번째</li>
</ul>
</body>
-> appendTo() 메소드 추가
$("#subList").appendTo($("#testList li : first"));
- id가 subList인 요소들을 id가 testList의 첫번째 li요소 내부의
끝으로 옮기라는 뜻반응형
'5. 웹 프로그래밍 > 4. jQuery' 카테고리의 다른 글
| jQuery 이벤트 [bind/unbind][one][부트스트랩] (0) | 2020.03.19 |
|---|---|
| jQuery의 특징 [jQuery][메소드체이닝][요소접근] (0) | 2020.03.19 |
| JavaScript Library [jQuery][JavaScript Library] (0) | 2020.03.19 |