구리

TIL_210602_jQuery 기초1 본문

jQuery

TIL_210602_jQuery 기초1

guriguriguri 2021. 6. 3. 10:22

목차

더보기

jQuery

jQuery 사용방법 

참고사항 - 라이브러리(프레임워크) 사용 방법

jQuery vs JavaScript 코드 비교

jQuery 선택자 사용 방법
jQuery 정규표현식 선택자 사용
jQuery 홀수, 짝수 인덱스 요소를 선택하는 선택자
jQuery 시작태그, 닫는 태그 사이의 글씨를 이용하여 요소 선택
jQuery  특정 요소의 형제들, 부모의 index를 이용하여 요소 선택 
jQuery 사용시 기본 형식 생략 후 표기 방법 & 특정 요소의 태그명 추출
동적인 이벤트 부여 메소드 : bind()
스타일 추가 및 제거 메소드 : addClass(), removeClass()
this.id로 DOM 요소의 id 속성 가져오기
클릭시 함수 적용할 수 있는 메소드 : click()
특정 요소를 걸러내는 메소드 : filter('요소선택')
특정 요소만 잘라서 가져오는 메소드 : slice(a index, b index)
선택된 요소의 갯수를 의미하는 메소드 : size()
클릭 관련 두 가지 일을 반복하는 함수 : toggle(함수, 함수)
toggleClass('스타일 클래스')
mouseover, mouseout 관련 두가지 일을 반복하는 함수 : hover()
1번만 이벤트 발생시키는 메소드 : one("이벤트명", 함수)
선택한 요소 css, style 관련 메소드 : css()
jQuery로 브라우저 버전 알아보는 방법
CallBack

 

 

jQuery

HTML5 문서 내에서 스크립트 언어를 단순화하여 사용 가능하도록 설계된 경량(용량이 작은) 프레임워크 (자바스크립트로 만들어짐)

모바일(~~min.js) / 일반(jquery ~~.js) 버전으로 나눠지며 HTML5 / CSS3 / JavaScript / DOM을 다 다룰 수 있다.

(jQuery 사용시  각각의 웹문서의 구조를 잘 알고 있어야 하는데 이유는 아래 예시 참고)

(DOM : Document Object Model)

 

 

 

jQuery 사용방법 

1. jquery-1.6.2.js를 로드
1-1. 프로젝트 내부에 jquery-1.6.2.js 파일 직접 업로드
1-2. 해당 사이트에서 로드
<script src="http://code.jquery.com/파일명.js"></script>

 

2.HTML5기반이므로 선언문 확인
<!DOCTYPE html>
<meta charset="UTF-8">
<script></script>

 

3. 프로젝트 기본 구조 확인 : ~~.html(문서구조 및 기능), ~~.css(문서 꾸미기), ~~.js(이벤트 처리) 파일 존재해야 함

 

<참고사항 - 라이브러리(프레임워크) 사용 방법>

1. 프로젝트 내부에 넣어서 사용
~~.jar 파일-> WebContent -> WEB-INF -> lib폴더에 넣어서 사용
~~.js 파일 -> WebContent -> 별도 폴더 생성하여 사용

2.웹상에서 실시간 다운로드하여 사용 (CDN : Content Delivery Network)
~~.jar 파일 -> Maven -> 실시간 다운로드 (안드로이드일 경우 Gradle 이용)
~~.js 파일 -> <script src="경로 및 파일명"></script>

 

 

jQuery 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World jQuery!!! : 01HelloWorld.html</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() { // 페이지가 준비되었을 때	
	// 내부에 코딩하며 일반 자바스크립트, jQuery 내부 함수들 사용하며
	// 새로운 함수 생성하고 싶다면 외부에 함수 생성
	// 새로운 함수 호출 -> test();
	function msg(){}
	msg();
	});
	// jQuery 외의 원하는 함수 생성
	function test(){}
</script>

</head>

