Download - Jquery를 통한 웹문서의 수정
![Page 1: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/1.jpg)
Jquery 를 통한 웹문서의 수정
![Page 2: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/2.jpg)
1. Text contents
Text() 메서드 가져오기
$(selector).text( )
![Page 3: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/3.jpg)
1. Text contents
Text() 메서드 수정하기
$(selector).text(“ 수정내용” )
![Page 4: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/4.jpg)
1. Text contents
html () 메서드
Text() 메서드 기능 +<html> 태그 가져오기
![Page 5: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/5.jpg)
1. Text contents
실습( 예제 ch11/notice4)
- 텍스트수정과 태그 추가
![Page 6: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/6.jpg)
1. Text contents
val () 메서드- 사용자가 입력한 값이나 선택한
값을 가져오는 메서드$(selector).val( )
![Page 7: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/7.jpg)
2. attr() 메서드
지정한 속성의 값을 가져오거나 수정 가능
![Page 8: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/8.jpg)
2. attr() 메서드
태그의 속성값 가져오기
$(selector).attr(attribute)
![Page 9: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/9.jpg)
2. attr() 메서드
태그의 속성값 수정하기
$(selector).attr(attribute,value)
![Page 10: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/10.jpg)
2. attr() 메서드
태그의 속성값 수정하기
$(“p”).attr(class,italic-text)
![Page 11: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/11.jpg)
2. attr() 메서드
실습( 예제 ch11/intro2)- 링크를 새창으로 열기
![Page 12: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/12.jpg)
3. class() 메서드
• addClass()- 추가
• removeClass()- 제거
• toggleClass()- 옵션 선택
![Page 13: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/13.jpg)
3. class() 메서드
• addClass()
$(selector).addClass(classname)
![Page 14: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/14.jpg)
3. class() 메서드
• removeClass()
$(selector).removeClass(classname)+addClass(classname)* 추가도 함께 가능
![Page 15: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/15.jpg)
3. class() 메서드
• toggleClass()
$(selector).toggleClass(classname)
![Page 16: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/16.jpg)
3. class() 메서드
실습( 예제 ch11/Sources/tog-
gle.html)- 버튼을 활용한 두가지 화면 옵션
![Page 17: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/17.jpg)
4. css() 메서드
• 웹요소의 css 속성값 수정 가능
• 클래스 + 문서스타일 가져오기 및 수정가능
![Page 18: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/18.jpg)
4. css() 메서드
css 의 속성값 가져오기
$(selector).css(property)eg) $(‘h1’).css(‘font-size’)
![Page 19: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/19.jpg)
4. css() 메서드
css 의 속성값 수정하기$(selector).css(property, value)
eg) $(‘#wrapper’).css(‘width’,500px’)
![Page 20: Jquery를 통한 웹문서의 수정](https://reader035.vdocuments.pub/reader035/viewer/2022080211/557e7e22d8b42a4d108b5194/html5/thumbnails/20.jpg)
4. css() 메서드
실습( 예제 ch11/mt-2.html)
- 배경색 , 글자색 전환