구리

TIL_210607_jQuery 기초2 본문

jQuery

TIL_210607_jQuery 기초2

guriguriguri 2021. 6. 7. 22:05

목차

더보기

attr()
removeAttr('속성명')
text(), html()
val()
each()
암호확인 기능 구현(keyup 이용)
trigger()
unbind()
n번째 요소 가져오기 예시
is(), children()
not()
end()
append() / empty()
insertAfter() / before()
특정 용어에 대해 번호 붙이기 예시
wrap('특정요소')
clone()
replaceWith()
remove()
fadeIn() / fadeOut()
animate() / stop()
버튼을 이용해 메뉴 열고 닫기 예시
동적으로 원격 페이지 로드 예시

 

attr()

html 요소의 속성을 다루는 함수로 사용법은 다음과 같다

attr('속성명') : 속성값을 추출(get)
attr('속성명','속성값') : 해당 요소에 속성을 설정 (set)

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM요소의 attribute 읽어오기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// attr : html 요소의 속성을 다루는 함수
		// attr('속성명') : 속성값을 추출(get)
		// attr('속성명','속성값') : 해당 요소에 속성을 설정 (set)
		
		// 1.get
		alert($('a').attr('href'));
		
		// 2.set 방식
		$('#logo').mouseover(function(){
			$(this).attr('src','icon_home.gif');
		});
	});
</script>

</head>

<body>

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

</body>

</html>

파일 실행시 a 태그의 href 속성값이 alert되는 것을 볼 수 있다
alert 창을 닫으면 처음 화면은 다음과 같다
jQuery 함수(attr)로 인해 로고에 마우스를 올리면 다음과 같은 사진으로 바뀐다

 

 

마우스 오버시 큰 이미지 보여주고 마우스 아웃시 감추기 예제(attr 활용 2)

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>마우스 오버시 큰 이미지 보여주기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

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

			$('#product img').mouseout(function(){
				$('#showImage').hide(); 
			});
        });
    </script>    

</head>

<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>

</html>

실행하면 처음 화면은 다음과 같으며 화살표에 마우스를 올리면 그와 관련된 이미지 파일이 출력될 것이다 
화살표에 마우스를 올리면  <div id="showImage"> 태그가 보여지면서 관련 이미지 파일들이 출력된다

 

 

맵(컬렉션)으로 다중 속성 지정 (attr 함수 활용3)

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>맵(컬렉션)으로 다중 속성 지정</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

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

</head>

<body>

	<img id="com" />

</body>

</html>

위 코드를 보면 attr 함수를 여러 번 사용하여 속성의 값을 지정하는 것이 아닌 MapCollection 형태로 css처럼 여러 속성의 값을 지정할 수 있다

 

 

removeAttr('속성명')

해당 속성을 제거하는 함수 (속성값이 아닌 속성!)

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>특정 속성을 지우기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

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

</head>

<body>

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

</body>

</html>

코드 실행시 첫 화면
src 버튼 누른 후 코드 변화

위 코드 실행시 src 삭제 버튼을 누르면 첫번째 img 태그의 src 속성이 완전히 삭제 되는 것을 볼 수 있다 (속성값이 아닌 속성!!)

 

 

text(), html()

텍스트값  가져오기 및 설정하는 함수

 

두 함수의 차이점

<b>text</b> 태그 입력시

text("<b>first</b>"); => 화면에 <b>first</b>로 출력
html("<b>first</b>");  => 화면에 first로 출력

<b>text</b>인 태그 추출시
$('b').text(); => first
$('b').html(); => <b>first</b>

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>텍스트 값 가져오기 및 설정</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// text() : <b>text</b> 입력시 => <b>text</b> 출력
			// html() : <b>text</b> 입력시 => 화면에선 text 출력
			// ()안에 값이 없을 경우 해당 요소의 값을 추출(get)
			// ()안에 값이 있을 경우 해당 요소의 값을 설정(set)

			// 1. <b>의 텍스트들을 한꺼번에 추출
			var text = $('b').text();
			// alert(text);
			
			$('p:first').text("<b>first</b>");	// <b>first</b>
			$('p:last').html("<b>last</b>");	// last
			
			alert($('p:last').text()); // last
			alert($('p:last').html()); // <b>last</b>
        });
    </script>