<body>
	<div style="background-color: Yellow;" onclick="alert('안녕');">
		안녕하세요. jQuery!!!!!!!!!!!!!!! (div태그에 직접 CSS적용)</div>

	<div class="bg">안녕하세요. jQuery입니다.. (head부분에 bg라는 이름으로 CSS클래스를 만들어 불러오기)</div>

	<div id="hw">안녕하세요. jQuery입니다.. (head부분에 bg라는 이름으로 CSS클래스를 만들어 불러오기)</div>

	Body태그 안에 스타일시트, 자바스크립트가 들어오지 않는것이 jQuery의 큰 장점.. 
	자바스크립트를 동적으로 추가해줄 수	있다.. Body태그가 깔끔해 진다..

</body>

</html>

 

<script> 태그 내의 jQuery 용어 해석- $(document).ready(function(){~~~})

$ : jQuery 객체를 의미

document : jquery-1.6.2.js의 19번째 줄 var document (웹 문서를 의미)
ready() : jQuery함수로 웹 문서가 로드되었을 때를 의미

즉, 웹 문서(document)가 완전히 로드 되었을때 (ready) 원하는 함수 기능 실행(function() {~~~})

 

따라서 아래의 표현은 jQuery 사용을 위한 기본 형식인 셈이다.

$(document).ready(function(){원하는 함수 호출~~})

 

 

jQuery vs JavaScript 코드 비교

- 함수 사용시

자바스크립트
<script>
      function init() {~~}
</script> 

<body onload="init()"> 

jQuery
<script src="~.js"></script> // 꼭 먼저 jQuery 선언 후 사용
<script type="text/javascript">
	$(document).ready(function() {원하는 함수 호출~ });	
</script>

 

- 버튼 클릭시

자바스크립트
function test(){~~}
<button onclick="test()">
jQuery
$('btn').click(function() {~~})
<button id="btn">

 

jQuery vs JavaScript 코드 비교 예시

더보기 
jQuery 형식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic_code.html</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
		alert("경고창이 자동으로 !!!");
	});
</script>
<!-- 무조건 선언 후 jQuery 사용, 안그럼 jQuery 실행 X-->
</head>
<body onload="init()">
	테스트
</body>
</html>

자바스크립트 형식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>basic_code.html</title>

<script src="jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
	
	});
	function init(){
		alert("경고창이 자동으로 !!!");
	}
</script>
<!-- 무조건 선언 후 jQuery 사용, 안그럼 jQuery 실행 X-->
</head>
<body onload="init()">
	테스트
</body>
</html>

 

jQuery 선택자 사용 방법 예시

$('태그명')
$('#태그의 id값')
$('.태그의 class값')
더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>Selector : 선택자/선택기/실렉터/셀렉터</title>

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

    <style type="text/css">
        .bg{ background-color:Yellow;}
        .horizontal { float:left; list-style:none; margin:10px;}
    </style> 

    <script type="text/javascript">
        $(document).ready(function() {
	        // addClass() : 스타일을 설정하는 함수 (스타일 클래스 매개변수로 작성)
	        // click(함수) : 클릭 이벤트를 감지하여 처리하는 함수
	        // 요소 선택 : li > u
	        
			// 1. u 관련 배경색 변경
			$('li>u').addClass('bg');
			
			// 2. id="myFavorites"인 자식 요소 중 li 속성 변경
			$('#myFavorites>li').addClass('horizontal');
			
			// 3. id="jquery"인 요소를 클릭했을때 이벤트 발생
			jQuery('#jquery').click(function(){
				alert("jquery가 클릭되었습니다.");
			});
		
        });

    </script>

</head>

<body>

<h3>관심사항</h3>

<ul id="myFavorites">

    <li><u>C#</u></li>
    <li>ASP.NET</li>
    <li></li>
    <li class="sil">Silverlight</li>
    <li id="jquery">j<u>Q</u>uery</li>

</ul>

</body>
</html>

 

jQuery 코드를 보게 되면 <head>, <body> 태그 안에 여러 가지 태그들이 있는데 (head - meta, script, style... / body - h3, ul - li - u) 부모 - 자식 태그 간의 관계를 알아야 특정 태그에 원하는 이벤트 ,css를 적용할 수 있기에 먼저 웹 문서의 구조를 파악 후 jQuery를 사용하는  것이 좋다.

 

jQuery 적용 화면
jQuery 메뉴 클릭시

예시에서 사용된 jQuery 함수

