본문 바로가기
UI/JavaScript

221021_JavaScript_JQUERY_국비_attribute2

_daily 2022. 10. 21. 14:48

<예시_1>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_1.html/ 엘리먼트의 어트리뷰트 값을 가져오고 설정하기</title>
<style type="text/css">
	img{padding:20px;}	
	div{color:blue; font-size:30pt;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("img").attr("src","../images/im0.jpg")
		/* title  :사진에 커서를 올렸을때 나옴 */				
				.attr("title","강아지사진")
				.attr("alt","lee picture")
		
		/* div의 text속성에 img alt로 변경 */
		$("div").text($("img").attr("alt"))
	});
				
</script>
</head>
<body>
		<img /><img />
		<div><b>어트리뷰트 테스트</b></div>
</body>
</html>

 

↓결과

 

 

<예시_2>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_2.html/ 엘리먼트 집합들을 한번에 처리하기</title>
<style>
	img{padding :20px;}
	div{color:blue; font-size:30pt;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('img').attr(
			{src:"../images/im0.jpg"
					,title : "강아지 사진"
					,alt : "puppy picture"
					,width:"130px"
					,height:"130px"
					/* map방식(key:value) */
			});
		$("div#lee").text($("img").attr("alt"));
	});
</script></head>
<body>
	<img/><img/><img/>
	<div>어트리뷰트 출력</div>
	<div id="lee">어트리뷰트 출력</div>
</body>
</html>

 

↓결과

 

 

<예시_3>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_3.html/ 엘리먼트의 속성값을 콜백함수에서 얻어와서 설정</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('img').attr(
			{
				width:"100pt"
				,height:"100pt",
			});
		$("img").attr("src",function(){
			return "../images/"+this.title;
		});
		
		$('img').attr("title",function(index){
			return index +"번 엘리먼트 타이틀은 "+this.title+"입니다"
		});
	});
</script>
</head>
<body>
	<img title="f_i50.jpg"/>
	<img title="f_i51.jpg"/>
	<img title="f_i52.jpg"/>
</body>
</html>

 

↓결과

이미지 위에 커서를 두면 "n번 엘리먼트 타이틀은 f_i5n.jpg"로 출력됨

 

 

<예시_4>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_4.html/엘리먼트의 속성값 제거</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$(this).prev().removeAttr("src");
			$(this).prev().prev().removeAttr("src");
		});
	});
	/* next():엘리먼트의 형제 엘리먼트 가운데 바로 다음 엘리먼트 반환
	remove():대상이 되는 모든 엘리먼트 제거*/
</script>
</head>
<body>
	<img alt="puppy11 picture"
		src="../images/im0.jpg" title="dog picture">	
	<img alt="puppy22 picture"
		src="../images/im1.jpg" title="dog picture1">
	<button>속성 값 제거</button>	
</body>
</html>

 

↓결과

첫화면 / 속성값 제거 버튼 클릭 시

 

 

<예시_5>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_5.html/ 엘리먼트로부터 클래스 제거하기</title>
<style type="text/css">
	p{margin:4pt; font-size:20pt; font-weight:bolder;}
	.red{color:red;}	
	.under{text-decoration:underline;}
	.highlight{background:yellow;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$("p").addClass("red under");
		
		$("#removeClass").click(function(){
			$("p:even").removeClass("red under");
		})
		
		$('#changeClass').click(function(){
			$('p:odd').removeClass("red under").addClass("highlight");
		});
	});
	
</script>
</head>
<body>
	<button id="removeClass">removeClass</button>
	<button id="changeClass">changeClass</button>
	<p>엘리멘트로부터</p>
	<p>클래스를</p>
	<p>추가하고</p>
	<p>제거하기</p>
	
</body>
</html>

 

↓결과

첫화면 / removeClass, changeClass 버튼 클릭 시

 

 