</head>

<body>

    <div>
       	 안녕하세요. 
       	 <b>jQuery</b>
       	 <br />
                  반갑습니다. 
       	<b>JavaScript</b>
       	<br />
        <p>또 만나요.</p>
        <p>언제요?</p>
    </div>

</body>

</html>

html().text()의 결과값을 확인하여 차이점을 기억해두자

 

 

val()

요소의 초기값 설정 및 선택값을 추출하는 함수

 

val('설정값') => 초기값을 설정값으로 설정
val() => 어떤 태그의 value값을 추출

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>폼 요소의 값 가져오기 및 설정</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// 텍스트 입력값, 라디오 버튼 / 셀렉트 태그 선택값 추출
			// 각 요소에 초기값 설정 : val(설정값) : value
			// 텍스트 값 설정 : val('설정값')
			$('#txtName').val('테스트용초기값');

			// 라디오 버튼 계열 갑 설정 : val(['설정값']) -> 다중값
			// '설정값' -> 라디오 버튼의 value 값
			$('input:radio').val(['여자']);
			
			// select 에 대한 값 설정 : val(['설정값']) -> 다중값
			// multiple 값을 가지고 있을 경우 여러개 값 설정 가능 : val(['설정값','설정값'])
			// '설정값' -> option 의 value 값
			$('#lstFavorites').val(['제이쿼리','프로토타입']);
			
			// 버튼 클릭시 값들을 추출 :val()
			$('#btnOK').click(function(){
				var msg = "";
				
				msg += $('#txtName').val() + '\n';
				
				msg += $('#input:radio[name=Gender]:checked').val() + '\n';
			
				msg += $('#lstFavorites').val() + '\n';
				
				alert(msg);
			});
        });
    </script>
</head>

<body>

    텍스트박스 : <input type="text" id="txtName" /><br />
    라디오버튼 : 
        <input type="radio" id="optGender1" name="Gender" value="남자"/>남
        <input type="radio" id="optGender2" name="Gender" value="여자"/>여<br />

    드롭다운리스트 : 
        <select id="lstFavorites" multiple="multiple" size="3"> <!-- size 명시하지 않으면 multiple 적용 X -->
            <option value="자바">JavaScript</option>
            <option value="제이쿼리">jQuery</option>
            <option value="프로토타입">Prototype</option>
        </select><br />

    <input type="button" value="확인" id="btnOK" />
       
</body>

</html>

va('설정값')함수로 초기값을 설정하여 코드 실행시 초기값 설정된 값에 표시된 것을 볼 수 있다
선택 후 확인 버튼 클릭스 val() 함수 이용하여 내가 선택한 태그들의 value값이 추출된 것을 알 수 있다

 

each()

JAVA의 for()문과 비슷한 기능을 하는 함수

 

each(), attr() 함수를 이용해 요소만큼 id 속성값 부여 후 선택된 태그의 id 속성값 추출 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>요소만큼 반복해서 속성 설정 및 가져오기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <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>값을 추출 : text()
			$('#btn').click(function() {
				alert($('#para-0').text());
			});
        });
    </script>

</head>

<body>

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

</body>

</html>

 

자바 스크립트의 for() / jQuery의 each() 비교

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>HTML 요소 가져오기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// for()
			var header = $('h3');
			for(var i=0;i<header.length;i++){
				alert($(header[i]).html());
			}
			
			// each()
			$('h3').each(function(index){
				alert($(this).html());
			});
        });
    </script>

</head>

<body>

    <h3><u>제목1</u></h3>
    <h3><b>제목2</b></h3>

</body>

</html>

 