addClass() : 스타일을 설정하는 함수 (스타일 클래스 매개변수로 작성)
click(함수) : 클릭 이벤트를 감지하여 처리하는 함수

 

 

jQuery 정규표현식 선택자 사용(태그의 속성값을 이용)

$('태그명[속성^="속성값"]') 속성값으로 시작하는 속성을 가진 태그
$('태그명[속성$="속성값"]') 속성값으로 끝나는 속성을 가진 태그
$('태그명[속성*="속성값"]') 속성값을 포함하는 속성을 가진 태그
더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

    <title>정규표현식 실렉터</title>

    <style type="text/css">
        .red { color:Red; }
        .green { color:Green; }
        .silver { color:Silver; }
    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {
		// 1. href= dotnet을 포함하는 요소의 글씨를 적색으로 변경
		$("a[href*='dotnet']").addClass('red');
           
		// 2. href= aspx로 끝나는 요소의 글씨를 녹색으로 변경
		$("a[href$='pdf']").addClass('green');
		
		// 3. href= mailto로 시작하는 요소의 글씨를 은색으로 변경
		$('a[href^="mailto"]').addClass('silver');
		
		// 4. href= .com으로 끝나는 요소의 글씨를 적색으로 변경 
		$('a[href$=".com"]').addClass('red');
		
        });

    </script>

</head>

<body>
    <a href="http://www.dotnetkorea.com/">닷넷코리아</a>
    <br>
    <a href="20210602.pdf">파일 다운로드</a>
    <br>
    <a href="mailto:redplus@hawaso.com">이메일</a><br>

	<a href="http://www.naver.com">네이버</a><br>
	<a href="http://www.google.com">구글</a><br>
	<a href="http://www.nate.com">네이트</a>

</body>
</html>

 

 

여기서 주의할 점은 jQuery 코드에서 태그 지정시 $("a[href^='mailto']") "a"태그 안에 문자열이 들어가 있는 상태이기에

큰 따옴표(" ")를 밖에서 사용했다면 안에선 작은 따옴표(' ')로 바꿔서 사용해야 한다

해당 코드를 실행하면 a href=링크인 태그는 해당 링크로 이동, pdf 혹은 zip 파일일 경우 파일 다운로드가 되며 

mailto로 시작하는 a 태그 클릭시 이메일 발송 화면이 생성되는 것을 볼 수 있다

 

 

jQuery 홀수, 짝수 인덱스 요소를 선택하는 선택자

$(태그명:odd)  홀수 인덱스 요소
$(태그명:even) 짝수 인덱스 요소

 

jQuery를 이용한 테이블의 tr태그 짝수번째 배경색 변경 예시(태그의 index 이용)

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

<title>테이블의 짝수번째 배경색 변경</title>

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

.blueColor {
	background-color: blue;
}
</style>



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

<script type="text/javascript">
	$(document).ready(function() {
		$('tr:odd').addClass('redColor');
		
		$('tr:even').addClass('blueColor');
	});
</script>

</head>



<body>

	<table width="100">
		<tr>
			<td>0</td>
		</tr>

		<tr>
			<td>1</td>
		</tr>

		<tr>
			<td>2</td>
		</tr>

		<tr>
			<td>3</td>
		</tr>

	</table>

</body>

</html>

 

 

위 코드를 보면 <table> 태그 안의 <tr> 태그는 총 4개이며 index는 항상 0으로 시작한다. 따라서,

1번째 <tr> index - 0

2번째 <tr> index - 1

 

3번째 <tr> index - 2

4번째 <tr> index - 3

 

 

 

jQuery 시작태그, 닫는 태그 사이의 글씨를 이용하여 요소 선택 

$('태그명:contains("원하는 문자열")').addClass(~~);
$("태그명:contains('원하는 문자열')").addClass(~~);
더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>특정 텍스트 검색</title>

<style type="text/css">
.redColor {
	color: Red;
}
</style>

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

<script type="text/javascript">
	$(document).ready(function() {
		// 시작태그, 닫는 태그 사이의 글씨를 이용하여 요소 선택 
		$('td:contains("DotNetKorea")').addClass('redColor');
	
	});
</script>

</head>

