[KH 정보교육원 당산] 60일차(jQuery

Learn/KH정보교육원

[KH 정보교육원 당산] 60일차(jQuery - 실습3)

Dahoon06 2021. 6. 7. 21:32

728x90

jQuery - HTML 속성을 다루는 함수 attr()

$(document).ready(function() {
		//attr() : html 요소의 속성을 다루는 함수
		//attr('속성명') : 속성값을 추출(get)
		//attr('속성명','속성값') : 해당 요소에 속성을 설정(set)
		//alert($('a').attr('href'));
		
		$('#logo').mouseover(function(){
			$(this).attr('src','icon_home.gif');
		});
		$('#copy').mouseover(function(){
			$(this).attr('src','ico_go_up_s.gif');
		});
		$('#copy').mouseout(function(){
			$(this).attr('src','ico_go_down_s.gif');
		});
	});

HTML

<body>
	<a href="http://www.dotnetkorea.com/">닷넷코리아</a>
	<img id="logo" src="dotnetkorealogo.gif" alt="닷넷코리아로고" />
	<img id="copy" src="icon_copy.gif" />
</body>

attr() 함수를 이용하여 src를 바꿔 이미지를 교체했다.

jQuery - 마우스 오버시 이미지 크게 보기

 <script type="text/javascript">
        $(document).ready(function() {
			// 1. 모든 이미지 태그의 src 속성값을 마우스오버시 추출
			// 2. 해당 이미지파일과 동일한 이름을 가진 images/bigs폴더 내의 이미지를
			//    id="showImage"인 div에 출력
			// 3. 마우스아웃 시, id="showImage"인 div를 보이지 않도록 감춤
			
			$('#product img').mouseover(function(){
				$('#showImage').show(); // 이미지 출력
				
				var imgSrc = "";
				
				imgSrc = $(this).attr('src'); // 마우스오버 이벤트를 발생시킨 요소의 속성값 저장
				imgSrc = "<img src='../image/bigs/"+imgSrc+"' />";
				
				$('#showImage').html(imgSrc); //html == innerHTML 
			});
			
			$('#product img').mouseout(function(){
				$('#showImage').hide();
			});
        });
</script>

HTML

<body>
<div id="product">
	    <img src="ico_go_up_s.gif" />    <!-- ../image/bigs/~~.gif -->
	    <img src="ico_go_down_s.gif" />    
	
	    <div id="showImage" style="border:1px solid red;width:400px;height:400px;">
	     <!-- <img src="../image/bigs/ico_go_down_s.gif" /> -->
	    </div>
	</div>
</body>

jQuery - 맵(컬렉션)으로 다중 속성 지정

<script type="text/javascript">
	$(document).ready(function() {
		//attr() : 다양한 속성을 한번에 적용(맵형태)
		$('#com').attr({
			src:"ico_go_down_s.gif",
			alt:"아래화살표",
			title:"테스트 이미지"
		});
	});
</script>

HTML

<body>
	<img id="com" />
</body>

attr() 함수를 이용하여 다중 속성 적용

jQuery - 속성 제거 removeAttr( )

<script type="text/javascript">
	$(document).ready(function() {
		//속성을 제거 : removeAttr('속성명')
		$('#btnRemove').click(function(){
			$('img:first').removeAttr('src');
		});
	});
</script>

HTML

<body>
	<input type="button" id="btnRemove" value="src삭제" />
	<img src="ico_go_up_s.gif" />
	<img src="ico_go_down_s.gif" />
</body>

src삭제 버튼 클릭시에 첫번째 img태그의 src속성이 제거되었다.

jQuery - 요소만큼 반복 each( )

<script type="text/javascript">
        $(document).ready(function() {
			//each() : for문처럼 반복 하는 함수
			// 요소.each(function(index){ 반복해서 실행할 내용 })
			//요소를 찾을때마다 매개변수(index번호)가 자동으로 증가
			
			//<p> 태그에 구별할 수 있는 id를 부여 : attr()를 사용하여 부여
			$("p").each(function(index){
				$(this).attr({
					"id":"para_"+index		
				});
			});
			//부여된 id값을 이용하여 <p>  값을 </p> 추출 : text()를 사용하여 추출
			$("#btn").click(function(){
				alert($("#para_1").text());
			});
			
        });
</script>

HTML

<body>
	<p>C#</p>
	<p>ASP.NET</p>
	<p>Silverlight</p>
	<input type="button" id="btn" value="동적으로 생성된 id로 개체 접근" />
</body>

인덱스 번호가 1인 자리의 p태그가 경고창에 출력됨

jQuery - 특정 요소의 개수 size( )

<script type="text/javascript">
        $(document).ready(function() {
			//특정 요소의 개수 : size()
			//요소의 태그명(tagName), 속성명, 속성값 추출
			//alert($(":input").size()); 
			
        	var result="";
        	$(":input").each(function(index){
        		result += "태그명 : " +this.tagName + "타입 속성 : " +$(this).attr("type")+"\n";
        	});
        	alert(result);
        });
</script>

HTML

<body>

    <input type="button" value="Input Button" /><br />
    <input type="text" /><br />
    <input type="password" /><br />
    <input type="checkbox" /><br />
    <input type="file" /><br />
    
    <input type="hidden" /><br />
    <input type="image" /><br />
    <input type="radio" /><br />
    <input type="reset" /><br />
    <input type="submit" /><br />
    
   
    <!-- 이 태그들은 내부속성으로는 input태그로 되어있다.그렇기에 :input으로 찾은것!!-->
    <select><option>드롭다운리스트</option></select><br />
    <textarea>멀티라인텍스트박스</textarea><br />
    <button>버튼</button><br />
</body>

input태그가 아닌 select이나 button 등 으로 했으때 속성값이 undefined로 나오지만 기본 틀 자체는 input으로 되어있다.

jQuery - 값 복사

<script type="text/javascript">
	$(document).ready(function() {
		//1.입력부분의 스타일 변경
		$(':text').addClass('silver');
		
		//2.버튼을 클릭했을때 위의 값을 아래쪽에 복사
		$("#btnCopy").click(function(){
			//값을 받을 txtID => 값은 txtUserID의 value값으로
			$('#txtID').val($('#txtUserID').val());
		});
	});
</script>

CSS

.silver {
background-color: Silver;
}

HTML

<body>

	아이디 :
	<input type="text" id="txtUserID" />
	<!-- 입력값 추출 val() -->
	<hr />
	<input type="button" id="btnCopy" value="복사" />
	<hr />
	아이디 :
	<input type="text" id="txtID" />
	<!-- 입력값 설정 val(값) -->
</body>

버튼 클릭시 위의 값이 아래쪽으로 그대로 복사

jQuery - 암호 확인 기능 구현

<script type="text/javascript">
	$(document).ready(function() {
		//1. id="lblError"의 텍스트를 클리어
		$("#txtPassword").keyup(function(){
			$("#lblError").text("");
		});
		
		//2. 확인 기능
		$("#txtPasswordConfirm").keyup(function(){
			if($("#txtPassword").val() != $("#txtPasswordConfirm").val()){
				$("#lblError").text("");
				$("#lblError").html("<b>암호가 틀립니다.</b>");
			} else {
				$("#lblError").text("");
				$("#lblError").html("<b>암호가 맞습니다.</b>");
			}
		});
	});
</script>

HTML

<body>
	<table style="border: 1px solid skyblue;">
		<tr>
			<td>암호 :</td>
			<td><input type="password" id="txtPassword" size="20" /></td>
		</tr>
		<tr>
			<td>암호확인 :</td>
			<td><input type="password" id="txtPasswordConfirm" size="20" /></td>
		</tr>
	</table>

	<div id="lblError">암호를 입력하시오.</div>

</body>

728x90

'Learn > KH정보교육원' 카테고리의 다른 글

[KH정보교육원 당산] Ajax , JSON (0)	2021.06.07
[KH 정보교육원 당산] jQuery - 실습4 (0)	2021.06.07
[KH정보교육원 당산] jQuery - 실습 2 (0)	2021.06.02
[KH정보교육원 당산] 57일차 ( jQuery - 실습 1) (0)	2021.06.02
[KH정보교육원 당산] 55일차(MVC예제 : 게시판 완성) (0)	2021.05.31

현재글[KH 정보교육원 당산] 60일차(jQuery - 실습3)

Dahoon06 Store