2020-08-04JavaScript10 minutes read (About 1557 words) 0 visits

[jQuery] JQuery 사용설정, 선택자, css()

JQuery

JQuery : 자바스크립트의 라이브러리 언어 (자주 사용하는 기능만 모아놓은 언어)
공부할 주요 내용은 아래 세가지 : 선택자, Ajax, Json
js쓰면 되는데 왜 굳이 JQuery를 쓸까?
- js보다 페이지 호환성이 우수하기때문
JQuery document

JQuery 다운로드

JQuery 사이트 방문 > download 탭 선택
Download the compressed, production jQuery 3.5.1 클릭 > 다른 이름으로 바탕화면에 저장
Download the uncompressed, development jQuery 3.5.1 클릭 > 다른 이름으로 바탕화면에 저장
Download the compressed, production jQuery 3.5.1 slim build 클릭 > 다른 이름으로 바탕화면에 저장
Download the uncompressed, development jQuery 3.5.1 slim build 클릭 > 다른 이름으로 바탕화면에 저장

다운로드 받은 파일들의 차이점

이름에 min 유무 : 원본에서 주석없애고 압축해서 만든 파일이 min파일이다.
- min파일은 데이터를 읽어들이는 속도가 상대적으로 빠르다
- 그럼 무조건 min을 써야할까?
- NOPE! 하고있는 작업에 따라 다르다. 초단위로 속도가 중요한 프로젝트면 min을 써야한다
이름에 slim 유무 : min에서 더 slim하게 만든 파일.

JQuery를 내 프로젝트에 연결하는 두 가지 방법

내 로컬에서 제이쿼리 라이브러리 추가 : 직접 다운로드해서 연결
네트워크 전송방식 라이브러리 추가 : Google CDN > 3.x snippet 코드를 복붙
- 네트워크상황이 안 좋을 경우 에러가 발생할 수 있으므로 보통으 라이브러리를 직접 다운로드해서 사용한다.

<!-- 라이브러리추가방법 첫번째 : 내 컴퓨터에 있는 제이쿼리 라이브러리 추가 -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>

<!-- 라이브러리추가방법 두번째 : 네트워크 전송방식 라이브러리 추가(구글 CDN사용)  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

프로젝트 생성하기

새로운 dynamic web project생성
생성한 프로젝트 우클릭 > properties > java build path > add library > server runtime > Tomcat설정하기
JQuery 라이브러리 다운로드 받기 : 보통은 jquery-3.5.1.min.js을 사용한다.
프로젝트 > webcontent > js 폴더를 생성하고 다운로드 받은 JQuery라이브러리를 넣는다.
webcontent에 test.jsp생성 후 script태그로 연결하기
프로젝트 우클릭 > 설정 > tern > modules > JQuery 두 개 클릭 후 저장
이제 Test1.jsp페이지 생성 후 코딩하면 됨!

제이쿼리 사용법

총 3가지 방법이 있다.
- 실무에선 주로 첫번째방법과 두번째방법을 사용한다.
제이쿼리와 자바스크립트 코드가 있다면 실행순서는 자바스크립트 먼저이다.
실행순서 :
1. 자바스크립트
2. HTML
3. 제이쿼리

<script type="text/javascript">
	//첫번째 제이쿼리사용방법
	$(document).ready(function(){
		alert("제이쿼리사용1")
	}); //도큐먼트안의 ready()펑션을 실행 -> 그 안에 실행문넣기
	
	//두번째 제이쿼리사용방법
	$(function(){
		alert("제이쿼리사용2")
	});
	
	//세번째 제이쿼리사용방법
	jQuery(document).ready(function(){
		alert("제이쿼리사용3")
	});
	
	alert("자바스크립트 사용")
</script>

제이쿼리 선택자

선택자 : 특정 동작이 적용될 대상

선택자 종류 : 직접선택자, 속성탐색선택자

직접선택자
전체 선택자종류

선택자 예시

