안녕하세요.
스크립트태그내에서 제이쿼리사용하시면서 CSS태그 제어를 이전 게시글에서 언급햇엇죠?
조금 더 심화된 기능에 대해서 작성하려고 합니다.
하지만, 간단하기 때문에 어렵지 않게 읽어주셨으면 좋겠습니다.
이번에도 이 전 글과 똑같이 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
|
<body>
<h1> 저녁에 뭐 먹을까요?</h1>
<select>
<option class='b'> 짜장 </option>
<option class='b'> 짬뽕 </option>
<option class='b' selected="selected"> 탕수육 </option>
<option class='b'> 군만두 </option>
<option class='b'> 우동 </option>
</select>
<h1> 게시판이에요</h1>
<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>
</table>
</body>
|
그렇다면, 이제 이 글의 핵심내용을 아래의 코드를 통해서 설명해드릴게요.
이 전글에서는 $(document).ready(function(){
$(값).css("속성명1","속성값1").css("속성명2","속성값2")....와도 같습니다.
풀어쓰면, 함수=스타일..이벤트안에서 css제어 방법=====> $(선택자).css('background','pink'); )
그런데 아래의 코드를 보시면
$(document).ready(function(){
$(값).removeClass(값); 이라는 코드를 볼 수 있습니다.
$(선택요소.a).removeClass(선택자 .a)메서드는 Class명의 여러개의 속성중에서 선택적으로 제거가 가능하다
=> 기본원리: 선택요소의 클래스 속성이 제거됩니다.
$(선택요소 .a ).removeAttr(선택자 class)메서드는 클래스 속성이 한번에 제거된다.
=> 기본원리: $('선택요소').removeAttr('속성명')은 선택한 것들의 속성명에 대해 전부 제거
$(선택요소 .a).addClass(선택자 .b)는 속성이 없는 a클래스의 속성값을 b로 바꾸는 기능입니다.
=> 기본원리: 해당 선택자로 속성이 바뀐다.
약간 헤깔리네요 음..ㅠ 더 마스터해야하는데 생각보다 관련된 포스팅도 없고..
이 부분은 나중에 한 번 더 공부해야될 거 같습니다 !!
관련된 결과값은 직접 타이핑하셔서 실행해보시는게 좋을 것 같아요!
이번만큼은!! 직접 결과를 확인하시기를 바랍니다!!
제가 설명이 부족한 탓에 코딩을 출력하면서 스스로가 이해를 하는데 도움이 되고자....!!
|
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
|
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(
function(){
//$('.a').css('background-color','lightgreen').css('font','20px italic 궁서').css('border','solid 3px blue').css('color','gray')
//tr태그는 선을 가지고 있지않기때문에, 문자를 가지고 있지 않기떄문에 td로 해야한다
$('.a').removeClass('a'); //class명 a인 태그들 선택 a클래스 속성 없애라
$('.a').removeAttr('class'); //a의 클래스속성을 없애라 (css함수여러개를 클래스.b로 묶어서 불러오기)
$('.a').addClass('.b'); //b로 바꾸다.
$('th:nth-child(3n+2)').addClass('b'); //배수로 찾는방법
});
</script>
<style>
h1 {color : red;}
table {border : solid 10px; }
td{border : solid 5px purple; }
b{
background-color:'yellow';
font:'20px italic 궁서';
border: 'solid 3px blue';
color:'gray'
}
</style>
</head>
|
더보기
<코드결과>
'WEB 기초 > Jquery' 카테고리의 다른 글
| 6. 이미지나열 이벤트 & 타이머 (심화문제) (0) | 2018.04.21 |
|---|---|
| 5. 버튼클릭 이벤트 (심화문제) (0) | 2018.04.19 |
| 4. jquery 이벤트 총정리 (on, off, one, click, mouseover, mouseout) (0) | 2018.04.18 |
| 2. 선택자를 이용해서 css 적용하기 (0) | 2018.04.16 |
| 1. Jquery 시작 (0) | 2018.04.16 |