안녕하세요!!
Jquery = java script
다만, 보다 더 편리하고 간단하게 작성할 수 있다는 장점이 있다. !!
|
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
|
<body>
<h1 id='first'> jquery 시작 </h1><br>
<a class='blue' href=''> 링크동작태그</a><br>
<input class='blue' type="text" value='텍스트입력'><br>
<input type="password" value="암호입력"><br>
<input type="radio" value="자바">자바<br>
<input type="checkbox" value='jquery' checked="checked"> jquery<br>
<h1> 저녁에 뭐 먹을까요? </h1><br>
<select>
<optgroup label="메뉴판"></optgroup>
<option> 짜장 </option>
<option> 짬뽕 </option>
<option selected="selected"> 탕수육 </option>
<option> 군만두 </option>
<option> 우동 </option>
</select>
<table>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목 </td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
<tr> <td>번호</td><td class='a'>제목</td><td>작성자</td> </tr>
</table>
</body>
|
|
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
|
<head>
<script>
//$('h1'). //j쿼리가 h1을 변수선언하는 식이다. 뒤에 함수만 올수있다. 속성은 올수 X
//document.getElementsByTagName('h1')[1].style.color='blue';
$(document).ready(
function(){
//$('h1').css("color", "blue");
//$('a').css('color','green');
//$('input').css('color','orange');
//$('select > option').css('color','red'); //$('select option') //^는 XX로 시작하는거냐, *는 XX로 포함하는거냐, $는 XX로 끝나는거냐
//$('input[value$=입력]').css('color','pink'); //유일하게 $가 정규식표현의 종료로 쓰인다. input태그중에 입력이라고 끝나는 것들을 pink색으로 바꾼다.
//$('#first').css('color','blue');
//$('.blue').css('color','blue');
//$('option:selected').css('color','red'); //$('option[selected=selected]').css('color','red');
//태그명:조건 //테이블의 index는 0부터 시작한다
//$('tr:odd').css('background-color','red'); //table은 한개. tr의 홀수를 색칠한다.(단, index번호로 색칠한다는 점을 주의하자 1 3 5 7 9를 인덱스로 칠하니까 짝수처럼 보임)
//$('tr:even').css('background-color','blue'); //tr의 짝수를 색칠한다.(단, index번호로 색칠한다는 점을 주의하자 0 2 4 6 을 인덱스로 칠하니까 홀수처럼 보임)
//행은 even과 odd로 전체색칠못하니까 class태그명을 가져오는방식을 써야한다 //class태그명은 나중에 for문으로 묶어서 지정할 수 있다고한다.
//$('.a').css('background-color','gray');
//$('tr:first').css('background','pink'); //첫 열만(가로)
//$('tr:last').css('background','green'); //끝 열만(가로)
//$('tr:lt(5)').css('background','aqua'); //5보다 작은 index의 열만 ==lessthan
//$('tr:gt(5)').css('background','aqua'); //5보다 큰 index의 열만 ==greatthan
//$('tr:eq(5)').css('background','aqua'); //5번 인덱스만 == equal
//$('태그명.클래스명#id명')
//$('td.a').css('background','aqua') //class가 a인 td태그만
//tr 첫 열만 css 3가지 제어문을 적용시켜보자.
$('tr:first').css('background','aqua').css('textDecoration', 'underline').css('color', 'red');
}
);
</script>
<style>
h1{ color:red; }
table { border:solid 2px; }
td { border:solid 2px green; }
</style>
</head>
|
우선은, jquery태그를 사용하기위해서 $(document).ready(function(){ 실행값 }); 이라는 함수를
실행해줘야합니다.
Style태그와 Script태그를 나눠서 css를 적용시켜주고 있는 것을 볼 수 있습니다.
script내에서의 css는 선택자를 사용해서 css를 적용시켜줘야합니다.
선택자에는
1) 클래스선택자
2) id 선택자
3) 태그선택자
4) 상속선택자가 있습니다.
jquery 또한 함수가 전부라고 해도 과언이 아닙니다. 따라서 함수를 중첩시켜주는 일이 앞으로 많
을거에요!
위 코드의 문장을 보시면 전부 $( 값 ) .css("속성명1",'속성값1").css("속성명2","속성값2").....형태
입니다. css (곧 style)을 계속 적용시키려면 마침표 (.)를 통해 연결시켜주면 됩니다.
기본적인 규칙을 알면 쉬운 코드입니다.
클래스선택자는 ( '.클래스값')을 사용합니다
id선택자는 ('#id값')을 사용합니다.
태그선택자는 ("태그명")을 사용합니다.
상속선택자는 (부모태그명 > 자식태그명) 또는 (부모태그명 자식태그명) 과 같이 사용합니다.
추가적으로,
tr:odd나, tr:even 문장을 보셧을 겁니다. odd는 열(단)의 홀수인덱스가, even는 행(단)의 짝수인
덱스에 적용됩니다. (단, 테이블의 index값은 0부터 시작되기때문에 홀수는 짝수처럼, 짝수는 홀수
에서처럼 적용되는 걸로 보입니다)
또한, tr:first나, tr:last나, tr:lt(5), tr:gt(5), tr:et(5)이라고 작성된 표현을 볼 수 있습니다.
first = 첫 열만
last = 끝 열만
lt(5) = less than으로써, 5보다 작은 열만
gt(5) = great than으로써, 5보다 큰 열만
eq(5) = equal 으로써, 5일떄만
태그명.클래스명.아이디명로도 사용할 수 있다.
마지막으로는, option:selected이거나, checkbox:checked를 기준값으로 사용할 수 있습니다.
중복되는 코드도 있지만, 그 외의 코드들을 통한 예를 몇 개 더 추가했습니다.
이번 chapter에서는 많이 보고 눈으로 익히는 방법으로 공부하시는게 제일 좋습니다.
$input[value^=아이디]') //아이디로 시작되는 value값을 찾으세요.
$('input[value*=아이디]') //아이디가 반복되는 value값을 찾으세요.
$('input[value$=아이디]') //아이디로 끝나는 value값을 찾으세요.
==> 정규화 표현식의 문법이 쓰이는 게 보이시나요?
$('a[href*=google]')
$('div:odd') //짝수번째를 의미한다.
$('div:even') //홀수번째를 의미한다.
$('input[checked=checked]' //radio,checkbox
$('input:checked'] //radio, checkbox
$('input:checked'] //radio, checkbox
$('option=selected') //radio, checkbox
<코드결과>
'WEB 기초 > Jquery' 카테고리의 다른 글
| 6. 이미지나열 이벤트 & 타이머 (심화문제) (0) | 2018.04.21 |
|---|---|
| 5. 버튼클릭 이벤트 (심화문제) (0) | 2018.04.19 |
| 4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout) (0) | 2018.04.18 |
| 3. Css 제어_응용하기 (0) | 2018.04.16 |
| 1. Jquery 시작 (0) | 2018.04.16 |