<예시_6>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_5.html/ 엘리먼트에 해당 클래스가 있으면 제거하고 없으면 추가</title>
<style type="text/css">
	p{ 
		margin:4px; font-size:16pt;
		font-weight:bolder; cursor:pointer;
	}
	.blue{ color:blue; border:3px dotted red; background:#cccc6633;}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$('p').click(function(){
			$(this).toggleClass("blue");
		});
	});
	/* toggleClass():해당 클래스가 이미 적용되어 있으면 제거 없으면 추가 */
</script>
</head>
<body>
<p class="blue">엘리먼트에 적용된 클래스를 </p>
<p>추가하고 제거 반복</p>
</body>
</html>

 

↓결과

문장을 클릭하면 추가되거나 삭제됨

 

 

<예시_7>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_7.html/hasClass Test</title>
<style >
	p, div, button{margin:8pt; font-size:20pt;}
	.red{color:red;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$("div#result1").append($("p:first").hasClass("red").toString());
			$("div#result2").append($("p:last").hasClass("red").toString());
			$("div#result3").append($("p").hasClass("red").toString());
		});
	});
	/* hasClass ():엘리먼트 집합에 매개변수로 지정된 css해당 클래스가 존재하는지 알려줌 */
</script>
</head>
<body>
	<p>찾고자 하는 색상을 빨간색으로 변경하는 클래스가 없는 문장</p>
	<p class="red">찾고자 하는 색상을 빨간색으로 변경하는 클래스가 있는 문장</p>
	
	<button>hasClass</button>
	
	<div id="result1">첫문장은 빨간색으로 변경하는 클래스가 있는가?</div>
	<div id="result2">마지막문장은 빨간색으로 변경하는 클래스?</div>
	<div id="result3">빨간색으로 변경하는 클래스가 있는 문장이 하나라도 있는가?</div>
</body>
</html>

 

↓결과

hasClass버튼 클릭시 밑에 문장 옆에 false, true가 추가됨

 

 

<예시_8>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_8.html/ 엘리먼트에 클래스 존재 여부 확인</title>
<style type="text/css">
	div{width:100pt; height:100pt; border:1px solid #000000;
		cursor:pointer; margin:4pt; float:left;	}
	.toggleStyle {background-color:#44dd5599; color:red;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('div').click(function(){
			if($(this).hasClass("toggleStyle")){
				$(this).removeClass("toggleStyle");
			}else{
				$(this).addClass("toggleStyle");
			}
		});
	});
</script>

</head>
<body>
	<div class="toggleStyle">hasClass()는 선택된 엘리먼트에 해당클래스가</div>
	<div>적용되어 있으면 true 리턴</div>
	<div>적용되어 있지 않으면 false 리턴</div>
</body>
</html>

 

↓결과

 

 

<예시_9>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3+9.html/엘리먼트 태그 내부의 html콘텐츠 얻어오기</title>
<style>
	p{margin:14pt; cursor:pointer;}
	b{text-decoration:underline;}
	button{cursor:pointer;}
	#console{font-size:20pt; color:blue; font-weight:bold;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		var htmlStr;
		$('p').click(function(){
			htmlStr=$(this).text();
			report(htmlStr);
			//$('#console').text(Str);
			//제이쿼리로  바로 출력해도 되지만 
			//함수를 호출함으로써 확장성이 늘어남
		});
	});
	
	/* id가 console인 곳에 msg내용을 text로 뿌림 
	msg, htmlStr같은 역할(자바스크립트에서는 변수설정하지 않음)*/
	function report(msg){
		$('#console').text(msg);
	}
</script>
</head>
<body>
	<p>
		<b>html()은</b> 엘리먼트의 <span id="tag">내용을</span>
	</p>
	<p>
		html형식의 <span id="text">문자열로</span>리턴
	</p>
	<p>
		버튼을 포함한 <button name="okbtn">button</button>문장이다
	</p>
	<div id="console"></div>
</body>
</html>

 

↓결과

문장을 클릭하면 해당하는 문장이 그대로 출력됨

 

 

