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

Learn/KH정보교육원

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

Dahoon06 2021. 6. 2. 18:09

728x90

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

jQuery : 모바일 버전과 PC버전이 다르다.

ex) 모바일 : jQuery-1.6.2.min.js

PC : jQuery-1.6.2.js

상단에(<head> 안에)

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

** 1.6.2 수업에 사용된 버전!!

사용법)

$(document).ready(function() { // 페이지가 준비되었을 때
			//내부에 코딩
			//일반 자바스크립트
			//jQeury 함수 등등 다 사용가능
			
			//새로만든 함수 호출
			test();
	
		//내부에서도 함수 선언 가능
		function msg(){
			
		}
		msg();
	});
	
	//jQery에 내가 필요한 함수가 없을경우
	//바깥쪽에다가 새로운 함수 선언
	function test(){
		
	}

jQuery - css적용

<script type="text/javascript">
$(document).ready(function() { //=> 문서 준비가 끝나면 아래 함수들을 실행 (body의 onload와 비슷하다.)
			//제이쿼리가 가지고있는 addClass('스타일 클래스명') => 스타일을 설정하는 함수
			//				click(함수) => 	클릭 이벤트를 감지하여 처리하는 함수
			//요소 선택 : 선택자가 css와 같다.
			
        		//1.u 관련 배경색 변경(태그명을 사용)
			$('li > u').addClass('bg');
			//2.id => myFavorites 인 자식 요소중 li속성 변경
			$('#myFavorites > li').addClass('horizontal');
			//3. id="jqeury"인 요소를 클릭했을 때 경고창 띄우기
        jQuery/** <--$와 같은 의미 **/('#jquery').click(function(){
        		alert("경고창 테스트");
        	});
			
			//4. class="sil"인 요소를 클릭했을때 경고창 띄우기
			$('.sil').click(function(){
				alert("클래스 속성이 sil인 요소가 클릭되었습니다.");
			})
        });
</script>

CSS

.bg {

background-color: Yellow;

}

.sil {

background-color: Silver;

}

HTML

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

일반적으로 css적용과 같은 결과 화면이 나온다.

addClass('클래스명') => css적용

$(~~)와 jQuery(~~) 같은 기능

jQuery - 특정 단어

<script type="text/javascript">

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

    </script>

CSS

<style type="text/css">

.red { color:Red; }

.green { color:Green; }

.silver { color:Silver; }

</style>

HTML

<body>
	<a href="http://www.dotnetkorea.com/">닷넷코리아</a>
	<br>
	<a href="http://www.visualacademy.com/Default.aspx">비주얼아카데미</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>

특정 글을 포함 : *=
ex) $("a[href*='dotnet']").addClass('red');
특정 글로 끝나는 : $=

ex) $("a[href$='aspx']").addClass('green');
특정 글자로 시작하는 : ^=

ex) $('a[href^="mailto"]').addClass('silver');

jQuery - 짝수(odd) // 홀수 (even)

<script type="text/javascript">
	$(document).ready(function() {
		//태그의 인덱스 번호가 짝수
		$('tr:odd').addClass('redColor');
		//태그의 인덱스 번호가 홀수
		$('tr:even').addClass('blueColor');


	});
</script>

CSS

<style type="text/css">

.redColor {

background-color: Red;

}

.blueColor {

background-color: Green;

}

</style>

HTML

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

해당 인덱스 번호에 css 적용

짝수 : odd

홀수 : even

jQuery - 문자열 포함(contain)

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

	});
</script>

CSS

<style type="text/css">

.redColor {

color: Red;

}

</style>

HTML

<body>

	<table>

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

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

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

	</table>

</body>

contain('찾을문자') 함수 => 찾는 문자열이 포함되어있는 곳을 선택

jQuery - 부모 // 형제 요소 (chain 메서드)

<script type="text/javascript">
	$(document).ready(function() {
			//특정 요소의 형제들 .sibling()
			 
			//특정 요소의 부모 .parent()
			
			//요소의 인덱스를 이용 .find('요소:eq(인덱스)'') => eq는 equals와 같은 기능
			
			//RedPlus 글씨를 같는 요소의 형제들
			$('td:contains("Red")') //
			.siblings().addClass('redColor')
			.parent()
			.find('td:eq(0)')
			.addClass('blueColor');
			//td태그 중에 첫번째 요소
	});