<body>

	<table>

		<tr>
			<td>RedPlus</td>
		</tr>

		<tr>
			<td>DotNetKorea</td>
		</tr>

		<tr>
			<td>Hawaso</td>
		</tr>

	</table>

</body>

</html>

 

$('td:contains("DotNetKorea")').addClass('redColor');

DotNetKorea를 포함하는 <td> 태그의 글씨 색상 변경 의미

 

 

 

jQuery  특정 요소의 형제들, 부모의 index를 이용하여 요소 선택

특정 요소의 형제들 : .siblings()
특정 요소의 부모 : .parent()
인덱스를 이용 : .find('요소:eq(index)')
더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>메서드 체인</title>

<style type="text/css">
.redColor {
	color: Red;
}

.blueColor {
	color: Blue;
}
</style>

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

<script type="text/javascript">
	$(document).ready(function() {
		// 특정 요소의 형제들 .siblings()
		// 특정 요소의 부모 .parent()
		// 인덱스를 이용 .find('요소:eq(index)')
		
		// RedPlus 글씨를 갖는 요소의 형제들
		$('td:contains("Red")')		// <td>RedPlus</td>
		.siblings()					// <td>레드플러스</td>, <td>닷넷</td>
		.addClass('redColor')		
		.parent()					// 두번쨰 <tr></tr>
		.find('td:eq(0)')			// <td>RedPlus</td>
		.addClass('blueColor');
	});
</script>

</head>

<body>
	<table>
		<tr>
			<td>NickName</td>
			<td>이름</td>
			<td>비고</td>
		</tr>

		<tr>
			<td>RedPlus</td>
			<td>레드플러스</td>
			<td>닷넷</td>
		</tr>

		<tr>
			<td>Hawaso</td>
			<td>하와소</td>
			<td>강의</td>
		</tr>
	</table>
</body>

</html>

 

위 코드의 <table> 태그의 자식요소 - <tr>태그 총 3개, 각 <tr> 태그의 자식 요소 - <td> 각 3개로

$('td:contains("Red")')                     -  Red라는 문자열을 포함하는 td 태그이므로 <td>RedPlus</td>

<td>RedPlus</td>.silbings()     - <td>RedPlus</td>의 형제 태그인  <td>레드플러스</td>, <td>닷넷</td>

.addClass('redColor')                       -  <td>레드플러스</td>, <td>닷넷</td> 태그 글씨 색상 변경

.parent()                                                -  <td>RedPlus</td>의 부모 태그인 두번째 <tr>

.find('td:eq(0)')                                    - 두번째 <tr>의 인덱스 0인 <td> 태그 = <td>RedPlus</td>

.addClass('blueColor');                    -  <td>RedPlus</td> 태그의 글씨 색상 변경 

 

 

 

jQuery 사용시 기본 형식 생략 후 표기 방법 & 특정 요소의 태그명 추출

검색요소.get(0).tagName : 검색 요소의 태그명을 추출
$(document).ready(function() {~~}); 에서 document.ready() 생략 가능
더보기 
<!DOCTYPE html>
<html>
<head>

<title>DOM 요소 가져오기</title>

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

<script type="text/javascript">
	// $(document).ready(function() {~~}); 생략 가능

	// $().ready(function() {~~}); 생략 가능 

	$(function() {
		// 특정 요소의 태그명을 추출 : 검색요소.get(0).tagName
		var t = $('#dnk').get(0).tagName;
		alert(t);
		
		// name 값이 n3인 요소의 태그명
		var n = $('input[name="n3"]').get(0).tagName;
	});
</script>

</head>



<body>
	<a href="http://www.dotnetkorea.com/" id="dnk">닷넷코리아</a>
	<input type="text" name="n1" />
	<input type="text" name="n2" />
	<input type="text" name="n3" />
</body>

</html>

 

 

bind()

메소드로 동적인 이벤트 부여

 

메소드 형태

요소.bind("이벤트명", 이벤트 발생시 호출되는 함수);

예시

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

<title>bind() 메서드로 동적으로 이벤트 부여</title>
<style type="text/css">
.redColor {
	color: Red;
}

.blueColor {
	color: Blue;
}
</style>
<script src="jquery-1.6.2.js" type="text/javascript"></script>

