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

JQuery

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




JQuery 다운로드

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




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

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




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

  1. 내 로컬에서 제이쿼리 라이브러리 추가 : 직접 다운로드해서 연결
  2. 네트워크 전송방식 라이브러리 추가 : Google CDN > 3.x snippet 코드를 복붙
    • 네트워크상황이 안 좋을 경우 에러가 발생할 수 있으므로 보통으 라이브러리를 직접 다운로드해서 사용한다.
1
2
3
4
5
<!-- 라이브러리추가방법 첫번째 : 내 컴퓨터에 있는 제이쿼리 라이브러리 추가 -->
<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>




프로젝트 생성하기

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




제이쿼리 사용법

  • 총 3가지 방법이 있다.
    • 실무에선 주로 첫번째방법과 두번째방법을 사용한다.
  • 제이쿼리와 자바스크립트 코드가 있다면 실행순서는 자바스크립트 먼저이다.
  • 실행순서 :
    1. 자바스크립트
    2. HTML
    3. 제이쿼리
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
//첫번째 제이쿼리사용방법
$(document).ready(function(){
alert("제이쿼리사용1")
}); //도큐먼트안의 ready()펑션을 실행 -> 그 안에 실행문넣기

//두번째 제이쿼리사용방법
$(function(){
alert("제이쿼리사용2")
});

//세번째 제이쿼리사용방법
jQuery(document).ready(function(){
alert("제이쿼리사용3")
});

alert("자바스크립트 사용")
</script>




제이쿼리 선택자

  • 선택자 : 특정 동작이 적용될 대상
    http://www.nextree.co.kr/p9747/




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

  1. 직접선택자
    http://www.nextree.co.kr/p9747/
  2. 전체 선택자종류
    http://toshi78.dothome.co.kr/




선택자 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- 제이쿼리 라이브러리연결  -->
<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함수사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- 제이쿼리 라이브러리연결  -->
<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>

Comments