</script>

CSS

<style type="text/css">

.redColor {

color: Red;

}

.blueColor {

color: Blue;

}

</style>

HTML

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

Red의 문자열을 가진 td태그 의 형제 태그들을 redColor css를 적용시키고,

td의 0번째 인덱스 번호의 부모 태그(RedPlus)에 blueColor css를 적용.

jQuery - DOM요소 가져오기

** (DOM : Document Object Model)

<script type="text/javascript">
	// $(document).ready(

	// $().ready(

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

** $(document).ready() 를 줄이면 --> $(function)

HTML

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

먼저 alert실행 후 HTML이 실행

제이쿼리 코드를 보면 첫번째 input태그 중 이름이 n1인 태그를 찾는데 이름이 n1인 태그 중에 get(0) 즉 첫번째를 선택하여 tagName => 그 태그의 이름을 추출

input 태그를 추출했기 때문에 경고창에 INPUT이 출력

jQuery - 이벤트 결합 (bind())

<script type="text/javascript">
	$(document).ready(function() {
		//bind(): 요소와 이벤트를 묶어주는 역할을 담당
		//요소.bind("이벤트명",이벤트발생시 호출되는 함수);
		//요소.unbind("이벤트명");
		// click 이벤트는 대부분의 요소에 적용할 수 있다.!!!
		$('#btnClick').bind("click",function(){
			alert("클릭 이벤트 발생!!");
		});
		
		$("#btnClick").bind("mouseover",function(){
			//alert("마우스 올려놨어요");
			$(this).addClass('redColor'); // 이벤트 발생시 호출되는 함수내에서 $(this) 는 이벤트를 발생시킨 요소 자기자신
		});
		$("#btnClick").bind("mouseout",function(){
			//alert("마우스 나갔어요.");
			$(this).addClass('blueColor');
		});
	});
</script>

CSS

.redColor {
	color: Red;
}

.blueColor {
	color: Blue;
}

HTML

<body>

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

</body>

mouseover => 해당 글 위에 마우스 커서를 올리면 이벤트 발생

mouseout => 해당 글 위에서 마우스 커서를 치우면 이벤트 발생

'클릭하세요!!!' => div태그로 묶여 있지만 클릭 이벤트를 넣을 수 있다.

첫번째 테스트에서는 마우스를 올려놨을때 경고창을 뜨게 했고 주석 처리후 두번째 테스트는 글 색이 변화는 걸로 했다.

jQuery - CSS지우기

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

CSS

<style type="text/css">

.yellowBorder {

background-color: yellow;

border: 1px solid red

}

</style>

HTML

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

특정 클래스명에 CSS를 적용 시킬때는 addClass('클래스명')

CSS를 지울 때는 removeClass('클래스명')

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

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

      });
</script>

CSS

<style type="text/css">

.redColor{ color:Red }

</style>

HTML

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

저 단어 들이 각각의 div로 묶여있다.

하나씩 클릭 할때마다 클릭된 div만 css가 남아 있고 나머지div들은 css제거

닷넷코리아 클릭

비주얼아카데미 클릭

클래스명이 redColor를 가진 태그들한테 클릭 이벤트를 부여하고 클릭 됐을때 선언한 이벤트 발생시킨다.

클릭 이벤트가 발생되면 전체를 감싸고 있는 id가 mainMenu인 태그의 css를 없애고,

this를 통하여 클릭 이벤트가 발생한 태그에 다시 css를 적용..!!!

728x90

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

[KH 정보교육원 당산] 60일차(jQuery - 실습3) (0)	2021.06.07
[KH정보교육원 당산] jQuery - 실습 2 (0)	2021.06.02
[KH정보교육원 당산] 55일차(MVC예제 : 게시판 완성) (0)	2021.05.31
[KH정보교육원 당산] 53일차 ( model2 - MVC 예제: 게시판 리스트 /글 등록 ) (0)	2021.05.26
[KH정보교육원 당산] 연습문제6 (UI) (0)	2021.05.20

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

Dahoon06 Store