<script type="text/javascript">
	$(document).ready(function() {
		// bind() : 요소와 이벤트를 묶어주는 역할 담당 / 반대는 unbind()
		// 요소.bind("이벤트명", 이벤트 발생시 호출되는 함수);
		// 요소.unbind("이벤트명");
		// click 이벤트는 대부분의 요소에 적용할 수 있다 (<div>, <select>의 <option> 등..)
		$('#btnClick').bind("click",function(){
			alert("클릭됨!");
		});
		
		$('#btnClick').bind("mouseover",function(){
			// alert("요소 위로 마우스 커서가 올라감!");
			$(this).addClass('redColor');
			// 이벤트 발생시 호출되는 함수내에서 $(this)는 이벤트 발생시킨 요소 본인 가리킴
		});
		
		$('#btnClick').bind("mouseout",function(){
			// alert("요소 위로 마우스 커서가 빠져나감!");
			$(this).addClass('blueColor');
		});
	});
</script>

</head>



<body>

	<div id="btnClick">클릭하세요!!!</div>

</body>

</html>

 

처음 화면

 

클릭하세요! 문구 클릭시

 

 

 

해당 문구에 마우스 올렸을때
해당 문구에서 마우스를 뗐을때

 

 

스타일 추가 및 제거 메소드 : addClass(), removeClass()

addClass('스타일 클래스명') : 스타일 클래스 적용
removeClass('스타일 클래스명') : 스타일 클래스 적용 해제

예시

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

<title>스타일 추가/제거</title>

<style type="text/css">
.yellowBorder {
	background-color: yellow;
	border: 1px solid red
}
</style>

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

<script type="text/javascript">
	$(document).ready(function() {
		// 여러가지 이벤트를 bind()로 계속 묶어주는 방법
		// 스타일 클래스 적용 : addClass('스타일 클래스명')/ 반대 removeClass()
		$('#btnClick')
		.bind("mouseover",function(){
			$(this).addClass('yellowBorder');
		})
		.bind("mouseout",function(){
			$(this).removeClass('yellowBorder');
		});
	});
</script>
</head>

<body>
	<div id="btnClick">마우스를 올려보세요!!!</div>
</body>

</html>

해당 문구에 마우스 올렸을 때 스타일 클래스 적용
마우스를 내리면 스타일 클래스 적용 해제됨

 

 

 

this.id로 DOM 요소의 id 속성 가져오기

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

    <title>this.id로 DOM 요소의 id 속성 가져오기</title>

    <style type="text/css">
        .redColor{ color:Red; }
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
			$('.redColor').bind('click',function(){
				// 1. 모든 요소 스타일 제거
				$('#mainMenu .redColor').removeClass('redColor');
				
				// 2. 이벤트 발생시킨 요소에만 다시 스타일 추가
				$(this).addClass('redColor');
			});

        });

    </script>

</head>

<body>
    <div id="mainMenu">
        <div id="dnk" class="redColor">닷넷코리아</div>
        <div id="va" class="redColor">비주얼아카데미</div>
        <div id="ll" class="redColor">라이선스랜드</div>
    </div>
</body>

</html>

라이선스 랜드 클릭시
비주얼 아카데미 클릭시

코드를 보면 <div id="mainMenu"> 태그 안에 <div> 자식 태그가 3개 존재하는데 각 div 클릭시 해당 div만 빨간색으로 나머지는 style 클래스를 적용 해제하는 예시이다.

모든 요소 스타일 클래스 적용 해제시 주의할 점은 요소 지정시 $('#mainMenu .redColor') id값과 클래스값 사이에 공백이 있으며 $('.redColor')로 작성하지 않은 이유는 나중에 더 많은 코드들이 있을 때 선택자를 구체적으로 작성해야 엉뚱한 코드에 스타일 클래스가 적용되지 않기 때문이다.

 

 

 

click()

위에서 배웠던 bind() 의 'click'은 click() 메소드로 사용 가능하다

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>bind() 중 click 이벤트는 click()메서드로 사용</title>

    <style type="text/css">
        .redColor{ color:Red }
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
			$('#mainMenu .redColor').click(function(){
				if(this.id == "naver"){
					location.href="http://www.naver.com";
				}else if(this.id == "daum"){
					location.href="http://www.daum.net";
				}else if(this.id == "google"){
					location.href="http://www.google.com";
				}
			});
        });
    </script>
