어트리뷰트(속성)값을 얻어오기나 어트리뷰트 값을 다른 경로명으로 변경하여 설정
어트리뷰트 : src, title, alt
엘리먼트의 어트리뷰트 값을 가져오고, 설정하기
attr(attributeName), attr(attributeName,value)
$(document).ready(function() { //문서 준비되면
$("img").attr("src", "../images/im0.jpg") //이미지가져와서(img태그 찾아서) 속성 설정해
.attr("title", "똘이군") //마우스 대면 텍스트 뜬당
.attr("alt", "puppy picture"); //사진로딩 실패시 대체텍스트
// $("div").text($("img").attr("alt")); //대체텍스트를 문서내용에 들어가게 설정
});
엘리먼트 집합들을 한 번에 처리하기
attr( { attributeName : value, attributeName : value, .... } )
$(document).ready(function() {
$("img").attr( {
src: "../images/im4.jpg",
title: "을이양", //마우스 대면 뜬당
alt: "cat picture",
width: "130px",
height: "130px"
});
});
엘리먼트의 어트리뷰트 값을 콜백 함수에서 얻어 와서 설정하기
attr( attributeName, function() )
<script type="text/javascript">
$(document).ready(function() {
$("img").attr({width: "100px", //크기 지정
height: "100px"
});
$("img").attr("src", function() { //이미지 주소를 title에서 얻어옴
return "../images/" + this.title;
});
$("img").attr("title", function(index) { //title은 index마다 적용
return index +"번 엘리먼트로 타이틀은 " + this.title + "이다.";
});
});
</script>
</head>
<body>
<center>
<img title="image1.jpg"/>
<img title="image2.jpg"/>
<img title="image3.jpg"/>
</center>
</body>
엘리먼트의 어트리뷰트 값 제거하기
removeAttr(attributeName)
alt : 이미지의 대체 텍스트
click(fn) : 마우스 움직임 시에 이벤트 동작 함수(fn) 호출
next() : 인접한 형제 엘리먼트 한개 찾음
<script type="text/javascript">
$(function(){ //자동실행함수
//함수 이름이 없거나 $연산자가 있을 때 괄호를 만나면 자동실행
$("button").click(function () { //버튼이 클릭되면
$(this).next().removeAttr("src"); //this(=버튼이 클릭되면). 강아지 속성중에 src 지워
});
});
</script>
</head>
<body>
<button> 어트리뷰트 값 제거하기 </button>
<img src="../images/im0.jpg" title="똘이군" alt="puppy picture">
</body>
엘리먼트의 클래스 명으로 스타일 입히기
addClass( function(index, className) ), addClass(className)
*index : 요소의 위치를 반환
*currentClass : 요소의 현재 클래스를 반환
//위에 색깔마다 클래스 만들어둠~
$(function() { //자동실행
$("button").click(function() { //버튼요소가 클릭되면
$("li").addClass(function(index, currentClass) { //li요소에 addClass해라
var addedClass;
if (currentClass === "red") {
addedClass = "green";
$("p").text(index + "번째 항목에 그린 배경색이 생김" );
}
else{
addedClass = "yellow";
}
return addedClass;
});
});
});
엘리먼트로부터 클래스 제거하기
removeClass(className)
$(function () { //자동수행
$("p").addClass("under red"); //p태그 요소 가져와서 클래스(red랑 under)추가해
$("#removeClass").click(function () { //클릭되면
$("p:even").removeClass("red under");//p태그의 짝수번째에 클래스(red랑 under) 제거해
});
$("#changeClass").click(function () {
$("p:odd").removeClass("red under").addClass('highlight');//제거하고 추가(변경)
});
});
엘리먼트에 해당 클래스가 있으면 제거하고, 없으면 추가하기
toggleClass(className)
$(function () {
$("p").click(function () { //p태그를 클릭했을 때
$(this).toggleClass("blue"); //toggel(=한번 누르면 적용되고 또한번 누르면 취소됨)
//클래스가 있으면 제거, 없으면 적용
});
});
엘리먼트에 클래스 존재 여부 확인하기
hasClass(className ) : boolean반환
$(function() {
$("div").click(function () { //클릭했을 때
if($(this).hasClass("toggleStyle")){ //클래스가 적용되어있으면(true면)
$(this).removeClass("toggleStyle"); //지워
}else{ //false면
$(this).addClass("toggleStyle"); //추가해
}
});
});
엘리먼트의 태그 내부의 HTML 콘텐츠 얻어오기
html()
엘리먼트의 태그 내부의 HTML 콘텐츠 변경하기
html(contents)
폼 엘리먼트에서 value 어트리뷰트 값(value) 가져오기
val(), val(텍스트)
<script type="text/javascript">
$(function(){
//이벤트 핸들러 안쪽의 동작 함수는 언제 호출?($function하면 바로 호출되는데, 얘네는 언제?)
//사용자가 이벤트를 일으켰을 때!
$('input').keyup( function(){ //input태그에서 내가 키보드에서 손을 뗄때!(keyup)
var value=$(this).val(); //value를 저장
report(value); //밑에 텍스트 뿌려줌
}).keyup(); //문서가 로드되어 준비상태가 되면 개발자가
//keyup 이벤트를 발생시켜서 핸들러 안쪽의 동작 함수가 일단 한번 실행되도록 한다.
$('button').click(function(){ //버튼을 클릭하면
$('input').val("val 메소드 연습 중"); //input태그의 value에 텍스트 넣고
//개발자가 keyup 이벤트를 발생시켜서
$('input').keyup(); //밑에 텍스트도 똑같이 바꿔줌
});
function report(msg){
$('#console').text(msg);
}
});
</script>
</head>
<body>
<button>reset</button>
<input type="text" value="val 메소드 연습 중" size="80">
<div id="console"></div>
</body>
'프론트' 카테고리의 다른 글
| Ajax (0) | 2022.10.04 |
|---|---|
| JQuery 이벤트, 효과 (0) | 2022.09.05 |
| JQuery 셀렉터, 선택자, 메소드 (0) | 2022.09.05 |
| Javascript 스크립트 작성 방식 (0) | 2022.09.04 |
| JavaScript 문서 객체(DOM) (0) | 2022.09.03 |