<예시_10>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_10.html/ 엘리먼트의 태그 내부의 html콘텐츠 변경</title>
<style>
	.red{color:red;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('button').click(function(){
			$('div').html("<span class='red'>엘리먼트의 태그 내부의 "
					+"<b>html 콘텐츠 변경</b></span>");
		});
	});
</script>
</head>
<body>
	<button>클릭</button>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

 

↓결과

첫화면 /&nbsp; 클릭 버튼 클릭 시

 

 

<예시_11>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_11.html/폼 엘리먼트에서 value 어트리뷰트로 값을 가져오고 설정하기</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		//이벤트 핸들러 안쪽의 동작 함수는 사용자가 이벤트를 일으켰을때 호출
		$('input').keyup(function(){
			var value=$(this).val();
			report(value);
		}).keyup();
		//문서가 로드되어 준비상태가 되면 개발자가 
		//keyup 이벤트를 발생시켜 핸들러 안쪽의 동작 함수가 한번 실행되도록 함
		//keyup 이벤트는 키를 눌렀다 뗄때 이벤트를 발생시킴
		//이 이벤트는 포커스를 가질 수 있는 요소에만 발생시킴
		
		$('button').click(function(){
			//개발자가 keyup이벤트를 발생시켜서
			$('input').val("vla 메소드 123");
			$('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>
</html>

 

↓결과

'asdf'입력 시 / reset버튼 클릭 시

 

 

<예시_12>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_12.html/탐색한 엘리먼트들에 기준이 되었던 엘리먼트 추가</title>
<style>
	div{width:60pt; height:60pt; margin:10pt; float:left;}
	/* clear:both는 float의 적용해제 */
	p{clear:both;}
	.redBorder{border:2pt solid red}
	.yellow{background:rgb(255,255,0)}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		$("button").click(function(){
			$('div').addClass('redBorder')
            		.add('p');
					.addClass('yellow')
			/* .add('p')와 동일의미
			$('p').addClass('yellow'); */
		});
	});
</script>
</head>
<body>
	<div></div> <div></div> <div></div>
	<p>redBorder클래스의 적용은 받지 못하고 yellow클래스의 적용받음</p>
	<button>클릭</button>
</body>
</html>

 

↓결과

 

 

<예시_13>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_13.html/셀렉트된 엘리먼트 중에서 조건에 맞는 엘리먼트 얻기</title>
<style>
	div{
		width:60px; height:60px;
		margin:5px; float:left;
		border:2px white solid;
		}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('div').css("background","yellow")
				.not(".middle")
				.css("border-color","red");
	})
	//filter() : 매개변수에 전달된 셀렉터 표현식 혹인 함수에 만족하는 엘리먼트 필터링
	//not(".middle"):div 엘리먼트에 bgclground → yellow를 적용한 후 
	//클래스명이 middle인 것만 제거한 후 border-color=red 적용
</script>
</head>
<body>
	<div id="first"></div>
	<div id="second" class="middle"></div>
	<div id="third" class="middle"></div>
	<div id="fourth" class="middle"></div>
	<div id="fifth" class="middle"></div>
	<div id="sixth"></div>
</body>
</html>

 

↓결과

 

 

<예시_14>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_14.html/ 셀렉트된 엘리먼트 중에서 조건에 맞는 엘리먼트 얻기</title>
<style>
	div{
		width:60px; height:60px;
		margin:5px; float:left;
		border:2px white solid;
	}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('div').css("background","yellow")
				.filter(function(index){
					return index ==1 ||$(this).attr("id")=="fourth";
				})
				.css("border-color","red");
	});
	
</script>
</head>
<body>
	<div id="first"></div>
	<div id="second" class="middle"></div>
	<div id="third" class="middle"></div>
	<div id="fourth" class="middle"></div>
	<div id="fifth" class="middle"></div>
	<div id="sixth"></div>
</body>
</html>

 

↓결과

 

 