암호확인 기능 구현(keyup 이용)

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>암호확인 기능 구현하기</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 1. id="lblError"의 텍스트 clear
		$('#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>

</head>

<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>

</html>

코드 실행시 처음 화면으로 암호 input 태그에 자판을 누를시 div의 text 내용이 사라진다
암호 입력 후 암호확인란 입력시 암호가 틀립니다 라는 문구가 바로 뜨며 암호 일치시 암호가 일치하다는 문구로 바뀌게 된다

 

trigger()

동적으로 다른 이벤트를 호출 ( 이벤트를  다른 요소에 의해 발생시킴)

해당 함수 사용시 어떤 이벤트가 발생할지에 대해서는 미리 명시해야 한다.

다음 예시를 통해 자세한 설명을 한다.

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적으로 다른 이벤트 호출</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 트리거 : 이벤트를 다른 요소에 의해 발생시킴
		// 3가지 다 같은 의미
		// $('#btn').click(function() {
		//	alert("버튼 클릭");
		// });
		
		/* 
		$('#btn').bind("click",function() {
			alert("버튼 클릭");
		});
		*/
		
		$('#btn').trigger("click");
		// trigger()를 사용시 클릭하지 않아도 alert("버튼 클릭"); 발생
	});
</script>

</head>

<body>

	<div id="my">
		<input type="button" id="btn" value="버튼" class="hover" />
	</div>

</body>

</html>

trigger()로 인해 클릭하지 않아도 코드 실행하면 처음에 alert() 이벤트가 발생함

 

<script>의 첫번째 두번째 예시는 다 같은 의미의 코드로 id=btn인 버튼 클릭시 이벤트 발생하지만 trigger 함수로 인해 클릭하지 않아도 "click"시 발생하는 이벤트가 코드 실행시 바로 발생하게 된다

 

 

unbind()

이벤트 처리기 해제해주는 함수

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 처리기 해제</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
	// unbind() 이벤트 헤제
	$('#btn').bind("click",function(){
		alert("#btn 클릭");
	});
	
	// 위와 같은 표현
	// $('#btn').click(function(){
	//  	alert("#btn 클릭");
	// });
	

	$('#btnUnbind').click(function(){
		$('#btn').unbind("click");
	});
	// id=btnUnbind 인 태그 클릭시 id=btn인 태그 클릭시 이벤트 발생하는 것 해제 시킴!
	// 따라서 클릭해도 이벤트 발생 X
	});
</script>

</head>

<body>

	<div id="my">
		<input type="button" id="btn" value="버튼" class="hover" /> 
		<input type="button" id="btnUnbind" value="이벤트 해제" class="hover" />
	</div>

</body>

</html>

 

코드 실행시 왼쪽처럼 처음 화면이 뜨며 버튼 클릭시 alert() 이벤트가 발생하지만 이벤트 해제 버튼 클릭시 unbind()로 인해 버튼의 alert() 이벤트가 해제되어 버튼을 클릭해도 더이상 이벤트가 발생하지 않는다

 

버튼 클릭시 alert() 함수가 실행되지만 이벤트 해제 버튼 클릭시 버튼 이라는 태그의 이벤트가 해제되면서 (unbind()로 인해) 버튼을 클릭해도

더이상 경고창이 뜨지 않는 것을 볼 수 있다

 

 

 

n번째 요소 가져오기 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>n번째 요소 가져오기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// 특정요소 중 첫번째 : first
			//         마지막 : last
			//         몇번째 : 
				// 1. 선택기 : $('p:eq(2)')
				// 2. 함수    : $('p').eq(2)
			alert($('p:eq(2)').text());
			
			// alert($('p').eq(2).text());
        });

    </script>
</head>

<body>

	<p>C#</p>		<!-- 0번 -->
	<p>ASP.NET</p>	<!-- 1번 -->
	<p><sup>jQuery</sup></p>	<!-- 2번 -->

	<p>jQuery<sup>1</sup></p>  <!-- 3번 -->
	
	<p>jQuery<sub>1</sub></p>  <!-- 4번 -->
</body>

</html>

위 코드를 보면 두번째 <p> 태그의 text(jQuery)를 alert()라는 이벤트를 발생시게 하였다

 

 

 

is()

존재 여부에 대하여 true / false 반환

 

children()