</head>

<body>

    <div id="mainMenu">
        <div id="naver" class="redColor">네이버</div>
        <div id="daum" class="redColor">다음</div>
        <div id="google" class="redColor">구글</div>
    </div>

</body>

</html>

3개의 사이트명이 있으며 클릭시 해당하는 페이지로 이동

 

filter('요소선택');

특정 요소를 걸러내는 함수로 종료시킬시 end() 적용, 주의할 점은 처음 filter() 사용 후 다른 요소를 거르고 싶다면 무조건 첫번째 filter()를 종료시킨 후 재사용한다

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>filter() 메서드를 사용해서 조건에 맞는 요소만 가져오기</title>

    <style type="text/css">
        .redBorder { border:solid 1px red; }
        .five { border-width:5px; }
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
        	// filter('요소선택') 걸러내는 함수 -> 종료 end()
        	// 만약 filter 함수 사용 후 다른 filter 적용시 첫번째 filter 종료 후 사용
			
			$('img').addClass('redBorder')	// 1. 모든 이미지에 redBorder 스타일 적용
			.filter('[title*="닷넷"]')			// 2. title="닷넷"인 요소만 five 적용
			.addClass('five')
			.end()
			.filter('[alt$="va"]').removeClass('redBorder');	// 3. alt="~~va"로 끝나는 요소의 스타일 제거
        });
    </script>
</head>

<body>
	 <img src="" title="닷넷" alt=".net" />
	 <img src="" title="자바" alt="java" />
	 <img src="" title="임베디드" alt="em" />
 </body>

</html>

결과를 보면 filter() 메소드를 이용해 첫번째 img 태그에는 모든 스타일 클래스 적용, 두번째 img 태그에는 스타일 클래스 제거, 세번째 img 태그에는 redBorder 스타일 클래스만 적용된 것을 볼 수 있다. 만약 filter() 메소드를 1번만 사용할 거라면 end()는 사용하지 않아도 된다 .

 

 

slice(a index, b index)

index a ~ index b-1인 요소 선택하는 메소드로 자바에서는 substring()과 비슷하다

 

 

size()

선택된 요소의 갯수

 

예시

더보기 
<!DOCTYPE html>

<html>
<head>
	<meta charset="UTF-8">
    <title>slice() 메서드로 지정된 개체만 가져오기</title>

    <style type="text/css">
        .red { color:Red; }
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
			// size() : 선택된 요소의 갯수
			// alert("현재 웹 문서엔 "+$('input').size() + "개의 input 태그 존재");
        	
        	// slice(시작 index, 직전 index)
        	$('input').slice(1,3).addClass('red'); // 인덱스 1,2만 선택 (2,3번쨰)
        });
    </script>
</head>

<body>
	
	<h1>2번째와 3번째 버튼에만 빨간 글씨 적용</h1>
	
	<input type="button" value="버튼" /> <!-- 0번 -->
	<input type="button" value="버튼" /> <!-- 1번 -->
	<input type="button" value="버튼" /> <!-- 2번 -->
	<input type="button" value="버튼" /> <!-- 3번 -->

</body>

</html>

slice(1,3)을 적용하여 인덱스 1,2 (2번째, 3번째)인 input 태그에 스타일 클래스 적용시킨 것을 볼 수 있다.

 

 

toggle(함수, 함수)

두 가지 일을 반복하는 함수로 클릭시에만 어떠한 기능을 적용시킬지 정하는 함수이다.

(즉, on/off 기능으로 클릭했을 때만 toggle() 메소드를 적용시킬 수 있음)

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>toggle() 메서드로 토글링</title>

    <style type="text/css">
        .hidden { display:none; }
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
			//toggle(함수, 함수):두 가지 일을 반복하는 함수 (즉, on/off 기능)
        	
			
			/** $('#btn').toggle(
        		function() {
					$('#myLayer').addClass('hidden');
				},
				function() {
					$('#myLayer').removeClass('hidden');
				}
        	); **/
			
        	// 위 아래 다 같은 기능이나 표현의 차이
			$('#btn').toggle(f1,f2);
			function f1() {
				$('#myLayer').addClass('hidden');
			},
			function f2() {
				$('#myLayer').removeClass('hidden');
			}
			
        });
    </script>