<예시_15>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉트 된 엘리먼트들 중 원하는 범위의 엘리먼트만 반환하기</title>
<style>
   div {
   width:60px; height:60px;
   margin:5px; float:left;
   border:2px blue solid;
   }
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
   $(function() {
      $('button').click(function() {
         //셀렉터로 얻어낸 확장 집합 객체가 여러 번 사용될 경우에는 변수에 저장해 둔다.
         var $div = $('div');
         
         //div 엘리먼트 중에서 2이상 3미만, 인덱스가 0부터 시작하기에 세번째 엘리먼트만 반환
         $div.slice(2,3).css('background','yellow');
         
         //end가 생략된 상태에서 begin만 기술하면 begin부터 끝까지
         $div.slice(4).css('background','pink');
      });
   });
</script>
</head>
<body>
   <div></div> <div></div> <div></div> <div></div>
   <div></div> <div></div> <div></div> <div></div>
   <button>노란색 입히기</button>
</body>
</html>

 

↓결과

첫화면 / 버튼 클릭 시

 

 

<예시_16>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_16.html/해당 엘리먼트의 자식 엘리먼트 찾기</title>
<style>
	span{color:blue;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">

$(function(){
		$('button').click(function(){
			$('div').children().css("border-bottom","3px double green");
			$('div').children(".selected").css('color','red');
		});
	});
		//childeren():특정 엘리먼트의 자식 엘리먼트 반환
</script>
</head>
<body>
<button>엘리먼트에 스타일 입히기</button>
	<p>이것은 문장입니다.</p>
	<div>
		<span class="selected">이것은 div의 children span입니다</span>
	</div>
	<p>
		그리고 <span>여기는 또다른 </span>문장입니다.
	</p>
	<div>그리고 마지막으로 
		<span>이곳은 div의 children이고</span>
		이곳은 div 입니다
	</div>
</body>
</html>

 

↓결과

첫화면/ 버튼 클릭 시

 

 

<예시_17>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_17.html/ </title>
<style>
	span{color:blue;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('button').click(function(){
			$('div').contents().remove("span");
		});
	});
	//contents():텍스트노드를 포함한 특정 엘리먼트의 자식 엘리먼트 반환
</script>
</head>
<body>
<button>해당 엘리먼트 내부의 특정 엘리먼트 제거하기</button>
<p>이것은 문장입니다</p>
<div>
	<span class="selected">이곳은 div children의 span입니다</span>
</div>
<p>
	그리고 <span>여기는 또다른 </span>문장입니다.
</p>
<div>그리고 마지막으로 
	<span>이곳은 div의 children이고</span>
	이곳은 div 입니다
</div>
</body>
</html>

 

↓결과

 

 

<예시_18>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq3_18.html/ 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기</title>
<style>
	div, span{
		width:60px; height:60px;
		margin:5px; float:left;
		border:2px red solid;
		background:white;
	}
	.after{background:pink;}
  .selected{border:5px blue solid;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('button').click(function(){
			$('div').next().addClass("after");
		    $("div").next("#fourth").addClass("selected");
		});
	});
	//next():형제 엘리먼트 가운데 바로 다음 엘리먼트 반환	
</script>
</head>
<body>
<p><button>형제 엘리먼트에 스타일 입히기</button></p>

<div id="first">first</div>
<span id="second">
	second
	<div id="child">child</div>
</span>
<div id="third">third</div>
<span id="fourth">fourth</span>
<span id="fifth">fifth</span>
<span id="six">last</span>
</body>
</html>

 

↓결과

첫화면 / 버튼 클릭 시

 

'UI > JavaScript' 카테고리의 다른 글

221025_JavaScript_JQUERY_국비_자바스크립트 객체 및 배열  (0) 2022.10.25
221024_JavaScript_JQUERY_국비_event1  (0) 2022.10.24
221020_JavaScript_JQUERY_국비_selector/ attribute  (0) 2022.10.20
220929_JavaScript_국비_Image Loading/Mouse Event /localStorage/ sessionStorage  (1) 2022.09.29
220928_JavaScript_국비_JSON/Canvas  (0) 2022.09.28

'UI/JavaScript' Related Articles

티스토리툴바