특정 요소의 자식 요소들 가리키는 함수

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>지정된 표현식이 있는지 없는지 검사</title>
    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
			// is() : 존재 여부를 true / false로 반환
			// children() : 특정 요소의 자식 요소들
			
			if($('#myForm').children().is("input[type=submit]")){
				alert("존재");
			}else{
				alert("없음");
			}

        });

    </script>

</head>

<body> 

	<div id="myForm">
	    <input type="checkbox" />
	</div> 

</body> 

</html>

 

해당 코드를 보면 id=myForm인 태그의 자식 태그들 중 type=submit인 input 태그가 있는지의 여부에 대해 if문을 사용하였다

checkbox인 input 태그밖에 없기에 결과는 false며 없다는 경고창이 뜨게 된다

 

 

not()

~~이 아닌 요소를 가리키는 함수

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지정된 표현식을 제외한 집합 가져오기</title>

<style type="text/css">
.Yellow {
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// not() : ~~이 아닌 요소
		$('input').not("input[type=radio]").each(function(index) {
			$(this).addClass("Yellow");
		});
	});
</script>

</head>

<body>

	<div id="myform">
		<input type="text" /> <input type="password" /> 
		<input type="radio" />
	</div>

</body>

</html>

<body>태그의 <input> 태그 중 type=radio가 아닌 태그에 대하여 모든 태그에게 스타일 클래스를 적용하는 예제로 <input text>, <input password> d두개의 태그만 css가 적용된 것을 볼 수 있다

 

end()

방금 실행한 집합 이전으로 되돌리는 함수

 

더보기

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방금 실행한 집합 이전으로 되돌리기</title>

<style type="text/css">
.Yellow {
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		var html = $('div').find('p:last').find('b').end().html();
		
		// end() : 바로 전단계의 코드로 돌아감
		
		// 2 .find('p:last') : <p><b>jQuery</b></p>
		// 3 .find('b') : <b>jQuery</b>
		// 4 .end() : <p><b>jQuery</b></p>
	});
</script>
</head>

<body>

	<div id="myForm">
		<p>
			<b>JavaScript</b>
		</p>
		<p>
			<b>jQuery</b>
		</p>
	</div>

</body>

</html>

 

 

 

 

append() 

동적으로 html 태그를 추가하는 함수

 

empty()

동적으로 html의 특정 요소 내부를 초기화하는 함수

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 요소 생성 후 원하는 요소에 추가</title>

<style type="text/css">
.Yellow {
	background-color: Yellow
}

.Green {
	background-color: Green
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// append() : 동적으로 html 태그를 추가하는 함수
		// empty() : 동적으로 html의 특정 요소 내부를 초기화하는 함수
		$('#lblDisplay').empty();
		
		var strHtml = $("<a href='#'>네이버</a><hr />");
		$('#lblDisplay').append(strHtml);
		
		$('#btnCreate').click(function() {
			var row = $('#row').val();
			var col = $('#col').val();
			var strTable = "<table border='1'>";
			for(var i=0;i<row;i++){
				strTable += "<tr>";
				for(var j=0;j<col;j++){
					strTable += "<td>" + (i+1) + "행," + (j+1) + "열 </td>";
				}
				strTable += "</tr>";
			}
			strTable += "</table>";
			
			$('#lblTable').append(strTable);
		});
	});
</script>

</head>

<body>

	<!--동적으로 태그 추가 -->
	<span id="lblDisplay"><b>여기에 태그 추가</b></span>

	<!--동적으로 테이블 추가 -->
	<input type="text" id="row" />행
	<input type="text" id="col" />열
	<input type="button" id="btnCreate" value="테이블 동적 생성" />

	<div id="lblTable"></div>

</body>

</html>

해당 코드를 살펴보면 id=lblDisplay인 태그의 내부를 (내부이니까 <b>여기에 태그 추가</b>) 초기화 시킨 후 append() 함수를 사용하여

<a href='#'>네이버</a><hr /> 코드를 내부에 추가하였다.

테이블 동적 생성 버튼 클릭시 입력한 행,열의 개수를 바탕으로 append()를 이용해 table 생성 코드를 <div id="lblTable"></div> 내부에 추가시켜 사진과 같은 결과를 얻게 된다

 

 

 