</head>

 

<body>
    <h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>
    <input id="btn" type="button" value="버튼" />
    <div id="myLayer" style="background-color:Yellow;">
        안녕
    </div>
</body>

</html>

버튼 클릭시 '안녕'이라는 문구가 뜨며 다시 클릭하면 사라진다

 

 

toggleClass('스타일 클래스')

addClass(),removeClass() 기능을 하나로 만든다

 

toggleClass() vs toggle(함수, 함수) 차이점은 ?

두 개의 메소드가 비슷해 보이지만 엄연히 다르다, 단지 스타일을 적용시켰다가 해제하는 단순한 것을 적용할 것이라면 toggleClass()를,그게 아닌 클릭시에 a function() 적용, 다시 클릭시 b function()을 적용시킬 거라면 toggle()을 적용하는 것이 좋다.

 

예시 (결과화면은 위와 같기에 생략)

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggleClass() 메서드로 CSS 클래스에 대한 토글링</title>

<style type="text/css">
.hidden {
	display: none;
}
</style>

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

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function() {
			// toggleClass('스타일 클래스') -> addClass(),removeClass() 기능을 하나로
			$('#myLayer').toggleClass('hidden');
		
		});
	});
</script>
</head>

<body>
	<h1>버튼을 클릭할 때마다 레이어 보이기/숨기기</h1>
	<input id="btn" type="button" value="버튼" />
	<div id="myLayer" style="background-color: Yellow;">안녕</div>
</body>
</html>

 

 

hover()

hover(함수, 함수)는 mouseover,mouseout 기능을 번갈아서 함

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>hover()로 마우스오버와 아웃을 동시 처리</title>

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

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

    <script type="text/javascript">
        $(document).ready(function() {
			// hover(함수, 함수)는 mouseover,mouseout 기능을 번갈아서 함
			$('table tr').slice(1).hover(over,out);
			function over() {
				$(this).addClass('hover');
			}
			function out() {
				$(this).removeClass('hover');
			}
        	
        });
    </script>
</head>
 
<body> 

<table border="1">
    <tr><td>제목</td></tr> 		<!-- 0번 -->
    <tr><td>ASP.NET</td></tr>	<!-- 1번 -->
    <tr><td>ASP.NET</td></tr>	<!-- 2번 -->
</table>  
  
</body>
</html>

hover(out)
hover(over)

 

hover() 를 이용해 제목을 제외한 다른 메뉴에 마우스를 올리면 스타일 클래스가 적용되고, 마우스를 다시 떼면 스타일 클래스 적용이 해제되는 것을 볼 수 있다.

 

 

 

one("이벤트명", 함수)

처음 한번만 이벤트가 발생하며 이벤트를 해제하기 전까지 계속 유지하는  bind() / click() 함수와 다른 점이다.

초기 데이터 insert 등... 버튼을 1번만 눌렀을 때만 발생하며 그 이상 누르면 발생해선 안되는 상황일때 사용

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>one()메서드로 한번만 실행</title>

    <style type="text/css">
     
    </style>

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

    <script type="text/javascript">
        $(document).ready(function() {
			// bind() / click() 함수는 이벤트를 해제하기 전까지 계속 유지
			// one("이벤트명", 함수)는 처음 한번만 이벤트 가능
			$("#btn").one("click", eventOne);
			function eventOne() {
				alert("한번만 가능");
			}

        });
    </script>
</head>
 
<body>
  <div id="my">
   <input type="button" id="btn" value="버튼"  />
  </div>
</body>
</html>

화면에 나온 버튼을 누르면 1번만 경고창이 뜨며 그이상 눌러도 더이상 경고창이 뜨지 않는다

 

 

 

css()

선택한 요소의 css 속성값을 가져오거나 style 속성을 추가

css() : 요소의 현재 스타일 속성들을 반환
css("스타일속성명") : 해당 속성값 반환
css("스타일 속성명", 속성값) : 해당 요소에 스타일 속성을 설정

 