<!-- 제이쿼리 라이브러리연결  -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	//자바스크립트 - 본문 실행전에 실행됨
	
	$(function(){
	//제이쿼리 - 본문 실행후에 실행됨
	
	//대상.동작메서드();
	//선택자 : 
		//1. 직접선택자 : [*]-전체, [태그]-해당태그요소, [#id]-id요소만,[.class]-class요소
		//* : 모든 요소(전체)
		$('*').css('color', 'green');
		//태그 : 특정 태그만
		$('h1').css('color', 'red');
		//id값 : 특정 요소중 id값에 해당하는 요소만	
		$('#t1').css('color', 'red');
		$('h1#t1').css('color', 'orange'); //명확하게 표시. 추천
		//class값 : 특정 요소중 class값에 해당하는 요소만 
		$('.c1').css('color', 'blue');
		
		//태그선택자임.
		//$('input').val('홍길동');
		//2. 속성탐색 선택자 : 속성을 가지고 탐색해서 처리함
		//요소[속성=값]
		//$('input[name=id]').val('홍길동');
		//요소[속성^=값] : 해당 값으로 시작하는 요소를 찾아서 지정
		$('input[name^=i]').val('홍');
		$('input[type=password]').val('1234');
		//요소[속성$=값] : 해당 값으로 끝나는 요소를 찾아서 지정
		$('input[type$=t]').val('테스트');
		$('input[name$=d]').val('테테');
		
		//3. 위치 탐색 선택자
	   	// 요소의 태그:first (첫번째)
	   	// 요소의 태그:last (마지막)	
		$('tr:first').css('background', 'yellow'); 
		$('tr:last').css('background', 'lightblue'); 
		// 요소의 태그:odd (홀수)
		// 요소의 태그:even (짝수)
		// * 테이블 0번부터 시작
		$('tr:odd').css('background', 'powderblue'); 
		$('tr:even').css('background', 'aquamarine');
		//코드가 순차적으로 진행되기때문에 첫번째선택요소를 위치변경해주면 된다.
		$('tr:first').css('background', 'yellow'); 
	});
</script>
</head>
<body>
<h2>WebContent/jq/Test2.jsp</h2>

<h1 id="t1">제목1</h1>
<h1 class="c1">제목2</h1>
<h1 class="c1">제목3</h1>
<h1>제목4</h1>
<hr>
내용
<hr>

아이디 : <input type="text" name="id"><br>
비밀번호 : <input type="password" name="pw"><br>

<hr>
	
<table>
  <tr>
    <td>이름</td>
    <td>혈액형</td>
    <td>지역</td>
  </tr>
  <tr>
    <td>사용자1</td><td>A</td><td>부산</td>
  </tr>
   <tr>
    <td>사용자2</td><td>B</td><td>서울</td>
  </tr>
   <tr>
    <td>사용자3</td><td>O</td><td>대구</td>
  </tr>
   <tr>
    <td>사용자4</td><td>AB</td><td>제주</td>
  </tr>
</table>

</body>

제이쿼리 css함수사용

<!-- 제이쿼리 라이브러리연결  -->
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"> </script>
<script type="text/javascript">
	$(function(){
		
		//1. 태그의 속성값을 가져오기
		//rgb(0,0,0)-검정 rgb(255,255,255)-흰색
		let c1 = $('h2').css('color');
		console.log("색상변경전 : "+c1); //출력값 색상변경전 : rgb(0, 0, 0)
		//h2태그의 글자색 변경
		//$('h2').css('color', 'dodgerBlue');
		let c2 = $('h2').css('color');
		console.log("색상변경후 : "+c2); //출력값 색상변경후 : rgb(30, 144, 255)
		
		
		//2.index이용 : 같은 태그가 여러개면 내부적으로 요소를 구분할 수 있도록 index가 0부터 붙는다
		//컬러 정보를 저장하는 배열 준비
		let col = ['dodgerBlue', 'orange', 'darkgreen', 'tomato'];
		 $('h2').css('color',function(index){
			alert(index+"!!!!");
			return col[index];
		 })
		 
		//3.한번에 속성 여러개 사용 => 중괄호사용해서 여러개 동시처리
		 $('h2').css({
			color:'tomato',
			backgroundColor: "gray"
		 });
		 
		//4. 속성을 한 번에 처리 : 글자색 - 검정, 배경색 - col배열사용해서 지정
		 $('h2').css({
			 color:'black',
			 backgroundColor: function(index){return col[index]}
		 })
	});
</script>

</head>
<body>
<h1>WebContent/jq/Test3.jsp</h1>

<h2> head-0 </h2>
<h2> head-1 </h2>
<h2> head-2 </h2>
<h2> head-3 </h2>
<h2> head-4 </h2>

#ITWILL(JAVA)jQuery

[jQuery] JQuery 사용설정, 선택자, css()

JQuery

JQuery 다운로드

다운로드 받은 파일들의 차이점

JQuery를 내 프로젝트에 연결하는 두 가지 방법

프로젝트 생성하기

제이쿼리 사용법

제이쿼리 선택자

선택자 종류 : 직접선택자, 속성탐색선택자

선택자 예시

제이쿼리 css함수사용

Catalogue

Categories

Recent

Archives

Tags

Advertisement