특정 요소.insertAfter("어느 요소 뒤에")

어떠한 요소 뒤에 특정 요소를 추가하고 싶을 때 사용하는 함수

 

특정 요소 앞에 .before('어떤 요소')

특정 요소 앞에 어떤 요소를 추가하고 싶을 때 사용하는 함수

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM 요소의 앞/뒤에 요소추가</title>

<style type="text/css">
.Chapter {
	background-color: Silver;
}

.Content {
	height: 100px;
	border: 1px solid red;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 어떤 요소를  .insertAfter('어느 요소 뒤에') 
		// 어느 요소 앞에 .before('어떤 요소를')
		
		$('<hr />').insertAfter(".Content");
		$('p.Chapter:gt(0)').before("<a href='#'>TOP</a>");
	});
</script>

</head>

<body>

	<p class="Chapter">1 장</p>
	<div class="Content">내용1...</div>

	<p class="Chapter">2 장</p>
	<div class="Content">내용2...</div>

	<p class="Chapter">3 장</p>
	<div class="Content">내용3...</div>

</body>

</html>

위 코드를 보면 class=Content인 태그 뒤에 <hr /> 태그를 삽입하고 index가 0보다 크고, class=Chapter인 <p>태그에 대하여 <a>태그를 먼저 삽입한다고 되어 있으므로 내용 div 뒤로는 구분선이 있고 2장부터(p 태그 index 1) 먼저 TOP이라는 <a>태그가 오게 되는 것이다

 

특정 용어에 대해 번호 붙이기 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>특정 용어에 대해서 번호 붙이기</title>

<style type="text/css">
.Chapter {
	background-color: Silver;
}

.Content {
	height: 100px;
	border: 1px solid red;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('.term').not(":odd").css("background-Color", "Yellow")
		.end()
		.not(":even").css("background-Color", "LightBlue");
		
		$('.term').each(function(idx) {
			$(this).append("<sub>" + (idx+1)+"</sub>");
			// <sub> : 아래 첨자
			// <sup> : 위첨자
		});
	});
</script>

</head>

<body>

	<h3>jQuery is a new kind of JavaScript Library</h3>
	<div>
		<span class="term">jQuery</span> is a fast and concise 
		<span class="term">JavaScript</span> Library that simplifies 
		<span class="term">HTML</span> document traversing, event handling,
		animating, and <span class="term">Ajax</span> interactions for rapid
		web development. jQuery is designed to change the way that you write
		JavaScript.
	</div>

</body>

</html>

each(), append() 함수를 이용해 span 태그 중 class=term인 요소들의 텍스트에 <sub> 태그를 이용해 아래 첨자를 사용하였다

위 첨자를 사용하고 싶다면 <sup> 태그를 사용하면 된다

 

 

 

wrap('특정요소')

어떤 요소를 특정 요소로 감싸주는 함수

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>검색된 요소를 특정 태그로 감싸기(wrap)</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('h3').wrap("<u></u>");
		
		$('<ol type="1" id="community"> </ol>').insertAfter('a:eq(0)');
		
		$('a').each(function(idx) {
			$(this).appendTo("#community").wrap('<li></li>');
		});
	});
</script>

</head>

<body>

	<h3>.NET 기술 관련 커뮤니티</h3>
	<a href="http://www.asp.net/">ASP.NET</a>
	<a href="http://www.silverlight.net/">Silverlight</a>
	<a href="http://www.windowsclient.net/">WPF</a>
	<a href="http://www.dotnetkorea.com/">.NET All(?)</a>

</body>

</html>

 

 

 

clone('특정요소')

요소를 복제만 하는 함수로 복제만 하기에 어디에 사용할 것인지 따로 명시

(구조는 같은데 이밎만 바꾸거나 할 떄 사용)

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>검색된 요소를 복사하기</title>

<style type="text/css">
#menu {
	background-color: Blue;
	color: White;
}

#submenu {
	background-color: Silver;
}

#content {
	height: 100px;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 특정 요소.clone() 요소를 복제만 하는 함수
		// 같은 구조를 가졌는데 이미지만 바꿔줄 때 등..에서 사용
		// 복제만 하기에 어디에 사용할 것인지를 따로 명시
		
		$('#menu').clone().insertAfter('#submenu');
	});