css()함수를 이용한 폰트 늘리기 및 줄이기 예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css()함수를 이용한 폰트 늘리기 및 줄이기</title>

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

.region {
	color: Red;
}
</style>

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

<script type="text/javascript">
	$(document).ready(function() {
		// css() 요소의 현재 스타일 속성들을 반환
		// css("스타일속성명") 해당 속성값 반환
		// css("스타일 속성명", 속성값) 해당 요소에 스타일 속성을 설정
		
		$('div.button').click(function() {
			// jQuery에서 요소의 내부 속성들을 변경시키기 위해 변수를 선언할 경우
			// var $변수명 과 같이 선언해야 한다
			/** 
				var 변수명 = 요소;
				변수명.자바스크립트 관련 함수들만 사용 가능
				
				var $변수명 = 요소;
				$변수명.제이쿼리 관련 함수 사용 가능  
			**/
			var $region = $('div.region');
				
			var currentSize = $region.css('fontSize'); // 16px
			
			var num = parseFloat(currentSize, 10); // 16px -> 16(10진수로 표현)
			
			var unit = currentSize.slice(-2); // 16px -> px
			
			if(this.id=="goBig"){
				num *= 1.5; // 1.5배 늘리기 
			}else{
				num /= 1.5; // 1.5배 줄이기
			}
			
			$region.css('fontSize',num+unit);
		});
	});
</script>

</head>

<body>
	<div id="btn">
		<div class="button" id="goBig">늘리기</div>
		<div class="button" id="goSmall">줄이기</div>
	</div>
	<br>

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

</html>

처음 화면
늘리기 / 줄이기 버튼을 클릭해 폰트 크기를 조절할 수 있다.

 

<주의사항>

위 코드를 보다시피 jQuery에서 요소의 내부 속성들을 변경시키기 위해 변수를 선언할 경우 var $변수명 으로 작성해야 한다.

 var 변수명으로 선언하면 jQuery 관련 함수 사용이 불가하다.

 

 

jQuery로 브라우저 버전 알아보는 방법

jQuery.browser.version 사용
더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>브라우저 버전</title>

    <style type="text/css">
    </style>

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

    <script type="text/javascript">
    $(document).ready(function() {
		alert("현재 웹 브라우저 버전은 "+jQuery.browser.version+"입니다");
	});
    </script>
</head>

<body>

</body>
</html>

 

 

CallBack

이벤트가 발생한 후 자동 호출되는 개념

 

예시

더보기 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>콜백 : 매개변수로 함수를 전달</title>

<style type="text/css">
</style>

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

<script type="text/javascript">
	$(document).ready(function() {
		// CallBack : 이벤트가 발생한 후 자동 호출되는 개념
		$('p:eq(1)')
		.css("backgroundColor", "Yellow")
		.click(function() {
			alert("클릭!"); // 경고창이 뜨면 그 이후 코드는 대기 상태
			
			var $thisPara = $(this);	// <p>두번째</p>
			$thisPara.next()			// 바로 다음 형제 태그 <p style="display: none;">세번째</p>
			.slideDown('slow',function(){  // slow하게 내려가
				$thisPara.slideUp('slow');	// 대신 <p>두번째</p>는 slow하게 올라가
			});
		});
	});
</script>

</head>

<body>
	<p>첫번째</p>
	<p>두번째</p>
	<p style="display: none;">세번째</p>
	<p>네번째</p>
</body>

</html>

 

처음 화면

 

두번째 단어 클릭시 경고창이 뜨며 확인 버튼 누르면 슬라이드 효과가 바로 나타나며 두번째 단어는 위로 사라지고 세번째 단어가 나타나며 빈 자리로 올라간다

이와 같이 어떤 이벤트가 발생한 직후 자동으로 호출되는 개념을 '콜백'이라 부른다.

위 코드를 실행해보면 세번째가 갑자기 나타나 두번째 단어를 덮은 것처럼 보이지만 사실 두번째 라는 단어가 위로 올라가며 사라지게 되는 것이다.

 

 

'jQuery' 카테고리의 다른 글

TIL_210607_Ajax 기초  (0) 2021.06.07
TIL_210607_jQuery 기초2  (0) 2021.06.07
'jQuery' Related Articles more