</script>

</head>

<body>
	<div id="menu">HOME About</div>

	<div id="content">상단 메뉴를 아래 하단메뉴에 복사</div>

	<div id="submenu">여기는 하단메뉴 들어오는 곳</div>

</body>

</html>

 

 

a요소.replaceWith('b요소')

a 요소를 b 요소로 변경해주는 함수

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>검색된 요소를 변경하기</title>

<style type="text/css">
button {
	display: block;
	margin: 3px;
	color: Red;
	width: 200px;
}

div {
	color: Red;
	border: 2px solid blue;
	width: 200px;
	margin: 3px;
	text-align: center;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// a 요소.replaceWith('b요소') : a요소를 b요소롤 변경
		$('button').click(function() {
			$(this).replaceWith("<div>" + $(this).text() + "</div>");
		})
		
	});
</script>

</head>

<body>

	<button>First</button>
	<button>Second</button>
	<button>Third</button>

</body>

</html>

버튼 클릭시 replaceWith()함수로 인해 button 태그가 div 태그로 변경하게 되면서 모양이 바뀌는 것을 볼 수 있다.

 

 

a요소.remove()

a 요소가 삭제(제거)되는 함수로 내부를 초기화해주는 empty()와는 의미가 다르니 헷갈리지 않도록 한다

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>검색된 요소를 완전 제거</title>

<style type="text/css">
div {
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// 제거할 요소.remove() : 실제 요소가 삭제(제거)
		// 요소.empty() : 요소 내부를 초기화
		$('#btnEmpty').click(function() {
			$('div').empty();
			$('div').append("<b>test</b>");
		});
		
		$('#btnRemove').click(function() {
			$('div').remove();
			$('div').append("<b>test</b>");
			// div 태그가 제거되었기에 append 적용 불가 !!
		});
		
	});
</script>

</head>

<body>

	<div>
		<p>jQuery</p>
		<p>Ajax</p>
	</div>

	<input type="button" id="btnEmpty" value="위 영역 비우기" />
	<input type="button" id="btnRemove" value="위 영역 삭제" />

</body>

</html>

코드 실행시 처음 화면
위 영역 비우기 클릭시 empty() 함수 적용으로 내부가 초기화된 후 다른 글씨로 채워졌다
위 영역 삭제 버튼 클릭시 remove() 함수로 인해 div 태그가 완전히 삭제된다

 

fadeIn() / fadOut()

서서히 나타나거나 사라지는 효과를 주는 함수로 괄호안의 시간을 명시하여 시간동안 효과가 발생하게 된다

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서서히 보이기 및 숨기기</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}

div {
	background-color: Silver;
	height: 100px;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// fadeIn() : 투명도(alpha) => 서서히 나타나는 효과
		// fadeOut() : 투명도(alpha) => 서서히 사라나는 효과
		
		$('#btn').click(function() {
			$('#first').fadeIn(3000); // 3초 동안			
			$('#second').fadeOut(3000);			
		});
	});
</script>

</head>

<body>

	<input type="button" id="btn" value="페이드 효과 주기" />
	<div id="first" style="display: none; background-color: Yellow;">
		첫번째 영역
	</div>

	<div id="second">또 만나요</div>

</body>

</html>

처음 화면에서 버튼 클릭시 first div가 서서히 생기면서 second div가 서서히 사라지는 것을 볼 수 있다

이를 응용하여 slideUp() 함수를 더하면 웹사이트에서 메뉴 클릭시 보였다 사라지는 효과를 만들어낼 수 있다

 

fade, slideUp() 효과 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>슬라이드업</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			$('#first').fadeIn('slow').slideUp('slow');
		});
	});
</script>

</head>

<body>

	<input type="button" id="btn" value="슬라이드 업" />

	<div id="first" style="display: none; background-color: Yellow; height: 100px;">
		첫번째 영역
	</div>

	<div id="second">두번째 영역</div>

</body>

</html>

 

 

 

animate()

여러 가지 효과를 동시에 적용할 때 맵 형태로 값 설정하는 함수

 

문법

적용대상.animate({ }, 시간)

stop()

animate() 함수를 일시 정지

 

animate() 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>여러가지 효과 동시 처리</title>

<style type="text/css">
#my .hover {
	cursor: pointer;
	background-color: Yellow;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// animate() : 여러 가지 효과를 동시에 적용할 때 맵 형태로 값 설정
		// 적용대상.animate({ }, 시간)
		
		$('#moreRegion').hide();
		
		$('span.more').click(function() {
			$('#moreRegion').animate({height:'200px', width:'show', opacity:'show'}, 'slow');
		});
	});
</script>

</head>

<body>

	<div class="region">
		안녕하세요. 여기는 본문입니다. <span class="more">more...</span>
	</div>

	<div id="moreRegion" style="height: 100px; background-color: Yellow;">
		또 만나요
	</div>

</body>

</html>

왼쪽의 첫 화면에서 more 클릭시 애니메이션 효과가 나타나며 노란 div 가 아래 옆으로 펴지는 것을 볼 수 있다

 

 

animate(), stop() 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 멈추기</title>

<style type="text/css">
div {
	position: absolute;
	background-color: #abc;
	left: 0px;
	top: 50px;
	width: 60px;
	height: 60px;
	margin: 5px;
}
</style>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// stop() : animate() 함수를 일시 정지
		$('#go').click(function() {
			$('.block').animate({left:'+=100px', top:'+=100px'}, 2000);
		});
		
		$('#stop').click(function() {
			$('.block').stop();
		});
		
		$('#back').click(function() {
			$('.block').animate({left:'-=100px', top:'-=100px'}, 2000);
		});
	});
</script>

</head>

<body>

	<button id="go">Go</button>
	<button id="stop">STOP!</button>
	<button id="back">Back</button>
	<div class="block"></div>

</body>

</html>

왼쪽의 처음 화면에서 go 버튼을 누르면 왼쪽 아래로 박스가 이동하게 된다
back 버튼 클릭시 오른쪽, 위쪽으로 향하며 stop 버튼 클릭시 stop() 함수에 의해 움직임이 멈추게 된다

 

 

버튼을 이용해 메뉴 열고 닫기 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #DDD;
}

.menu>div {
	padding: 2%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
	// JavaScript 함수 선언
	function ShowSubMenu(strId) {
		var lySubMenu = $(strId);
		
		if(lySubMenu.first().is(":hidden")){
			$(strId).slideDown(3000);
		}else{
			$(strId).slideUp(3000);
		}
	}

	$(document).ready(function() {
		$('.menu_2').hide();
	});
</script>
</head>

<body>
	<div class="menu">
		<div>
			메뉴 1
			<button onclick="ShowSubMenu('#sub1')"> + </button>
			<div class="menu_2" id="sub1">
				<div>메뉴 1-1</div>
				<div>메뉴 1-2</div>
			</div>
		</div>
		
		<div>메뉴 2</div>
	</div>
</body>
</html>

버튼에 onclick 을 지정하여 slideUp, slideDown() 효과를 이용해 상세 메뉴의 열고 닫히는 기능을 구현하였다

 

동적으로 원격 페이지 로드 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>동적으로 원격 페이지 로드</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn .btnLoad').click(function() {
			$('#ctlGrid').load('HtmlSamplePage.html');
			
			window.alert("HtmlSamplePage.html이 로드 되기 전에 먼저 경고창이 열립니다");
		});
	});
</script>

</head>

<body>

	<div id="btn">
		<div class="btnLoad">HTML읽어오기 버튼</div>
	</div>

	<div id="ctlGrid">HtmlSamplePage.html</div>

</body>

</html>

코드 실행 후 읽어보기 버튼 클릭시 경고창이 뜨며 확인을 누르면 샘플 페이지 div가 표시된다

 

 

'jQuery' 카테고리의 다른 글

TIL_210607_Ajax 기초  (0) 2021.06.07
TIL_210602_jQuery 기초1  (1) 2021.06.03
'jQuery' Related Articles more